Creating Flash Builder Project:

Select: File > New > Flex Project

in ‘New Flex Project’ wizard enter project name ‘Tut-CustomItemRenderer’ and press Finish button. A new project with specified name will open and default Main.mxml file will open in editor.

Adding a List Component:

Let us now add a new List Component into our Interface. Switch to Design view for Main.mxml and drag-drop a List Control from Components panel (Window > Components).

If you would now switch to Code view for Main.mxml, you’ll see a new list control <s:List> added in code as well:

Data Binding with List Component:

We have an empty list control on stage now, let’s provide it with some data using dataProvider. Data provider components require data for display or user interaction. To provide this data, you assign a collection, which is usually an ArrayCollection object or XMLListCollection object, to the list component's dataProvider property.

Collections are objects that provide a uniform way to access and represent the data contained in a data source object, such as an Array or an XMLList object. We will pass an array collection of objects to this data provider so that it can be filled with data on initialization.

Source code would look something like:

Notice the label property is set for each Object, label is the default field in data that List Control will look for displaying. If you would now switch to Design mode of Main.mxml, even without running the application you will see your list Control populated with these items and labels.

Default List Behavior:

Let’s now run our application to test default List Control behavior. Go to Run > Run Main (Ctrl + F11), that would launch application in default browser window.

List control by default has mouse over and pressed states configured. Rolling mouse over items will change their colors and selected item will remain highlighted.

This behavior and layout might be sufficient for few scenarios, however more advanced rich internet applications will require further customization of these flex list controls, so be it.

Creating a Custom Item Renderers:

We’ll now create a custom Item Renderer for our List Control, that would replace this simple label list with more appealing list of user images and their names.

Create a new MXML Item Renderer through, File > New > MXML Item Renderer. Enter in package name to be ‘renderers’ , and let’s call our custom renderer ‘MyCustomRenderer’. Leave the Template field as is.

Once finished, a new package holding our Custom Renderer is created, and it is opened in editor in Design view.

Customizing the Custom Item Renderer:

By default the new custom renderer created for us is too small, so let’s resize and organize it a little. Since images that we are going to use are 160 x 160, so let’s set the width and height of Item Renderer’s stage to be 170 x 200, leaving some borders on sides and some space for labels near the bottom.

Let’s drag an Image Control on our Custom Item Renderer and then adjust the x, y properties of both Image and already existing Label controls. Our MyCustomRenderer’s layout should look something like this.

And if you would switch to Source View, the source for this Item Renderer will look like:

Connecting Custom Item Renderer with List Control:

Letting our List Control to use this new Item Renderer is pretty straightforward. We only need to define itemRenderer property in <s:List>. So with itemRenderer being in renderers package, our s:List tag should look like:

<s:List x="42" y="48" width="167" height="428" itemRenderer="renderers.MyCustomRenderer">

you’ll also notice a <fx:Script> tag is automatically generated for you, having ActionScript code for importing our custom renderer, so we don’t have to worry about importing.

Adding Photos Data for Custom Renderer:

So far we only created an Image Control in our renderer, we never defined where those images will come. For linking images with our renderer’s Image Control, we need to do three things:

First, physically copying image files to our project. For this purpose let’s add some images into our project, I took the liberty to borrow some very nicely composed silhouettes from Adobe Flash Builder’s “Flex Test Drive” tutorial, so i claim no copyrights on these images, and you should not either. Create a new folder in your project named images and copy these images in this folder.

Secondly, we need to inform the List Control’s dataProvider, where to look for these images. Thus we’ll add another property named photo, for each Object in our ArrayCollection having relative path of images. The ArrayCollection should look something like this now:

Third and last step is to let the Custom Renderer know, from where to populate Image Control for each list item. So open MyCustomerRenderer in Source view and add source attribute to mx:Image tag.

Also we’ll update the text attribute of s:Label tag so that it will point to label of Objects in ArrayCollection of List.

Final Run:

Let’s Ctrl+F11 our application now, it would be worth the effort to see the nice looking results.

Exercises:

1. Can you center align the labels in MyCustomRenderer?
   
   
2. Move the label above image and see if items are rendered fine?
   
   
3. Try using two attributes in an object, First Name and Last Name instead of single label.