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}”/>

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.


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.


10 Responses to Using the Repeater Component in Flex.

  1. abhishek says:

    can we give if conditions in repeater ,
    means if i want to check if data is empty then should not be shown it

  2. magi says:

    But, HOW? HOW we can use conditional operator in order to check if data is empty then should not be shown it?
    For ex, we have a data grid into REPEATER and we want to display or not DataGrid – depends of data…

  3. magi says:

    I have already a response: we need to manage the height of the component embedded into repeater, for ex., if we have a DataGrid embeded, then it’s height will be:

    height=”{rpt.currentItem.@numRow==0 ? 0 : 20*Number(rpt.currentItem.@numRow)+25}”


  4. Powers Smith says:

    I build a panel using a repeater and it all works fine. I also have some navigation buttons (first, last, previous, next) on the form outside of the panel. My repeater builds textareas. I am trying to get the y coordinate of the textarea created by the repeater. I have this in my code: ti = rp1.getRepeaterItem(rpItem) as TextArea; where ti is defined as a textarea above this statement (var ti:TextArea;) I have trace statements immediatly before and after the getRepeaterItem statement. The one above fires, the one below never fires. The getRepeaterItem is failing, but not returning any error code. Is there a way for getting the individual object in the repeater?

  5. If you ever want to read a reader’s feedback 🙂 , I rate this post for four from five. Decent info, but I have to go to that damn msn to find the missed parts. Thank you, anyway!

  6. kanti says:

    if i want to put condition on any item of repeater by calling a funtion on the same item?

    for example:

    where getText should return the text, based on this i will display the images on image control using the getText.

  7. sebastian says:

    is possible to assign differents id or name for the items that the repeater creates?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: