Flex 3 : Dynamic Layouts With Repeaters

When you have a static number of items to display, presentation is easy. But what if this amount is dynamic? This is when the use of a Repeater can help. A Repeater is a nonvisual component that iterates over a collection of information, creating components on the fly as it moves along. One of the most common uses for this type of functionality is dynamic forms, or catalog-like interfaces. In such scenarios, a database is queried to retrieve a list of context-relevant information, upon which a UI is generated.

dataProvider sneak peak

[img_assist|nid=5753|title=|desc=|link=url|url=http://www.manning.com/ahmed/|align=right|width=148|height=182]A dataProvider represents a source of data; it is a reference (similar to a pointer) to where a source of information may be found. We need to briefly introduce them here, as they are used to drive Repeaters, and therefore relevant to the examples that follow. The type of data a dataProvider represents is similar in nature to an array. Although Flex does have arrays, it utilizes what are known as collections for dataProviders. Put bluntly, a collection is an array on steroids, and a lot more built-in capabilities such as sorting and filtering.

TIP
For you ColdFusion folks, think of a collection as similar to an array of structures. Java folks might view it similar to an ArrayList of Hashmaps.

You can give a dataProvider a plain array and it will work fine, because Flex will wrap a collection around the array behind the scenes. Using the previous tile example, in listing 1 let’s make a collection out of our list of weather icons using a type of collection called an ArrayCollection.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var images:ArrayCollection = 
new ArrayCollection(
[
{source:"heavyrain.png"},
{source:"partlycloudy.png"},
{source:"sunny.png"},
{source:"thunder.png"},
{source:"cloudy.png"},
{source:"drizzle.png"},
{source:"snow.png"},
{source:"clearnight.png"}
]
);
]]>
</mx:Script>
</mx:Application>

The following is a description of the configurations in listing 1:

• The collection’s library is imported, enabling us to use it.
• An instance of an ArrayCollection (a type of collection) is created.
• The code, [Bindable], informs anyone binding to the variable when changes occur—when changes do occur, the variable prompts whoever is binding to it to respond appropriately, such as updating the display.
• An ArrayCollection was created using shorthand array notation.
• Square [ ] brackets are used to indicate an array.
• Braces { } are used to indicate an object.

Consequently, we’re passing an array of objects. In the real world, we might have queried a database to get this information, and the ArrayCollection would be the query result. Now that we’ve established where the data is coming from, the next step is to know what properties and events are available to connect us into the Repeater.

Properties and events of a Repeater

In order to make effective use of a Repeater we need to know what properties exist, and how they can be applied. Table 1 lists these properties, the most important of which is dataProvider, used to target a source from which to retrieve data.

Table 1 Properties of the Repeater

Table 2 lists a group of events we can use to execute code through the Repeater.

If you make use of events you would need to evaluate properties such as currentIndex and currentItem to learn the status of the properties.

Creating the Repeater

The next thing we need to do is create a Repeater using the <mx:Repeater> tag, and specify the dataProvider we want it to use. Listing 2 shows what this would look like.

<mx:Tile direction="horizontal" >
	<mx:Repeater id="myRepeater" dataProvider="{images}">
	</mx:Repeater>
</mx:Tile>

The Repeater is inside Tile because we want it to create child objects inside the Tile by looping over the ArrayCollection. Adding what you’ve learned about a Repeater’s properties, the last piece is to add the component that we want created with each iteration—for this example, an Image component. Using the currentItem property we can use the binding mechanism of Flex to get the current image at any point in time:

<mx:Image source="{myRepeater.currentItem.source}"/>

Let’s put this all together in listing 3 and see what the code looks like.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var images:ArrayCollection = 
new ArrayCollection([ 
{source:"heavyrain.png"},{source:"partlycloudy.png"},
{source:"sunny.png"},{source:"thunder.png"},
{source:"cloudy.png"},{source:"drizzle.png"},
{source:"snow.png"},{source:"clearnight.png"}]);
]]>
</mx:Script>
<mx:Tile direction="horizontal" >
<mx:Repeater id="myRepeater" dataProvider="{images}"> 
<mx:Image source="{myRepeater.currentItem.source}"/> 
</mx:Repeater>
</mx:Tile>
</mx:Application>

The result is shown in figure 1; you can add or remove items to the ArrayCollection, without needing to change the code that handles the output.

[img_assist|nid=5930|title=|desc=|link=none|align=none|width=269|height=273]

Think of a Repeater as a loop statement that iterates over an array. The item in the array to which the iteration is currently pointing is accessible via the Repeater’s currentItem and currentIndex properties.
Generating the display is the major goal of a Repeater, but with Flex there are always events available to react when certain triggers occur.

Working with Repeater events

You can easily tie into the events of a Repeater by specifying what ActionScript you want to execute. In the Repeater, we’re going to specify a couple of event handlers to invoke when these events occur:

<mx:Repeater id="myRepeater" dataProvider="{images}"
repeatStart="handleRepeatStart()"
repeat="handleRepeat()"
repeatEnd="handleRepeatEnd()">

The code for these event handlers looks along the lines of listing 4.

public function handleRepeatStart():void
{
mx.controls.Alert.show("Repeater starting!");
}
public function handleRepeat():void
{
trace("Currently on index:" + myRepeater.currentIndex);
trace("Image is:" + myRepeater.currentItem.source);
}
public function handleRepeatEnd():void
{
mx.controls.Alert.show("Repeater finished!");
}

If you were to run this script, you would see two pop-up alerts for the start and end events, and your output log (listing 5) would have a line item for each image.

Currently on index:0
Image is:heavyrain.png
Currently on index:1
Image is:partlycloudy.png
Currently on index:2
Image is:sunny.png
Currently on index:3
Image is:thunder.png
Currently on index:4
Image is:cloudy.png
Currently on index:5
Image is:drizzle.png
Currently on index:6
Image is:snow.png
Currently on index:7
Image is:clearnight.png

Repeaters are a handy way of generating components from a collection of variable data.

This article is taken from the forthcoming book Flex 3 in Action by Tariq Ahmed with Jon Hirschi, and Faisal Abid, (Manning, 2008). This 545-page easy-to-follow, hands-on tutorial goes beyond feature coverage and helps you put Flex 3 to work in real day-to-day tasks. This article introduces Repeaters: If you need to make components on the fly based on a set of data, you can use a Repeater to generate those for you. For the book's table of contents, the Author Forum, and other resources, go to http://www.manning.com/ahmed/.