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

actionscript-3apache-flexflex3

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

Best Answer

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.

Related Topic