Viewstack Repeater Example
Line Break
Author: Roelof (13 Articles) - Author Website
Roelof is a SAP Consultant specialized in Front-End development. In his spare free time he is either developing on the web, playing basketball, watching soccer or traveling. He is also the co-owner of Flex-Blog.com.
The following example shows you how to use a repeater inside a viewstack. Our example about viewstack effects is very popular, and I recently found out how to use the repeater inside a viewstack, I decided to write an example about this subject.
We are using a Linkbar, Viewstack and Repeater component in this example. As dataprovider we will use an ArrayCollection.
The ArrayCollection will be the dataprovider for the Repeater. The Repeater will be the dataprovider for the Viewstack, and the Viewstack will be the dataprovider for the Linkbar. (ArrayCollection -> Repeater -> Viewstack -> Linkbar)
Here is the example: (Source can be viewed underneath the example or via Right Mouse Click -> View Source ).
The complete source code is right here:
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" initialize="init()" viewSourceURL="srcview/index.html"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> <mx:WipeLeft duration="500" id="wipeLeft"/> <mx:WipeRight duration="500" id="wipeRight"/> </fx:Declarations> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var myDataProvider:ArrayCollection; private function init():void { myDataProvider = new ArrayCollection; var obj:Object = new Object; obj.title = "Screen 1"; obj.color = 0x00FFCC; myDataProvider.addItem(obj); obj = new Object; obj.title = "Screen 2"; obj.color = 0x00FF00; myDataProvider.addItem(obj); obj = new Object; obj.title = "Screen 3"; obj.color = 0xFFCCCC; myDataProvider.addItem(obj); } ]]> </fx:Script> <mx:VBox> <mx:LinkBar dataProvider="{myViewstack}"/> <mx:ViewStack id="myViewstack" width="500" height="300"> <mx:Repeater id="myRepeater" dataProvider="{myDataProvider}" > <mx:VBox backgroundAlpha="1" backgroundColor="{myRepeater.currentItem.color}" label="{myRepeater.currentItem.title}" showEffect="{wipeRight}" hideEffect="{wipeLeft}"/> </mx:Repeater> </mx:ViewStack> </mx:VBox> </s:Application> |
Related posts:
- Flex Effects Example in a ViewStack
- ViewStack, LinkBar and ButtonBar Example
- Using the Repeater in Flex
- Flex 4 / Flash Builder 4: Repeater changed to DataGroup
- Style AdvancedDataGrid depending on data example
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(3 votes, average: 4.67 out of 5)
Loading ...Comments
2 Responses to “Viewstack Repeater Example”
Dude the code is working just fine. But can you kindly use comments for describing the code. Thank you I am just a beginner in Flex.
Nice post!
I have a problem that I was hoping maybe you could help with. What if I want to add other components, in addition to the repeater?
I have a problem where the repeater is always created last. For example, after your repeater declaration, if I add a vBox with some text, or a custom component, the repeater is always created as the last tabs. How can I get around this? I am creating custom components, and also need to use the repeater. I need the tabs created in the order I want them to be created in, but the repeater always is listed last.
Any idea what I can do to get around this, or possibly something else I could use instead of a repeater?
Thanks