In this exercise, you will create an item renderer component and use it to render the employee data (see Figure 1).

Figure 1. Review your task for this exercise.

In this exercise, you will learn how to:

• Create an inline item renderer component
• Create an item renderer component

Requirements

In order to complete this tutorial, you need the following software and files:

Flash Builder 4

• Download
• Learn more

Exercise files:

• ex5_02_starter.zip (ZIP, 54 KB)
• ex5_02_solution.zip (ZIP, 55 KB)

Prerequisite knowledge:

• Exercise 1.1: Creating and skinning an application
• Exercise 5.1: Passing data to item renderers for display

Creating an inline item renderer component

In this section, you will use MXML to create a custom item renderer for a DataGroup container.

1. Download the ex5_02_starter.zip file if you haven't done so already and extract the file ex5_02_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex5_02_starter.fxp file.
4. Open EmployeeDirectory.mxml.
5. Below the Declarations comment, locate the Declarations block.

6. Within the Declarations block, notice the ArrayList tags and nested Object tags. This represents the data that is being used as the data provider.

   <s:ArrayList id="employees">
       <fx:Object firstName="Andrew" 
           lastName="Brilliam" 
           imageFile="images/abrilliam.jpg"/>
       <fx:Object firstName="Ben" 
           lastName="Crater" 
           imageFile="images/bcrater.jpg"/>
       <fx:Object firstName="David" 
           lastName="Avenon" 
           imageFile="images/davenon.jpg"/>
       <fx:Object firstName="Annette" 
           lastName="Kotter" 
           imageFile="images/akotter.jpg"/>
       <fx:Object firstName="Brian" 
           lastName="Minnows" 
           imageFile="images/bminnows.jpg"/>
       <fx:Object firstName="Barry" 
           lastName="Kramson" 
           imageFile="images/bkramson.jpg"/>
   </s:ArrayList>

7. Locate the DataGroup component.

8. Within the DataGroup component tags, below the layout property tags, create an itemRenderer property tag set:

   <s:DataGroup dataProvider="{employees}">
       <s:layout>
           <s:VerticalLayout/>
       </s:layout>
       <s:itemRenderer>
               
       </s:itemRenderer>
   </s:DataGroup>

9. Between the itemRenderer property tags, create a set of Component tags:

   <s:itemRenderer>
       <fx:Component>
                   
       </fx:Component>
   </s:itemRenderer>

10. Between the Component tag set, create an ItemRenderer class tag set:

    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer>
                        
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>

    Remember that itemRenderer (lowercase i) is a property of the DataGroup class while ItemRenderer (capital I) is a class that you are instantiating.

11. Between the ItemRenderer tags, create a states tag block:

    <fx:Component>
        <s:ItemRenderer>
            <s:states>
            
            </s:states>
        </s:ItemRenderer>
    </fx:Component>

12. Between the states tag block, create a State instance and assign normal as the name:

    <s:states>
        <s:State name="normal"/>
    </s:states>

13. Between the ItemRenderer tags, below the states tag block, create an HGroup container tag block:

    <s:ItemRenderer>
        <s:states>
            <s:State name="normal"/>
        </s:states>
                        
        <s:HGroup>
                            
        </s:HGroup>
    </s:ItemRenderer>

14. Between the ,HGroup tags, create an Image control:

    <s:HGroup>
                
        <mx:Image/>
                            
    </s:HGroup>

15. To the Image control, bind data.imageFile as the source:

    <s:HGroup>
                
        <mx:Image source="{data.imageFile}"/>
                            
    </s:HGroup>

    Data for the current object that is being evaluated is referenced in the data property of the item renderer.

16. Within the HGroup tags, below the Image control, create a Label control:

    <s:HGroup>
                
        <mx:Image source="{data.imageFile}"/>
                            
        <s:Label/>
                            
    </s:HGroup>

17. To the Label control bind data.firstName as the text:

    <s:HGroup>
                            
        <mx:Image source="{data.imageFile}"/>
                            
        <s:Label text="{data.firstName}"/>
                            
    </s:HGroup>

18. Within the HGroup tags, below the Label control, create a Label control and bind data.lastName as the text:

    <s:HGroup>
                    
        <mx:Image source="{data.imageFile}"/>
                            
        <s:Label text="{data.firstName}"/>
                            
        <s:Label text="{data.lastName}"/>
                            
    </s:HGroup>

19. Save the file and run the application.

    You should see the employee images and names displayed (see Figure 2).

    

    Figure 2. Run the application to see the employee data displayed using the inline item renderer.

Creating an item renderer component

In this section, you will create a custom component to use as an item renderer.

1. Return to Flash Builder.

2. From the Package Explorer view, right-click on the src folder and select New > Folder (see Figure 3).

   

   Figure 3. Create a new folder.

3. In the New Folder dialog box, enter components for the Folder name (see Figure 4).

   

   Figure 4. Name the folder components.

4. Click Finish.

5. In the Package Explorer, right-click the components folder and select New > MXML Component (see Figure 5).

   

   Figure 5. Create a new MXML component.

6. In the New MXML Component dialog box, enter EmployeeItemRenderer for the Filename.
7. Click the Browse button to the right of the Based on field.

8. In the Based on dialog box, enter Item and select the ItemRenderer class (see Figure 6).

   

   Figure 6. Select the ItemRenderer class.

9. Click OK.

10. In the New MXML Component dialog box, delete the Width and Height values (see Figure 7).

    

    Figure 7. Fill in the New MXML Component dialog box.

11. Click Finish.

    The EmployeeItemRenderer.mxml file will open in the editor.

12. From the EmployeeItemRenderer.mxml file, delete the Declarations tag block.
13. Open the EmployeeDirectory.mxml file.
14. Locate the DataGroup component.
15. Within the DataGroup component, cut the code within the ItemRenderer class tag block.
16. Open the EmployeeItemRenderer.mxml file.

17. Between the ItemRenderer tags, paste the copied code:

    <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/halo">
        
        <s:states>
            <s:State name="normal"/>
        </s:states>
        
        <s:HGroup>
            
            <mx:Image source="{data.imageFile}"/>
            
            <s:Label text="{data.firstName}"/>
            
            <s:Label text="{data.lastName}"/>
            
        </s:HGroup>
        
    </s:ItemRenderer>

18. Save the file.
19. Open the EmployeeDirectory.mxml file.
20. Locate the DataGroup control.
21. From within the DataGroup component, delete the itemRenderer property tag block and its contents.

22. To the DataGroup component, assign components.EmployeeItemRenderer as the itemRenderer:

    <s:DataGroup dataProvider="{employeeList}" 
        itemRenderer="components.EmployeeItemRenderer">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout> 
    </s:DataGroup>

23. Save the file and run the application.

    You should see the application appears as it did before (see Figure 8).

    

    Figure 8. Run the application to see it has not changed.

Test your knowledge

In this exercise, you learned how to create a custom item renderer component for a group of data.

Q: What class is used to create an item renderer component?

A: The ItemRenderer class.

About the author