Using the Repeater Component in Flex.

Before going through explore the basic concepts about them.,few lines from the  Flex Builder help are below.

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. Repetition is generally controlled by 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.

Ok now you got a little info about them I will show you one example and let’s work with them.

Here I am using a TextArea component in the Repeater and reading the dataProvider for the Repeater from the HttpService. To manipulate the Repeater and its components it’s better to provide an ArrayCollection to the Repeater as dataProvider and its bindable will reflect the changes made.

Hence I will use an HttpService to read the data in to the ArrayCollection from an XML file and provide this to the Repeater Component as the dataProvider. As the below lines shows us.

<mx:HTTPService id=”srvMain” url=”data.xml” useProxy=”false” result=”readRes(event)”
showBusyCursor=”true” />

<mx:VBox verticalAlign=”middle” horizontalAlign=”center”>
<mx:Repeater id=”rpt” dataProvider=”{arrCll}”>
<mx:TextArea id=”txta” text=”{rpt.currentItem.NAME}”/>
</mx:Repeater>
</mx:VBox>

And my script block contains the code to read my dataProvider in to an ArrayCollection and this goes in to the result of the HttpService.

This will repeat the TextArea components based on the dataProvider to the Repeater.

And observe the line I am using for assigning the text to the TextArea component from the dataProvider.

text=”{rpt.currentItem.NAME}”

Similarly we can use any component in the Repeater component. And they are very use full in large Applications where in you want many similar components in series, for example in a Login/signup form I may need the user to fill in multiple TextInput’s, a few of them is ok just use the individual components ,but what if there are many TextInputs the user needs to fill in and this screen/view is created at runtime which in turn reduces the Application size , because the components are not created at compile time they are laid out at runtime [That is it's just a separate view and loaded when necessary].

Now let’s just stay back and enjoy this Example.

Run the Demo.

Download the source Code.

As you can see the components are created at Runtime using the Repeater component.This is the charm of the Repeater Component,Enjoy the post.