Viewstack Repeater Example
Line Break
Author: Roelof (11 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, travelling or just being lazy. 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:
- ViewStack, LinkBar and ButtonBar Example
- Flex Effects Example in a ViewStack
- 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?
(3 votes, average: 4.67 out of 5)
Loading ...Comments
One Response 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.