A–C
D–H
I–Z
Developer services
Project centers
Community resources
- Flex cookbook (share code)
- Adobe AIR cookbook (share code)
- CSS Advisor (browser bug fixes)
- Exchanges (share components)
- Adobe Labs
- Adobe Open Source
- Forums
- RSS feeds
- Bug base
- User groups
- Adobe Community Experts (ACE)
- Developer events
Integration
Product documentation
Downloads
Samples
Training and books
- Online training
- Classroom training
- Certification
- Adobe Developer Library
- Adobe Press
- Safari Books Online
Newsletters
Blogs
Archives
ADC program
Additional resources
Flex Quick Start: Building an advanced user interface
Table of contents
- Using the Repeater component
- Skinning your components
- Using item renderers
- Creating item editors
- Using data providers
- Adding drag-and-drop support
- Working with Tree controls
Using the Repeater component
Repeater components are useful for repeating a small set of simple user interface components, such as RadioButton controls and other controls typically used in Form containers. You generally control repetition by using an array of dynamic data, such as an Array object returned from a web service, but you can use static arrays to emulate simple for loops.
You use the <mx:Repeater> tag to declare a Repeater component that handles repetition of one or more user interface components based on dynamic or static data arrays at run time. The repeated components can be controls or containers. Using a Repeater component requires data binding to allow for run-time-specific values.
You can use the <mx:Repeater> tag anywhere that you can use a control or container tag. To repeat user interface components, you place their tags within the <mx:Repeater> tag. All components derived from the UIComponent class can be repeated with the exception of the <mx:Application> container tag. You can also use more than one <mx:Repeater> tag in an MXML document, and you can nest <mx:Repeater> tags.
Although Repeater components look like containers in your code, they are not containers and have none of the automatic layout functionality of containers. Their sole purpose is to specify a series of subcomponents to include in your application one or more times based on the contents of a specified data provider. To align items that a repeater generates or perform any other layout task, place the Repeater component and its contents inside a container and apply the layout to that container.
For example, the following snippet creates a number of RadioButton controls based on an ArrayCollection of products, each of which contains a name property. Setting the layout property of the Panel container to "horizontal" makes the RadioButton controls appear side-by-side in a row.
<mx:Panel layout="horizontal"> <mx:Repeater id="productsRepeater" dataProvider="{productsAC}"> <mx:RadioButton id="buttonsArray" label="{productsRepeater.currentItem.name}" data="{productsRepeater.currentItem}" /> </mx:Repeater> </mx:Panel>
Tip: Flex also supports HorizontalList, TileList, and List controls that provide better performance when you are displaying large amounts of data. Unlike the Repeater component, which instantiates all objects that are repeated, the HorizontalList, TileList, and List controls instantiate only objects visible in the list. If your data extends past a single screen or the visible space within any of its containers, you should use one of the list controls.
Emulating for loops
The simplest repeating structures that you can create with a Repeater component are static loops that execute a set number of times.
The Repeater component in the following example emulates a simple for loop that executes four times, prints a simple line of text and increments the counter by one each time.
Example
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/RepeaterStatic/index.html" width="275" height="200" > <mx:Script> <![CDATA[ [Bindable] public var myArray:Array=[1,2,3,4]; ]]> </mx:Script> <mx:Panel title="Repeater: emulating a for loop" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" > <mx:Repeater id="myRep" dataProvider="{myArray}"> <mx:Label id="myLabel" text="This is loop #{myRep.currentIndex}" /> </mx:Repeater> </mx:Panel> </mx:Application>
Tip: The counter is not the data within the array, but the position within the array. As long as the array contains four elements, you can provide any data within the array itself, and the Repeater component still executes four times. You can refactor the declaration of the array in the previous example as shown here:
public var myArray:Array=[,,,,]; // The actual values do not matter in this use-case
Result
This content requires Flash
To view the full source, right-click the Flex application and select View Source from the context menu.
Emulating for..in loops
You can use a Repeater component to create child components by iterating over the items in a data collection.
In the following example, you bind the dataProvider property of the <mx:Repeater> tag to an ArrayCollection of product objects. Each product object has name, price, and freeship properties. The Repeater component creates a RadioButton instance for each item in the collection and sets the label property of the RadioButton to the name property of the current item in the collection.
Example
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/RepeaterStatic2/index.html" width="285" height="185" > <!-- This is a static data model but you could just as easily bind to dynamically loaded data. --> <mx:ArrayCollection id="productsAC"> <mx:Object name="Whirlygig" price="5" freeship="false"/> <mx:Object name="Tilty Thingy" price="15" freeship="true"/> <mx:Object name="Really Big Blocks" price="25" freeship="true"/> </mx:ArrayCollection> <mx:Panel title="Repeater: emulating a for..in loop" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" > <mx:Repeater id="productsRepeater" dataProvider="{productsAC}"> <mx:RadioButton id="buttonsArray" label="{productsRepeater.currentItem.name}" /> </mx:Repeater> </mx:Panel> </mx:Application>
Result
To view the full source, right-click the Flex application and select View Source from the context menu.
Referencing repeated components
The Repeater component places references to individual instances of a repeated component in an array. You define the name of the array by setting the id attribute of the component that you place in the Repeater.
In the following example, the RadioButton control in the <mx:Repeater> tag has its id property set to buttonsArray. The Repeater component adds into this array a reference to each child RadioButton that it creates. You can refer to these individual children by using an index-based look-up on the array. For example, buttonsArray[0] returns a reference to the first RadioButton in the Repeater.
Example
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/RepeaterStatic2/index.html" width="375" height="275" > <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.controls.RadioButton; private function traceHandler (event:MouseEvent):void { var numButtons:uint = buttonsArray.length; var message:String = "The Repeater has " + numButtons; message += " dynamically created children: \r\r"; // Loop through all the Radio buttons that are // generated by the Repeater component. for (var i:uint = 0; i < numButtons; i++) { // Reference the current RadioButton instance var currentItem:RadioButton = buttonsArray[i]; // Reference the data property of the current RadioButton instance var currentItemData:Object = currentItem.data; // Update the message with the data properties of the // current RadioButton. message += currentItem.data.name + ": $" + currentItem.data.price; if (currentItem.data.freeship) message += " (free shipping!)"; // Add a line break to the message message += "\r"; } // Show the message in an Alert control Alert.show(message); } ]]> </mx:Script> <mx:ArrayCollection id="productsAC"> <mx:Object name="Whirlygig" price="5" freeship="false"/> <mx:Object name="Tilty Thingy" price="15" freeship="true"/> <mx:Object name="Really Big Blocks" price="25" freeship="true"/> </mx:ArrayCollection> <mx:Panel title="Repeater: emulating a for..in loop" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" > <mx:Repeater id="productsRepeater" dataProvider="{productsAC}"> <mx:RadioButton id="buttonsArray" label="{productsRepeater.currentItem.name}" data="{productsRepeater.currentItem}" /> </mx:Repeater> <mx:ControlBar horizontalAlign="right"> <mx:Button label="Trace Repeater's children" click="traceHandler(event);" /> </mx:ControlBar> </mx:Panel> </mx:Application>
To view the full source, right-click the Flex application and select View Source from the context menu.
For more information
- Dynamically Repeating Controls and Containers in the Adobe Flex 3 Help
About the author
Aral Balkan acts and sings, leads development teams, designs user experiences, architects rich Internet applications, and runs OSFlash.org, the London Macromedia User Group, and his company, Ariaware. He loves talking design patterns and writing for books and magazines. He also authored Arp, the open-source RIA framework for the Flash platform. Aral is generally quite opinionated, animated, and passionate. He loves to smile, and can even chew gum and walk at the same time.
