Styling the Flex TabNavigator control

The following example shows how you can style the TabNavigator control in Flex using the tabStyleName, firstTabStyleName, lastTabStyleName, and selectedTabTextStyleName styles.

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/09/26/styling-the-flex-tabnavigator-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TabNavigator {
            backgroundColor: black;
            cornerRadius: 0;
            tabStyleName: "MyTabs";
            firstTabStyleName: "MyFirstTab";
            lastTabStyleName: "MyLastTab";
            selectedTabTextStyleName: "MySelectedTab";
        }

        .MyTabs {
            backgroundColor: black;
            cornerRadius: 0;
            color: black;
        }

        .MyFirstTab,
        .MyLastTab {
            backgroundColor: black;
            cornerRadius: 0;
            color: black;
        }

        .MySelectedTab {
            backgroundColor: haloBlue;
            color: haloBlue;
            textRollOverColor: haloBlue;
        }
    </mx:Style>

    <mx:TabNavigator id="tabNavigator"
            width="100%"
            height="100%"
            tabHeight="40">
        <mx:VBox label="Panel 1" backgroundColor="haloOrange">
            <mx:Label text="TabNavigator container panel 1"/>
        </mx:VBox>
        <mx:VBox label="Panel 2" backgroundColor="haloGreen">
            <mx:Label text="TabNavigator container panel 2"/>
        </mx:VBox>
        <mx:VBox label="Panel 3" backgroundColor="haloBlue">
            <mx:Label text="TabNavigator container panel 3"/>
        </mx:VBox>
        <mx:VBox label="Panel 4" backgroundColor="haloSilver">
            <mx:Label text="TabNavigator container panel 4"/>
        </mx:VBox>
    </mx:TabNavigator>

</mx:Application>

View source is enabled in the following example.

