Search

 

March 2010
S M T W T F S
« Feb   Apr »
 123456
78910111213
14151617181920
21222324252627
28293031  

Tags

360Flex actionscript adobe adobe air air air 2 aironandroid android apple as3 blackberry books conference contest cookbook F3 v. F4 FileReference flash flash builder flash catalyst Flash Player flashplayer flashplayer10 flash player 10.1 Flex flex3 flex4 Flex 4.5 flexbuilder fotobooth google gumbo ios ipad iphone java load() max max 2009 merapi microsoft mobile pixel bender playbook save()

Archives


« | Main | »

F3 v. F4: Using ViewStack, TabNavigator and Accordion

By Rich Tretola | March 9, 2010
19,654 views

You have probably used mx:ViewStack, mx:TabNavigator and mx:Accordion somewhere in your Flex development efforts over the last 5+ years and had code that looks like this:

Fle 3 TabNavigaror and Accordion

Fle 3 TabNavigaror and Accordion

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<mx:TabNavigator width="400" height="200" horizontalCenter="0" y="15">
    <mx:VBox label="Tab 1">
        <mx:Label text="This is tab 1"/>
    </mx:VBox>
    <mx:VBox label="Tab 2">
        <mx:Label text="This is tab 2"/>
    </mx:VBox>
    <mx:VBox label="Tab 3">
        <mx:Label text="This is tab 3"/>
    </mx:VBox>
</mx:TabNavigator>
   
<mx:Accordion width="400" height="200" horizontalCenter="0" y="225">
    <mx:VBox label="Accordion 1">
        <mx:Label text="This is Accordion 1"/>
    </mx:VBox>
    <mx:VBox label="Accordion 2">
        <mx:Label text="This is Accordion 2"/>
    </mx:VBox>
    <mx:VBox label="Accordion 3">
        <mx:Label text="This is Accordion 3"/>
    </mx:VBox>
</mx:Accordion>

Perhaps you would like to continue to use TabNavigator and Accordion within your Flex 4 efforts but you would like the children to be Spark components. Since there is no equivalent to these components yet within Spark, you will need still need to use the mx namespace within your Flex 4 application. If you have tried something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<mx:TabNavigator width="400" height="200" horizontalCenter="0" y="15">
    <s:VGroup>
        <s:Label text="This is tab 1"/>
    </s:VGroup>
    <s:VGroup>
        <s:Label text="This is tab 2"/>
    </s:VGroup>
    <s:VGroup>
        <s:Label text="This is tab 3"/>
    </s:VGroup>
</mx:TabNavigator>
   
<mx:Accordion width="400" height="200" horizontalCenter="0" y="225">
    <s:VGroup>
        <s:Label text="This is Accordion 1"/>
    </s:VGroup>
    <s:VGroup>
        <s:Label text="This is Accordion 2"/>
    </s:VGroup>
    <s:VGroup>
        <s:Label text="This is Accordion 3"/>
    </s:VGroup>
</mx:Accordion>

You will have received an error that said “The children of Halo navigators must implement INavigatorContent.“. So, what does this mean? Are you screwed and forced to start over and redesign your UI? No, the fix is easy, just wrap your Spark components in a Spark NavigatorContent component.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<mx:TabNavigator width="400" height="200" horizontalCenter="0" y="15">
    <s:NavigatorContent label="Tab 1">
        <s:VGroup>
            <s:Label text="This is tab 1"/>
        </s:VGroup>
    </s:NavigatorContent>
    <s:NavigatorContent label="Tab 2">
        <s:VGroup>
            <s:Label text="This is tab 2"/>
        </s:VGroup>
    </s:NavigatorContent>
    <s:NavigatorContent label="Tab 3">
        <s:VGroup>
            <s:Label text="This is tab 3"/>
        </s:VGroup>
    </s:NavigatorContent>
</mx:TabNavigator>
   
<mx:Accordion width="400" height="200" horizontalCenter="0" y="225">
    <s:NavigatorContent label="Accordion 1">
        <s:VGroup>
            <s:Label text="This is Accordion 1"/>
        </s:VGroup>
    </s:NavigatorContent>
    <s:NavigatorContent label="Accordion 2">
        <s:VGroup>
            <s:Label text="This is Accordion 2"/>
        </s:VGroup>
    </s:NavigatorContent>
    <s:NavigatorContent label="Accordion 3">
        <s:VGroup>
            <s:Label text="This is Accordion 3"/>
        </s:VGroup>
    </s:NavigatorContent>
</mx:Accordion>

Here is the result:

Flex 4 components within Flex 3 (Halo) Navigators

Email

Topics: Flex 3 (Moxie), Flex 4 | 18 Comments »

