Using Custom Tab Classes with the Flex TabBar

The Flex TabBar class offers a lot of built-in functionality but on occassion you may need to extend the underlying components. In my case, I needed to add a custom property to the underlying tabs within the TabBar. While it is obvious and straightforward to extend the TabBar class as you would any other class, it was not so obvious (at least to me) how to get access to extend the underlying tabs it creates. Here is how I was able (with a little help) to do it (be gentle, I am by no means a "Flexpert" yet).

Part of the confusion is that there is no documentation for the Tab class in the Flex 3 Language Reference, though the class exists at mx.controls.tabBarClasses.Tab. However, it wasn't until reading through the source code for a Positioned TabNavigator by Stephen Downs that I was able to figure out how you could do this. Based on his code, I assume this would work for the TabNavigator as well but I haven't tested it as it wasn't required by my application.

First, we need to extend the Tab class as in the following example, where I add a dummy custom property to the class:

package com.controls
{
import mx.controls.tabBarClasses.Tab;

public class CustomTab extends Tab
{
public var dummyProperty:String;

public function CustomTab()
{
super();
}

}
}

The next step is to extend the TabBar class as in the following example:

package com.controls
{
import mx.controls.TabBar;
import access.view.db.CustomTab;
import mx.core.ClassFactory;
import mx.core.mx_internal;

use namespace mx_internal;

public class CustomTabBar extends TabBar
{
public function CustomTabBar()
{
super();
navItemFactory = new ClassFactory( CustomTab );
}

}
}

The important items here are assigning the new ClassFactory to the navItemFactory using our CustomTab class from above. This line will actually give you an error without adding the "use namespace mx_internal." You can now add this CustomTabBar just as you would a standard TabBar in the MXML. The next issue we need to address is how to assign a value to this custom property of my tabs since, as it stands, they would all be null.

In my scenario, the value of my custom property was determined by the contents of the item added to the ViewStack. Your scenario may be different but the basics of setting the custom property will likely remain the same: call a function to set the property whenever a new tab is added. You can do this by using the childAdd event within the TabBar like so:

<CustomTabBar
id="myCustomTabBar" childAdd="setCustomProperty(event)"
dataProvider="{foo}"
/>

The basics of the function would be something like this:

public function setCustomProperty(event:ChildExistenceChangedEvent):void {
var tab:CustomTab = event.relatedObject as CustomTab;
tab.dummyProperty = "foo";
}

That's it. Obviously this code is just the basics and you would want to turn it into something actually useful. In my case, I was setting a property that determined what contextual right-click menu to show depending on what you right-clicked on (each tab could be different). Determining what you right-clicked on and thereby what menu to show was a bit of a trick too but that may be fodder for another post.