Exercise 4.2: Displaying dynamic data in a custom item renderer

In this exercise, you will create a custom item renderer and use it to display the employee data as shown in Figure 1.

In this exercise, you will learn how to:

• Create an inline item renderer
• Create an item renderer component class file

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

1. Download the ex4_02_starter.zip file provided in the Exercise files section and extract the ex4_02_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex4_02_starter.fxp file.
4. Open ex4_02_starter.mxml.
5. Below the Declarations comment, locate the Declarations block.
6. Within the Declarations block, note the ArrayList tags and nested Object tags. This represents the data that is being used as the data provider.

   Note: You are using an ArrayList instance instead of an ArrayCollection instance for this example since the data will not be updated, and therefore, does not need the overhead of the bindings in the ArrayCollection class.

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

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

10. Between the Component block, create an ItemRenderer class block.

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.

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

13. Between the ItemRenderer tags, below the states tag block, create an BorderContainer block.

14. To the opening BorderContainer tag, add the borderWeight property with a value of 2, the backgroundColor property with a value of #cccccc, the top property with a value of 5 and the height and width properties with a values of 100%.

15. Within the BorderContainer block, create a layout block.

16. Within the layout block, add the VerticalLayout tag.

17. Within the BorderContainer block, below the layout block, create an Label control.

18. To the Label control, add the text property and bind data.firstName and data.lastName as the value.

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

19. Within the BorderContainer block, below the Label control, create an BitmapImage control.

20. To the BitmapImage control, add the source property with a bound value of data.imageFile.

21. Save the file and run the application.

    You should see the employee images and names displayed with a border and background color, as shown in Figure 2. Note, however that the employees are not centered within the item renderer.

22. Return to the ex4_02_starter.mxml starter file in Flash Builder.
23. Locate the BorderContainer block.
24. Within the layout block, to the VerticalLayout tag, add the horizontalAlign property with a value of center.

25. Save the file and run the application.

    You should see the employee name and image are now centered horizontally in each item renderer (see Figure 3).

26. Return to the ex4_02_starter.mxml in Flash Builder.
27. Within BorderContainer block's layout block, to the VerticalLayout tag, add the verticalAlign property with a value of middle.

28. Save the file and run the application.

You should see the employee name and image are now vertically and horizontally centered in the item renderer (see Figure 4).

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

1. Return to Flash Builder.
2. Within the Package Explorer, right-click the src folder and select New > Item Renderer (see Figure 5).

3. Within the New Item Renderer dialog box, for the Package type components and for the Name type EmployeeItemRenderer.

Your New Item Renderer dialog box should appear as shown in Figure 6.

4. Click Finish.

   The EmployeeItemRenderer.mxml file will open in the editor.

5. Delete the Label control that was generated with the file.
6. Switch to the ex4_02_starter.mxml file.
7. Locate the DataGroup component.
8. Within the DataGroup component, cut the code between the ItemRenderer tags.
9. Switch the EmployeeItemRenderer.mxml file.
10. Paste the copied code between the ItemRenderer tags..
11. Save the file.
12. Return to the ex4_02_starter.mxml file.
13. From within the DataGroup component, delete the itemRenderer block and its contents.
14. To the DataGroup component, add the itemRenderer property with a value of components.EmployeeItemRenderer.

15. Save the file and run the application.

    You should see the application appears as it did before, as shown in Figure 7.

In this exercise, you learned how to create a custom item renderer component for a group of data. In the next exercise you will apply the item renderer component created in this exercise to a Spark List control.