Styling the Flex TabNavigator control

by Peter deHaan on September 26, 2007

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.

Tagged as: firstTabStyleName, lastTabStyleName, selectedTabTextStyleName, tabStyleName

{ 25 comments… read them below or add one }

1 pierre September 26, 2007 at 9:38 am

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 peterd September 26, 2007 at 9:47 am

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 < and > respectively. Either that, or try changing < to [ and > to ].

Peter

3 pierre September 27, 2007 at 3:36 am

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 peterd September 27, 2007 at 11:10 am

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 dormouse September 27, 2007 at 8:34 pm

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 peterd September 27, 2007 at 10:53 pm

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 pierre September 28, 2007 at 1:46 am

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 pierre September 28, 2007 at 1:48 am

sorry, in fact :

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

9 peterd September 28, 2007 at 8:08 am

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 pierre September 28, 2007 at 8:55 am

Hello peterd,

Exactly what i was looking for.

GREAT THANKS

11 pierre September 29, 2007 at 2:46 am

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.

12 peterd September 29, 2007 at 3:47 am

pierre,

Flex cannot read/write files on a user’s local computer, although it would be possible if you were using the Adobe Integrated Runtime (AIR — formerly code-named Apollo). For more information, see http://labs.adobe.com/technologies/air/.

Peter

13 Pierre October 2, 2007 at 4:50 am

Peter,

I will got to this adress and find the answer.

Thanks for your help

14 nicii October 26, 2007 at 10:57 am

thanks man, not a fan of the color line that follows each tab !

15 Michael J Godfrey November 16, 2007 at 3:34 pm

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.

16 Raul R November 19, 2007 at 2:52 am

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.

17 Aidoru February 1, 2008 at 3:03 am

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.

18 philippe-l April 22, 2008 at 8:29 am

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

19 prashant September 9, 2008 at 5:51 am

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

20 peterd September 9, 2008 at 8:41 am

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

21 Venkat from India October 30, 2008 at 3:12 am

I have tabs whose header text will be really long. Is there a way to increase the headers width accordingly. I am getting the text truncated right now.

22 deenalex November 10, 2008 at 5:04 am

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

23 Leonardo September 1, 2009 at 12:10 pm

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!

24 Brian September 22, 2009 at 2:12 pm

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

25 Geoffrey Hom February 4, 2010 at 10:35 am

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

Styling the Flex TabNavigator control

Pages

Recent Posts

Archives

But wait, there’s more…

Advertising

Styling the Flex TabNavigator control

Pages

Recent Posts

Archives

Blogroll

But wait, there’s more…

Advertising