Flex Examples

20 Responses to “Styling the Flex TabNavigator control”

1. 1 pierre Sep 26th, 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. 2 peterd Sep 26th, 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

3. 3 pierre Sep 27th, 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. 4 peterd Sep 27th, 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. 5 dormouse Sep 27th, 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. 6 peterd Sep 27th, 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. 7 pierre Sep 28th, 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. 8 pierre Sep 28th, 2007 at 1:48 am

   sorry, in fact :

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

9. 9 peterd Sep 28th, 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. 10 pierre Sep 28th, 2007 at 8:55 am

    Hello peterd,

    Exactly what i was looking for.

    GREAT THANKS

11. 11 pierre Sep 29th, 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. 12 peterd Sep 29th, 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. 13 Pierre Oct 2nd, 2007 at 4:50 am

    Peter,

    I will got to this adress and find the answer.

    Thanks for your help

14. 14 nicii Oct 26th, 2007 at 10:57 am

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

15. 15 Michael J Godfrey Nov 16th, 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. 16 Raul R Nov 19th, 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. 17 Aidoru Feb 1st, 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. 18 philippe-l Apr 22nd, 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. 19 prashant Sep 9th, 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. 20 peterd Sep 9th, 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

Leave a Reply