Over a million developers have joined DZone.

Flex 3 : Dynamic Layouts With Repeaters

DZone 's Guide to

Flex 3 : Dynamic Layouts With Repeaters

· Web Dev Zone ·
Free Resource

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.

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="*">
import mx.collections.ArrayCollection;
public var images:ArrayCollection =
new ArrayCollection(

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

 Property Type
 id  String  The identifier of the Repeater
 dataProvider  Object  A reference to the data to iterate.
 startingIndex  Number  The index at which to start the loop. Defaults to 0.
 count  Number  Sets the number of loops to conduct. Defaults to the size of the dataProvider.
 currentIndex  Number  Stores the current position in the loop (starting at 0) you can use
to check where in the loop you currently are. This is a read-only property.
 currentItem  Object  A reference to the object to which currentIndex is pointing.
 recycleChildren  Boolean  A performance setting that allows Flex to reuse Child components if possible. Allowed values are true (default) or false.

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

 repeat  Occurs after each iteration of a loop
 repeatStart  Occurs as the Repeater is about to begin looping
 repeatEnd  Occurs after the last iteration is complete

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}">

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="*">
import mx.collections.ArrayCollection;
public var images:ArrayCollection =
new ArrayCollection([
<mx:Tile direction="horizontal" >
<mx:Repeater id="myRepeater" dataProvider="{images}">
<mx:Image source="{myRepeater.currentItem.source}"/>

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.


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}"

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/.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}