29 thoughts on “Styling the Flex TabNavigator control

  1. hello,

    Very intresting work.

    I’m looking for extract on item from a xml fiel, using his name in order to have his descrpition, with HTTPSERVICE can you give me a help?

  2. pierre,

    Sure. The trick to quickly/easily processing an XML file is using the new E4X engine in ActionScript 3.0.

    If you can post some sample XML and what you’re trying to do, I can take a look. But a word of caution, my blog notriously eats HTML/XML tags, so you may want to escape the < and > characters with &lt; and &gt; respectively. Either that, or try changing < to [ and > to ].

    Peter

  3. This books.xml file on the server side:

    <?xml version="1.0"?>
    <books>
        <item>
            <title>Blue Lagon</title>
            <author>john</author>
        </item>
        <item>
            <title>Black Montain</title>
            <author>Kane</author>
        </item>
        <item>
            <title>Yellow Sky</title>
            <author>Paul</author>
        </item>
    </books>
    

    And the MXML File:

    < ?xml version="1.0" encoding="utf-8"?>
    < mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="myService.send()">
        < mx:Script>
            < ![CDATA[
                import mx.collections.ArrayCollection;
                import mx.rpc.events.ResultEvent;
    
                [Bindable]
                private var myData:ArrayCollection;
    
                private function resultHandler(event:ResultEvent):void {
                    myData = event.result.books.item;
                }
            ]]>
        </mx:Script>
    
        <mx:HTTPService id="myService" url="books.xml" result="resultHandler(event)"/>
    
        <mx:Text x="150" y="150" id=".." text="{..}"/> <!-- book name write by Kane  - Result : Black Montain -->
        <mx:Text x="250" y="180" id=".." text="{..}"/> <!-- book name write by John  - Result : Blue Lagon -->
        <mx:Text x="450" y="200" id=".." text="{..}"/> <!-- book name write by Paul  - Result : Yellow Sky -->
    
    < /mx:Application>
    

    The problem is to extract the title of the book using the name of the author ( one author = only one book) and put the title any where in the screen ( this is why X and Y are variables).

    I used HTTPSERVICE because it seems to me the best solution, but if any other method are more interresting it’s possible to change it.

    Thank for your help.

  4. pierre,

    I have two similar solutions for you… The first one is more in line with what you are trying to do, I think:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="myService.send()">
    
        <mx:Script>
            <![CDATA[
                import mx.rpc.events.ResultEvent;
    
                [Bindable]
                private var myData:XML;
    
                private function resultHandler(event:ResultEvent):void {
                    myData = event.result as XML;
                }
            ]]>
        </mx:Script>
    
        <mx:HTTPService id="myService"
                url="books.xml"
                resultFormat="e4x"
                result="resultHandler(event)"/>
    
        <!-- book name write by Kane - Result : Black Montain -->
        <mx:Text id="b0" x="150" y="150"
                text="{myData.item.(author.text() == 'Kane').title.text()}"/>
    
        <!-- book name write by John - Result : Blue Lagon -->
        <mx:Text id="b1"  x="250" y="180"
                text="{myData.item.(author.text() == 'john').title.text()}"/>
    
        <!-- book name write by Paul - Result : Yellow Sky -->
        <mx:Text id="b2" x="450" y="200"
                text="{myData.item.(author.text() == 'Paul').title.text()}" />
    
    </mx:Application>
    

    Although then I was wondering why/if bindings are needed, and why you don’t just assign the book title text in the result handler, like so:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            initialize="myService.send();">
    
        <mx:Script>
            <![CDATA[
                import mx.rpc.events.ResultEvent;
    
                private var myData:XML;
    
                private function resultHandler(event:ResultEvent):void {
                    myData = event.result as XML;
                    b0.text = getTitleByAuthor("Kane");
                    b1.text = getTitleByAuthor("john");
                    b2.text = getTitleByAuthor("Paul");
                }
    
                private function getTitleByAuthor(value:String):String {
                    var title:String = myData.item.(author.text() == value).title.text();
                    return title;
                }
            ]]>
        </mx:Script>
    
        <mx:HTTPService id="myService"
                url="books.xml"
                resultFormat="e4x"
                result="resultHandler(event)"/>
    
        <!-- book name write by Kane - Result : Black Montain -->
        <mx:Text id="b0" x="150" y="150" />
    
        <!-- book name write by John - Result : Blue Lagon -->
        <mx:Text id="b1" x="250" y="180" />
    
        <!-- book name write by Paul - Result : Yellow Sky -->
        <mx:Text id="b2" x="450" y="200"  />
    
    </mx:Application>
    

    Hope that helps,
    Peter

  5. Peter,

    Why do not use tag?
    I do my work always use this tag, but it will binding the xml file.
    So, what’s the difference between and ?

    dormouse

  6. dormouse,

    I think using bindings adds a bit of additional overhead. But personally, I think the second snippet above is a bit more elegant (and less code), plus, if the XML changes, it would be a lot easier to change the code in one place rather than 3.

    Peter

  7. Thank a lot for your help, exactly that i was looking for.

    The second mxml script his more “elegant”.

    I have a last question :,i have modify the id in order to call <mx: text with the name author in the id.

    Is it possible to replace :

     kane.text = getTitleByAuthor("Kane");
     john.text = getTitleByAuthor("john");
     paul.text = getTitleByAuthor("Paul");
    

    with a for.. each ?

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            initialize="myService.send();">
    
        <mx:Script>
            <![CDATA[
                import mx.rpc.events.ResultEvent;
    
                private var myData:XML;
    
                private function resultHandler(event:ResultEvent):void {
                    myData = event.result as XML;
                    kane.text = getTitleByAuthor("Kane");
                    john.text = getTitleByAuthor("john");
                    paul.text = getTitleByAuthor("Paul");
                }
    
                private function getTitleByAuthor(value:String):String {
                    var title:String = myData.item.(author.text() == value).title.text();
                    return title;
                }
            ]]>
        </mx:Script>
    
        <mx:HTTPService id="myService"
                url="books.xml"
                resultFormat="e4x"
                result="resultHandler(event)"/>
    
        <!-- book name write by Kane - Result : Black Montain -->
        <mx:Text id="Kane" x="150" y="150" />
    
        <!-- book name write by John - Result : Blue Lagon -->
        <mx:Text id="john" x="250" y="180" />
    
        <!-- book name write by Paul - Result : Yellow Sky -->
        <mx:Text id="Paul" x="450" y="200"  />
    
    </mx:Application>
    
  8. sorry, in fact :

    Kane.text = getTitleByAuthor("Kane");
    john.text = getTitleByAuthor("john");
    Paul.text = getTitleByAuthor("Paul");
    
  9. pierre,

    Ah, OK… Try this:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            initialize="myService.send();">
    
        <mx:Script>
            <![CDATA[
                import mx.rpc.events.ResultEvent;
    
                private var myData:XML;
    
                private function resultHandler(event:ResultEvent):void {
                    myData = event.result as XML;
                    
                    var xmllist:XMLList = myData.item;
                    var node:XML;
    
                    for each (node in xmllist) {
                        try {
                            this[node.author.text()].text = node.title.text();
                        } catch (err:ReferenceError) {
                            /* Ignore.
                               We probably have a XML node that doesnt have
                               a corresponding Text control on the display
                               list. */
                        }
                    }
                    
                }
            ]]>
        </mx:Script>
    
        <mx:HTTPService id="myService"
                url="books.xml"
                resultFormat="e4x"
                result="resultHandler(event)"/>
    
        <!-- book name write by Kane - Result : Black Montain -->
        <mx:Text id="Kane" x="150" y="150" />
    
        <!-- book name write by John - Result : Blue Lagon -->
        <mx:Text id="john" x="250" y="180" />
    
        <!-- book name write by Paul - Result : Yellow Sky -->
        <mx:Text id="Paul" x="450" y="200"  />
    
    </mx:Application>
    
  10. Hello,

    Is it possible to made a dynamic write in the XML file.

    On the client side, the file named book.xml :

    <?xml version="1.0"?>
    <books>
        <item>
            <title></title>
            <author></author>
        </item>
    </books>
    

    I’m looking for write and update this file throuth a mxml file named test.xml.

    Test.XML contain only the input zones (title and author) WITHOUT any button (save and update).

    Saving and updating the book.xml will be made dynamicly, when the information is put in the input zone.

    Is it possible to do this?

    Thanks for your help.

  11. So, I’ve been battling the firstTabStyleName and lastTabStyleName style properties and realized that at least Flex 2.01 does not even implement them. So if your example had any differences between each of these styles, they would not render as expected, but all look the same. It seems that Flex meant to override the firstButtonStyleName and lastButtonStyleName style properties from ButtonBar, but never got around to it. So if you use those properties, you can get the desired result.

  12. Hello, this is a very interesting job. But How could I change the background color of a “not selected tab”? I have tried with disabled-color but I have no result.

    Thankss a lot.

  13. I’m having the very same problem right now. I can’t find a way to do that, but I can’t believe it’s impossible either. I’ve been stuck on this for hours now.

  14. Hello,
    I have the same problem than Aidoru.
    I don’t know how coul’d i change a specified tab style …

    does anyone have an idea ?

    thanks a lot

  15. Hi,

    i need to style the disabled tab color i.e. i need to make the disable tab text italic.
    i could find the “selectedTabTextStyleName” property but is there any way to style disabled tab text. i am using Flex 2.

    Thanks

    -prashant

  16. prashant,

    This “works” but feels a bit hacky. The trick seems to be calling TabNavigator.getChildIndex() and getting an instance of the specific tab/button, then calling the setStyle() method and setting the fontStyle style to “normal” or “italic” depending on whether the tab is being enabled or disabled:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
        <mx:Script>
            <![CDATA[
                import mx.controls.Button;
                import mx.core.UIComponent;
    
                private function checkBox_change(evt:Event):void {
                    var checkBox:CheckBox = evt.currentTarget as CheckBox;
                    var tabNavChild:UIComponent = checkBox.data as UIComponent;
                    tabNavChild.enabled = checkBox.selected;
                    var idx:int = tabNav.getChildIndex(tabNavChild) as int;
                    var tab:Button = tabNav.getTabAt(idx);
                    var normalOrItalic:String = (checkBox.selected) ? "normal" : "italic";
                    tab.setStyle("fontStyle", normalOrItalic);
                }
            ]]>
        </mx:Script>
    
        <mx:ApplicationControlBar dock="true">
            <mx:VBox>
                <mx:CheckBox id="checkBox1"
                        label="Toggle ONE"
                        selected="true"
                        data="{vBox1}"
                        change="checkBox_change(event);" />
                <mx:CheckBox id="checkBox2"
                        label="Toggle TWO"
                        selected="true"
                        data="{vBox2}"
                        change="checkBox_change(event);" />
                <mx:CheckBox id="checkBox3"
                        label="Toggle THREE"
                        selected="true"
                        data="{vBox3}"
                        change="checkBox_change(event);" />
            </mx:VBox>
        </mx:ApplicationControlBar>
    
        <mx:TabNavigator id="tabNav" width="200" height="100">
            <mx:VBox id="vBox1" label="ONE" />
            <mx:VBox id="vBox2" label="TWO" />
            <mx:VBox id="vBox3" label="THREE" />
        </mx:TabNavigator>
    
    </mx:Application>
    

    Actually, looking at the problem again, this may be the better approach/solution. The following example listens for the enabledChanged event on the TabNavigator container’s VBox children and then toggles the fontStyle style accordingly:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            initialize="init();">
    
        <mx:Script>
            <![CDATA[
                import mx.controls.Button;
    
                private function init():void {
                    vBox1.addEventListener("enabledChanged",
                                vBox_enabledChange);
                    vBox2.addEventListener("enabledChanged",
                                vBox_enabledChange);
                    vBox3.addEventListener("enabledChanged",
                                vBox_enabledChange);
                }
    
                private function vBox_enabledChange(evt:Event):void {
                    var vBox:VBox = evt.currentTarget as VBox;
                    var idx:int = tabNav.getChildIndex(vBox);
                    var btn:Button = tabNav.getTabAt(idx) as Button;
                    var normalOrItalic:String = (vBox.enabled) ? "normal" : "italic";
                    btn.setStyle("fontStyle", normalOrItalic);
                }
            ]]>
        </mx:Script>
    
        <mx:ApplicationControlBar dock="true">
            <mx:VBox>
                <mx:CheckBox id="checkBox1"
                        label="Toggle ONE"
                        selected="true" />
                <mx:CheckBox id="checkBox2"
                        label="Toggle TWO"
                        selected="true" />
                <mx:CheckBox id="checkBox3"
                        label="Toggle THREE"
                        selected="true"/>
            </mx:VBox>
        </mx:ApplicationControlBar>
    
        <mx:TabNavigator id="tabNav" width="200" height="100">
            <mx:VBox id="vBox1"
                    label="ONE"
                    enabled="{checkBox1.selected}" />
            <mx:VBox id="vBox2"
                    label="TWO"
                    enabled="{checkBox2.selected}" />
            <mx:VBox id="vBox3"
                    label="THREE"
                    enabled="{checkBox3.selected}" />
        </mx:TabNavigator>
    
    </mx:Application>
    

    Hope that helps,

    Peter

  17. Hi peter,

    I have task to show bottom faced tab navigation, i mean opposite view of normal tab navigation. It depends on style of tab or i have to change codes in normal Tab navigation itself….?

    Thanks in Advance….
    deenalex

  18. Hey, I’m trying to do something similar to your first example, but when you make click on any tab this tab change its height (higher) but the rest maintain the original size, can you please give me a hand on this? i’ve tried everything!

  19. To change the color of a “not selected tab”

        TabNavigator {
           tabStyleName:myTabStyle;
        }
     
        .myTabStyle {
           fillColors: #006699, #cccc66;
           upSkin: ClassReference("CustomSkinClass");
           overSkin: ClassReference("CustomSkinClass");
           downSkin: ClassReference("CustomSkinClass");
        }

    http://livedocs.adobe.com/flex/gumbo/langref/mx/containers/TabNavigator.html

  20. Very helpful post. I was looking for how to change the corner radius of the tabs in a TabNavigator. Thank you! –Geoff

  21. This code doesn’t work in Flash Builder 4. I don’t know why. Perhaps problem between spark and halo? I’m using spark theme. Please help me solve this problem.

  22. I’m using Flex3 and I have a TabNavigator with 3 tabs (tab1, tab2, tab3). If a certain event is thrown, I want to change the colour (only the colour in the tab, not backgroundcolour) of tab3, regardless which tab is selected.
    Any ideas how to do that?

  23. can we put checkbox in TabNavigator; if yes can anyone share the links.

    Thanks in advance…

    waiting for your reply.

    Regards
    -Bechar

Comments are closed.