Flex: Does anybody know a TabNavigator component that allows for html labels in the tabs or how to do this?

Question

I'm trying to put html-formatted labels in the tabs of a TabNavigator.

I saw SuperTabNavigator in the FlexLib but it doesn't seem to do the trick for me.

I found this html button code and was able to inject my own TabBar and have it change the class instantiated by the ClassFactory when a navItem is created.

HtmlTabNavigator:

public class HtmlTabNavigator extends TabNavigator
{
 public function HtmlTabNavigator()
 {
  super();
 }


 override protected function createChildren():void
    {
        if (!tabBar)
        {
            tabBar = new HtmlTabBar(); // inject my class
            tabBar.name = "tabBar";
            tabBar.focusEnabled = false;
            tabBar.styleName = new StyleProxy(this, tabBarStyleFilters);
            rawChildren.addChild(tabBar);

            if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_3_0)
            {
             tabBar.setStyle("paddingTop", 0);
             tabBar.setStyle("paddingBottom", 0);
    tabBar.setStyle("borderStyle", "none");          
            }
        }

        super.createChildren(); // ommits original TabBar creation but continues in inheritance chain
    }


    public function setHtmlLabels( htmlLabels:Array ):void
    {

     for (var i:uint = 0; i < tabBar.numChildren; i++)
     {
      var button:Button = tabBar.getChildAt( i ) as Button;
      button.label = htmlLabels[ i ];
     }
    }
}

HtmlTabBar:

public class HtmlTabBar extends TabBar
{
 public function HtmlTabBar()
 {
  super();

  navItemFactory = new ClassFactory(HtmlButton);
 }
}

Now I'm having problems with the style of the button as it looks like a regular button and not like a tab anymore. It is not apparent to me why this works when a ButtonBarButton is used.

Any ideas are welcome.

Thanks Stefan

Answer 1

Like you mentioned, I think its best to built your own component for this scenario. You could consider using a textArea with editable=false for the tab portion since I believe htmlText can be displayed in that component.

Edit: Can you maybe modify the SuperTabNavigator and add in a textArea... so the original label for the tab could be blank (if you cant remove it) then have the textArea on top of it.

Answer 2

With best regards,

Following your example, I tried to specialize the TabBar to use a Custom Button with a Mnemonic Label functionality, but I get a compile time error:

1178: Attempted access of inaccessible property navItemFactory through a reference with static type AspMnemonicTabBar.

Reading the Flex Source Code I found it belongs to a private namespace mx_internal. So how could I access it to set a new ClassFactory ??

package
{
    import mx.controls.TabBar;
    import mx.core.ClassFactory;

    public class AspMnemonicTabBar extends TabBar
    {
     public function AspMnemonicTabBar()
     {
      super();
      navItemFactory = new ClassFactory(AspMnemonicButton);
     }
    }
}

Answer 3

Alessandro, navItemFactory is in namespace mx_internal. Access it through mx_internal::navItemFactory, or put the following line below your import statements: use namespace mx_internal;