This blog must help u to use MX:repeater component in ur flex apps quite omfortably. At the first meet, the usage of this component feels bitter, but on some careful understanding and bit of practice, u’ll fall in love with this wonderful component, just as me.
The repeater in flex behaves just like a loop in programming languages, except the fact that this repeater adds GUI components. It cannot do other logical operations and stuff.
Supposing i have an ArrayCollection instance(object) that holds links to 50 images that i’ve to put in an mx:TileList. Now, without repeater component , what we usually do is, write the <MX:IMAGE> tag 25 times inside the mxLTileList. This is OK for someone who doesnot prefer to dig deep. But not certainly us.
What if there are some elements that would be added/deleted/modified to the arrayCollection dynamically. Hey, those who dont dig always will find a work around. The work around is simple though…Find the item in the arrayCollection which is modified, say “i”, then change the source of the i’th image in the TileList. The i’th child of the TileList can be obtained by tile.getChildAt(i);, where tile is the “id” of the TileList.
Aaaah, this requires a bit of Actionscript and certainly a lot of Sweat. Why toil, when someone’s dying to help u. Its none other than mx:Repeater.
Repeater does all the job mentioned above:
1) Initially add all the images whose sources are there in arrayCollection to the TileList.
2) Change the images in TileList whenever the arrayCollection changes.
Hola, everythigs done. U must be loving repeater now.
Now lets dig deep into repeater component:
The following are the important attributes of MX:Repeater.
1) id — unique identifier:
2) dataprovider — dataobject.
eg: <mx:Repeater id=”imagerepeater” dataProvider=”{images}” >
<mx:Image source=”{imageRepeater.currentItem.img}”/>
<.mx:Repeater>
Thats it job done…
The mandatory things are:
1) The dataprovider should be [BINDABLE], so that any change to the arrayCollection will be caught by the Repeater and reflect it.
If u remember, at the begining of the document i spoke abt “Repeater loops …”. Now thw question is on which is it going to loop. The usual loops that we write, we ask it to loop on an array (foreach in PHP) or from i=1…10(Normal FOR loop). The dataProvider is an object on which the the Repeater loops.
Supposing here, we assigned the images arrayCollection as the object to be repeated on. Now, the repeater loops on the arrayCollection (images), and for every pass, it outputs the component specified inside the REPEATER once. So, The number of components outputted by the Repeater will be equal to the number of elements in the dataprovider object(here, it is the images ArrayCollection).
Just like, the forloop if looped from i=0…10, executes the loop body 10 times, the same way, the repeater outputs the component specified inside the repeater, as many times as the number of elements inside the object on which it is looping, DATAPROVIDER.
Now, For each image inside the Repeater, we’ve to specify its SOURCE attribute. For image 0, the source is in images[0], image 1, the source is in images[01]…and so on.
We have two attributes called CURRENT INDEX and CURRENT ITEM for the repeaterobject.
If we say, imageRepeater.currentIndex, it will return the number of times the (loop body) repeater body is executed. It is just like , if we have for(i=0;i<10;i++) , inside the LOOPBODY, i indicates the PASS NUMBER.
