« iPhone Flash: What did @kevinlynch just say? | Main | How is the 360|Flex conference going? »
F3 v. F4: Using ViewStack, TabNavigator and Accordion
| By Rich Tretola | March 9, 2010 | |
| 5,283 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
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:
Topics: Flex 3 (Moxie), Flex 4 | 12 Comments »
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
March 10th, 2010 at 6:03 am
Nice info.
Will it be possible to add / inside ??
Reply to this comment
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
March 10th, 2010 at 7:51 pm
[...] F3 v. F4: Using ViewStack, TabNavigator and Accordion | EverythingFlex: Flex & AIR [...]
March 22nd, 2010 at 4:41 am
[...] F3 v. F4: Using ViewStack, TabNavigator and Accordion [...]
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…
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
May 13th, 2010 at 5:51 am
it is usefull for me . thank you for sharing !
Reply to this comment
July 2nd, 2010 at 4:05 am
. thank you for sharing !
Reply to this comment
July 2nd, 2010 at 4:06 am
Good for it lv bags
Reply to this comment
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
July 8th, 2010 at 9:56 pm
hi guys, try some wonderful medium? Yes! high quality life needs it,i am a new comer here, you may be a crazy movie lover like me,there are some hot DVD movies i really like and want to share to youQueer As Folk DVD, i believe you will love them! it really has amazing plot , wonderful screen, and also nice musics. Don’t miss it!!!
___________
i am sure you will also be intrested in links as follows.
Queer As Folk DVD set
Queer As Folk DVD boxset
Queer As Folk DVD Seasons 1-5 DVD
Reply to this comment