Adobe is changing the world through digital experiences. Our creative, marketing and document solutions empower everyone — from emerging artists to global brands — to bring digital creations to life and deliver them to the right person
at the right moment for the best results.

Preorder Estimated Availability Date. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change.Preorder Estimated Availability Date. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.

Prerequisite knowledge

User level

Required products

Exercise files

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).

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.

Figure 3. Run the application to see the data displayed.

Return to Flash Builder.

Between the DataGroup tags, create a set of layout property tags and assign a VerticalLayout instance:

You will now create the function that tests what type of data is being rendered for each element in the ArrayList collection. Remember that this function is called multiple times, once for every element of data.

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

private function rendererFunction():ClassFactory
{
}

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

private function rendererFunction (item:Object):ClassFactory {
}

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.

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:

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:

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:

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

Figure 7. Run the application to see the employee names displayed above their images.

Use the ClassFactory class to define an item renderer

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.

Return to Flash Builder and open the NameDisplay.mxml file from the components package.

Review the contents of the file. You will use the NameDisplay.mxml file to make a custom item renderer.

Open the ex4_01_starter.mxml file.

Locate the rendererFunction() method in the Script block.

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.

if(item is String)
{
return new ClassFactory(NameDisplay);
}

Save the file and run the application.

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

Figure 8. View the application and the custom item renderer.

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.