With just about every SDK in a programming language there are some components while useful just get lost and squirreled away and never really get the glorified attention it deserves. The Repeater element is one of those in the Flex language, where of all the examples I see from other bloggers and the Flex community at large it just never shows up. This is an attempt to bring this little cockroach into the light to show off its skills and why it’s survived all this time.

What is It:
Boiled down: A very glorified for-loop. It allows you to build any document-based component control and have it repeated n-number of times to a given hosting parent based upon a dataProvider collection. Note this is different from a single layer design which is what the States model uses. Since the setup to Repeaters is specified in the UIComponent class, every object can take advantage of this -even recursively, and that right there is powerful since it can be written in both mxml and ActionScript and to any complexity of a repeated element. UIComponent gives the following property access:

repeater : IRepeater
repeaterIndex : int
repeaterIndices : Array
repeaters : Array

These are useful for when writing an entire class-based component to be declared as an element of a repeater as this gives you access to information about the repeated element and it’s component host without having to strictly declare a type of parent or owner. I find in my own code that I don’t really use these when writing repeaters in mxml since I typically use the id of the parenting tag to gain information for the repeated element.

An Example:
Building a bread-crumb trail to give users a “you are here” sign. Note, here I don’t provide an example of the dataProvider to the repeater, but in this case I have a managed complex XML element (a dataprovider to a menu) and I use identifier attribute tags to flatten the selected xml nodes to an array of strings.
Also, there are two different ways to build a slightly better looking UI for the first image element that shouldn’t show up. One is to assign a RepeatStart listener to the Repeater element and add the elements there after the currentIndex >1, or you can take the simple approach as provided, to simply turn the visibility property off for the Repeater parent index.

The image source is a pointer to a class [Embed()] macro.

<mx:Script>
[Bindable]
private var crumbTrail:Array;
</mx:Script>

<mx:HBox id=“crumbWrapper” width=“100%” horizontalGap=“2″ >
        <mx:Label id=“crumbHeader” text=“Current Selection:” fontWeight=“bold” />
        <mx:Repeater id=“labelFactory” dataProvider=“{crumbTrail}” >
                <mx:Image scaleContent=“false” height=“{crumbHeader.height}” visible=“{labelFactory.currentIndex !=0}” verticalAlign=“middle” source=“{AssetFactory.CRUMB_SEPERATOR}” />
                <mx:Label text=“{labelFactory.currentItem}” truncateToFit=“true” paddingLeft=“1″ paddingRight=“1″/>
        </mx:Repeater>
</mx:HBox>