Monday, 8 March 2010

Custom ToolTip on NavBar and TabBar components

In Flex, when you want to give a tool tip text for visual component that extends UIComponent class, set the value of toolTip property with the desired text.
However, it is possible to create custom ToolTips for your visual components by implementing mx.core.IToolTip interface in your custom component. After creating a custom component, you should add a handler to override the basic toolTip mechanism of the target component by intercepting toolTipCreate event.

You can find lots of samples about customization of toolTips in the blogs and adobe's website http://livedocs.adobe.com/flex/3/html/help.html?content=tooltips_4.html .

Here, I wanted to show how to customize toolTips on NavBar and TabBar subclasses (such as ButtonBar, LinkBar, and ToggleButtonBar) support ToolTips in their data providers.

Firstly, I showed how to assign toolTips for the children in BasicToolTipButtonBar.mxml component. Here, toolTipField property of ButtonBar is used to specify which field of dataProvider array will be displayed as tooltip.

<?xml version="1.0" encoding="utf-8"?>
<mx:ToggleButtonBar xmlns:mx="http://www.adobe.com/2006/mxml"
labelField="name"
toolTipField="code" dataProvider="{courseList}">

<mx:Script>
<![CDATA[
[Bindable]
private var courseList:Array = [{name:'C Programming', code:'C140'},
{name:'PL Concepts', code:'C242'}, {name:'Software Engineering', code:'C350'}];
]]>
</mx:Script>
</mx:ToggleButtonBar>

After this basic sample, I took a step forward to customize the displayed toolTip in CustomToolTipButtonBar.mxml component. I used a Panel container as custom component to display course info on it. To achive this, you should implement a tricky solution by intercepting the children components' creations in the navigation bar and adding ToolTipEvent.TOOL_TIP_CREATE event listener for all of them. The rest is the same when you customize a toolTip.

<?xml version="1.0" encoding="utf-8"?>
<mx:ToggleButtonBar xmlns:mx="http://www.adobe.com/2006/mxml"
labelField="name"
toolTipField="code" dataProvider="{courseList}"
updateComplete="updateCompleteListener(event)">

<mx:Script>
<![CDATA[
import mx.controls.Button;
import mx.events.FlexEvent;
import mx.events.ToolTipEvent;
[Bindable]
private var courseList:Array = [{name:'C Programming', code:'C140'},
{name:'PL Concepts', code:'C242'}, {name:'Software Engineering', code:'C350'}];

private function updateCompleteListener(event:FlexEvent):void {
if (this.getChildren() == null) {
return;
}
for each (var btn:Button in this.getChildren()) {
btn.addEventListener(ToolTipEvent.TOOL_TIP_CREATE, onCreateToolTip);
}
}

private function onCreateToolTip(e:ToolTipEvent):void {
var btnLbl:String = Button(e.target).label;
var toolTipLbl:String = Button(e.target).toolTip;

var customToolTip:ToolTipComponent = new ToolTipComponent();
customToolTip.title = "Course Code: " + toolTipLbl;
customToolTip.courseName = btnLbl;
e.toolTip = customToolTip;
}
]]>
</mx:Script>
</mx:ToggleButtonBar>