18 Responses to “F3 v. F4: Using ViewStack, TabNavigator and Accordion”

  1. Tink Says:
    March 10th, 2010 at 5:20 am

    This is sue to the spark components not support deferred instantiation.

    http://www.tink.ws/blog/spark-datanavigators/

    Might be of interest. More to come.

    Reply to this comment

  2. Nathan Says:
    March 10th, 2010 at 6:03 am

    Nice info.

    Will it be possible to add / inside ??

    Reply to this comment

  3. John Says:
    March 10th, 2010 at 9:54 am

    Hi…

    I am really new to Flex, I mean I am just 2 weeks doing Flex. I had encountered some difficulties…

    I had a button and the click event will call a function that returns a value of type string.

    Below is the code;
    click=”editState()”

    This event cannot be raised as this function requires a string value to pass and executes the function.

    Below is the function code;
    private function editState(passedValue:String):void {
    //code goes here
    }

    Now, what I want to do is to capture a label.text value and put it in the call function under click event but how am I supposed to do that? I tried putting like editState(’label.text’). Sorry, I am very new… Please advice

    –John–

    Reply to this comment

  4. Jordin Sparks Battlefield karaoke and download link | DOWNLOAD KARAOKE MUSIC Says:
    March 10th, 2010 at 7:51 pm

    [...] F3 v. F4: Using ViewStack, TabNavigator and Accordion | EverythingFlex: Flex & AIR [...]

  5. Flex 4 & Flash Builder 4 are Here! | EverythingFlex: Flex & AIR Says:
    March 22nd, 2010 at 4:41 am

    [...] F3 v. F4: Using ViewStack, TabNavigator and Accordion [...]

  6. uberVU - social comments Says:
    March 25th, 2010 at 12:24 am

    Social comments and analytics for this post…

    This post was mentioned on Twitter by richtretola: Blogged: F3 v. F4: Using ViewStack, TabNavigator and Accordion http://bit.ly/cZGByG...

  7. mbt shoes Says:
    March 27th, 2010 at 5:05 am

    welcome to our wesite !we are supply all kinds of mbt shoes ,such as cheap MBT Lami、 discount MBT M.Walk、MBT Chapa on sale .
    our websit:www.sell-mbt.com

    Reply to this comment

  8. best registry cleaner Says:
    July 3rd, 2010 at 12:44 am

    This post was mentioned on Twitter by richtretola: Blogged: F3 v. F4: Using ViewStack

    Reply to this comment

  9. Schedule Says:
    October 29th, 2010 at 6:20 pm

    You you could make changes to the post title F3 v. F4: Using ViewStack, TabNavigator and Accordion | EverythingFlex: Flex & AIR to more specific for your webpage you write. I loved the blog post withal.

    Reply to this comment

  10. Ansury Says:
    December 8th, 2010 at 12:31 am

    I’m not sure I’d call that “easy to fix”–it’s not so trivial if you’re upgrading a large fx3 app to fx4. And for a new application, it’s just pointless overhead bloating your code and wasting time with no value added. Why did Adobe release Spark and deprecate so many perfectly working Halo components (like VBox/HBox) when Spark’s implementation is only half complete? Disappointing!

    Reply to this comment

  11. Have you updated any Flex 2/3 applications to Flex 4+? | EverythingFlex: Flex & AIR Says:
    December 15th, 2010 at 9:21 am

    [...] F3 v. F4: Using ViewStack, TabNavigator and Accordion F3 v. F4 Tile v TileGroup F3 v. F4: Repeater v DataGroup F3 v. F4: Boxes v Groups [...]

  12. sainath Says:
    January 3rd, 2011 at 3:57 pm

    Thnks a lot :)

    Reply to this comment

  13. JayC Says:
    January 17th, 2011 at 11:42 am

    Thank you! for the tutorial, how can you replace tabs with images?

    JayC

    Reply to this comment

  14. rakri Says:
    May 4th, 2011 at 4:15 pm

    Hello,
    I have a viewstack that contains many modules.
    Please , how to call one another module from a module ? Both are in the same viewstack .
    Thank’s for help.
    rakri

    Reply to this comment

  15. Brij kishor Says:
    July 11th, 2011 at 8:55 am

    Hi Rich,

    Very nice sample code but this sample code is not working for flex mobile project. can you update it for flex mobile project.

    Thanks
    Brij Kishor

    Reply to this comment

    Rich Tretola Reply:
    July 12th, 2011 at 4:46 am

    This was not a mobile tutorial.

    Reply to this comment

    Brij kishor Reply:
    July 12th, 2011 at 4:48 am

    can you write this type of functionality for flex mobile project.

    Reply to this comment

    Rich Tretola Reply:
    July 12th, 2011 at 9:42 am

    Flex 4.5 for mobile has a Tabbed Application type for this. I cover this in my book.

    Developing Android Applications with Flex 4.5 by Rich Tretola (paperback)

    Developing Android Applications with Flex 4.5 by Rich Tretola (kindle)

Comments