Flex 4 / Flash Builder 4: Repeater changed to DataGroup
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.
I guess it is well known information already, but since I’ve been only playing around with the new Flash Builder 4 environment for a while I still wanted to post something about the this subject. The Repeater, not just a regular pain in the ass. Flex 4 brings us the DataGroup.
Because everybody knows how the Repeater works (if not, search for Repeater of check this page). I will give you a small example of a DataGroup. And ofcourse, view source is enabled.
And if you just want to see source, here it is:
DataGroupExample.mxml
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 | <?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/mx" width="500" height="200" initialize="init()" viewSourceURL="srcview/index.html"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var productData:ArrayCollection; private function init():void { productData = new ArrayCollection(); productData.addItem({"name":"Chocolate","price":"3"}); productData.addItem({"name":"Beer","price":"5"}); productData.addItem({"name":"Candy","price":"2"}); } ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:DataGroup itemRenderer="ProductsRenderer" dataProvider="{productData}" rollOverColor="0xFFCC00"> <s:layout> <s:VerticalLayout horizontalAlign="center"/> </s:layout> </s:DataGroup> </s:Application> |
ProductsRenderer.mxml
1 2 3 4 5 6 7 8 9 10 11 12 | <?xml version="1.0" encoding="utf-8"?> <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" autoDrawBackground="true"> <s:layout> <s:HorizontalLayout verticalAlign="middle" /> </s:layout> <s:Label text="{data.name}:" width="100" fontWeight="bold" /> <s:TextInput text="${data.price}" width="50" /> </s:ItemRenderer> |
Related posts:
- Flex 4 / Flash Builder 4: baseColor changed to chromeColor
- Viewstack Repeater Example
- Using the Repeater in Flex
- Using States in Flash Builder
- Using ASDoc as an External Tool in Flash Builder 4
Written by · Filed Under Examples
Was this post useful to you?
(3 votes, average: 4.67 out of 5)
Loading ...Comments
One Response to “Flex 4 / Flash Builder 4: Repeater changed to DataGroup”
thanx bro