Styling the Flex TabNavigator control

29 Responses to Styling the Flex TabNavigator control

1. pierre says:

   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?

   Reply
2. peterd says:

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

   Peter

   Reply
3. pierre says:

   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.

   Reply
4. peterd says:

   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

   Reply
5. dormouse says:

   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

   Reply
6. peterd says:

   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

   Reply
7. pierre says:

   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>
   

   Reply
8. pierre says:

   September 28, 2007 at 1:48 am

   sorry, in fact :

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

   Reply
9. peterd says:

   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&quot;
           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>
   

   Reply
10. pierre says:

    September 28, 2007 at 8:55 am

    Hello peterd,

    Exactly what i was looking for.

    GREAT THANKS

    Reply
11. pierre says:

    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.

    Reply
12. peterd says:

    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

    Reply
13. Pierre says:

    October 2, 2007 at 4:50 am

    Peter,

    I will got to this adress and find the answer.

    Thanks for your help

    Reply
14. nicii says:

    October 26, 2007 at 10:57 am

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

    Reply
15. Michael J Godfrey says:

    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.

    Reply
16. Raul R says:

    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.

    Reply
17. Aidoru says:

    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.

    Reply
18. philippe-l says:

    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

    Reply
19. prashant says:

    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

    Reply
20. peterd says:

    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

    Reply
21. Venkat from India says:

    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.

    Reply
22. deenalex says:

    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

    Reply
23. Leonardo says:

    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!

    Reply
24. Brian says:

    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

    Reply
25. Geoffrey Hom says:

    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

    Reply
26. Anonymous says:

    March 8, 2010 at 10:22 pm

    code for quiz using radio button and chaeck box …..

    Reply
27. Hanya says:

    April 30, 2010 at 4:37 pm

    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.

    Reply
28. Pascal says:

    May 3, 2011 at 11:34 pm

    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?

    Reply
29. bechar kanjariya says:

    September 3, 2011 at 10:36 pm

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

    Thanks in advance…

    waiting for your reply.

    Regards
    -Bechar

    Reply