Learning Flex – Lesson 8, part II

Item Renderers

There are several ways to define item renderers, the simplest is to use a ‘drop in’ item renderer. Classes that implement the IDropInListItemRenderer can be specified for the itemRenderer property of a list. Button, CheckBox, DateField, Image, Label, NumericStopper, Text, TextArea and TextInput all can be used in this way (just specify the class name for the item renderer property – eg mx.controls.Image). The disadvantage to this method is that drop in renderers cannot pre-process the data they use. If your data contained image filenames but not their common path, you couldn’t use a straight Image drop in renderer as it wouldn’t know about the path to the image.

You can define a renderer inline to your component using the mx:ItemRenderer tag but you can’t really re-use that code. By defining your renderer within an mx:Component tag and supplying the id of this as your renderer you gain some re-use but the most flexible way is to define a separate renderer class in a different file and provide this class name to the list’s itemRenderer property.

The itemRenderer will be called for each of the items in the dataProvider and within the renderer, the individual item being rendered is available through a variable called data.

Using Repeaters

The mx:Repeater tag allows you to iterate through a dataset and define components using it’s items. This will create one component for each item in the dataset.

A repeater has two properties particularly useful when constructing components, currentItem which provides access to the the item the repeater is currently positioned at and itemIndex which is a zero based indicator of that position. An example repeater would be:

<mx:Repeater id="myRepeater" dataProvider="{myDataset}">
<mx:Button label="{myRepeater.currentItem.title}" id="repButton"/>
</mx:Repeater>

If myDataset contained items with titles “The Beginning”, “The Middle”, “The End” I’d now have created 3 buttons with these labels.

Components created with a repeater have a getRepeaterItem() method to allow you to determine which of them is being used. You can refer to event.target.getRepeaterItem() to access the properties of the component that fired the event.

To address a specific instance of a repeated component, you use array syntax with the id specified in the repeated component so if I wanted to access my “The Beginning” button, I would use repButton[0].