Exercise 4.1: Passing data to item renderers for display

In this exercise you will render data in a DataGroup container. You will first do so with simple string data and then UI elements. Lastly, you will display both strings and images in an item renderer that employs a function and conditional evaluation (see Figure 1).

In this exercise, you will learn how to:

• Use the DefaultItemRenderer class
• Use the DefaultComplexItemRenderer class
• Use an item renderer function
• Change the display order of the data objects
• Use the ClassFactory class to define an item renderer

In this section, you will use the DefaultItemRenderer class to render a group of data.

1. Download the ex4_01_starter.zip file that accompanies this tutorial and extract the file ex4_01_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex4_01_starter.fxp file.
4. Open ex4_01_starter.mxml.
5. Locate the Declarations comment.
6. Within the Declarations tag block, create a set of ArrayList tags:

7. To the ArrayList collection, add the id property with a value of employeeList:

8. Between the ArrayList tags, create a String block:

9. Type Samuel Ang for the value of the String class:

10. Copy the String tags and paste three more instances within the ArrayList collection below the first String class instance:

11. Reassign the pasted String instance values to the following employee names:Athena Parker, Saul Tucker, and Alyssa Le.

12. Locate the Label control below the UI components comment:
13. Below the Label control, create a DataGroup component tag block:

14. To the DataGroup component, add the dataProvider property and bind the value to the employeeList ArrayList collection.:

15. Save the file.
16. Run the application.

    You should see an ActionScript error message, "Could not create an item renderer for Samuel Ang" (see Figure 2).

17. Return to Flash Builder.
18. To the DataGroup component, assign spark.skins.spark.DefaultItemRenderer as the itemRenderer class:

19. Save the file and run the application.

    Note that the employee names in the ArrayList collection are all displayed in the same place (see Figure 3). All the employee names have been processed, but because no layout has been assigned to the DataGroup component, each employee name has been assigned the default x and y values of zero, which causes them to be stacked on top of each other.

20. Return to Flash Builder.
21. Between the DataGroup tags, create a set of layout property tags and assign a VerticalLayout instance:

22. To the VerticalLayout tag, add the paddingLeft and the paddingTop properties, both with a value of 25.

23. Save the file and run the application.

    You should see the employee names displayed vertically below the header text (see Figure 4).

In this section, you will use the DefaultComplexItemRenderer class to render employee image data.

1. Return to Flash Builder.
2. Locate the ArrayList collection nested within the Declarations tag block.
3. Below the last String instance, create a BitmapImage control:

4. To the BitmapImage control, add the source property with a value of images/sang.jpg.

5. Within the ArrayList collection, copy the BitmapImage control and paste three instances below the first:

6. Reassign the source properties of the added BitmapImage controls to use the following images from the images directory: aparker.jpg, stucker.jpg, and ale.jpg.

7. Locate the DataGroup component.
8. To the DataGroup component, reassign spark.skins.spark.DefaultComplexItemRenderer as the itemRenderer:

9. Save the file and run the application.

   You should see the employee images displayed vertically below the header (see Figure 5). Note that the employee names are not displayed.

In this section, you will use a function to determine the correct item renderer class to use to render the data.

1. Return to Flash Builder.
2. Locate the DataGroup component.
3. From the DataGroup component, remove the itemRenderer property and value.
4. To the DataGroup component, add the itemRendererFunction property with a value of rendererFunction:

5. Locate the Script comment.
6. Below the comment, create a Script block:

7. Within the Script block, create a private function named rendererFunction that returns information data typed to the ClassFactory class:

8. For the rendererFunction() function, assign one parameter named item and data type it to the Object class:

The item argument represents the data element that is currently being evaluated by this rendererFunction() method. If the data is a string, then you will use the DefaultItemRenderer class to render it. If the data is a UI element, then you will use the DefaultComplexItemRenderer to render it.

9. Within the rendererFunction() function, type if, invoke content assist and select the if statement template to create a condition statement that evaluates if the item parameter value is of the String data type:

10. Within the if statement, use the return statement to create a new instance of the ClassFactory class and render the data using the DefautItemRenderer class. Use the content assist tool to return the DefaultItemRenderer class and note that the corresponding import statement is generated within the Script block:

11. Below the if statement, create an else statement:

12. Within the else statement, use the return statement to return a new instance of the ClassFactory class and render the data using the DefaultComplexItemRenderer class. Use the content assist tool to select the DefaultComplexItemRenderer as the class to be returned and note that the corresponding import statement is generated within the Script block:

13. Save the file and run the application.

    You should see the employee names and images are displayed in the order they are listed within the ArrayList collection (see Figure 6).

In this section, you will arrange the data objects in the ArrayList collection so that the employee names and images are displayed relative to each other.

1. Return to Flash Builder.
2. Within the ArrayList collection nested within the Declarations block.
3. Within the ArrayList collection, move the BitmapImage controls so they are located below the respective String tag.

4. Save the file and run the application.

   You should see the employees names are displayed above their picture (see Figure 7).

In this section, you will use the ClassFactory class to instantiate a custom item renderer. You will learn more about item renderers in the next video and associated exercise.

1. Return to Flash Builder and open the NameDisplay.mxml file from the components package.
2. Review the contents of the file. You will use the NameDisplay.mxml file to make a custom item renderer.
3. Open the ex4_01_starter.mxml file.
4. Locate the rendererFunction() method in the Script block.
5. In the if statement within the function, change the return operation so that it returns a new instance of the ClassFactory class and renders the data using the NameDisplay class. Use the content assist tool (CTRL+Space) to select the NameDisplay as the class to be returned and note that the corresponding import statement is generated within the Script block.

6. Save the file and run the application.

   You should see the data from the custom item renderer displayed (see Figure 8).

In this exercise you learned how to use the DefaultItemRenderer and DefaultComplexItemRenderer classes to render data for a DataGroup component. You also learned how to create a function to render data. In the next exercise you will create a custom item renderer and use it to display employee data.