Requirements

Prerequisite knowledge

User level

Beginning

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

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:
<fx:Declarations> <s:ArrayList> </s:ArrayList> </fx:Declarations>
  1. To the ArrayList collection, add the id property with a value of employeeList:
<s:ArrayList id="employeeList"> </s:ArrayList>
  1. Between the ArrayList tags, create a String block:
<s:ArrayList id="employeeList"> <fx:String></fx:String> </s:ArrayList>
  1. Type Samuel Ang for the value of the String class:
<s:ArrayList id="employeeList"> <fx:String>Samuel Ang</fx:String> </s:ArrayList>
  1. Copy the String tags and paste three more instances within the ArrayList collection below the first String class instance:
<s:ArrayList id="employeeList"> <fx:String>Samuel Ang</fx:String> <fx:String>Samuel Ang</fx:String> <fx:String>Samuel Ang</fx:String> <fx:String>Samuel Ang</fx:String> </s:ArrayList>
  1. Reassign the pasted String instance values to the following employee names:Athena Parker, Saul Tucker, and Alyssa Le.
<s:ArrayList id="employeeList"> <fx:String>Samuel Ang</fx:String> <fx:String>Athena Parker</fx:String> <fx:String>Saul Tucker</fx:String> <fx:String>Alyssa Le</fx:String> </s:ArrayList>
  1. Locate the Label control below the UI components comment:
  2. Below the Label control, create a DataGroup component tag block:
<s:Label width="440" height="40" text="Employee Portal: Employee Directory" styleName="titleHeader" /> <s:DataGroup> </s:DataGroup>
  1. To the DataGroup component, add the dataProvider property and bind the value to the employeeList ArrayList collection.:
<s:DataGroup dataProvider="{employeeList}"> </s:DataGroup>
  1. Save the file.
  2. Run the application.

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

  1. Return to Flash Builder.
  2. To the DataGroup component, assign spark.skins.spark.DefaultItemRenderer as the itemRenderer class:
<s:DataGroup dataProvider="{employeeList}" itemRenderer="spark.skins.spark.DefaultItemRenderer"> </s:DataGroup>
  1. 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.

  1. Return to Flash Builder.
  2. Between the DataGroup tags, create a set of layout property tags and assign a VerticalLayout instance:
<s:DataGroup dataProvider="{employeeList}" itemRenderer="spark.skins.spark.DefaultItemRenderer"> <s:layout> <s:VerticalLayout/> </s:layout> </s:DataGroup>
  1. To the VerticalLayout tag, add the paddingLeft and the paddingTop properties, both with a value of 25.
<s:layout> <s:VerticalLayout paddingLeft="25" paddingTop="25"/> </s:layout>
  1. Save the file and run the application.

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

Use the DefaultComplexItemRenderer class

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:
... <s:ArrayList id="employeeList"> <fx:String>Samuel Ang</fx:String> <fx:String>Athena Parker</fx:String> <fx:String>Saul Tucker</fx:String> <fx:String>Alyssa Le</fx:String> <s:BitmapImage/> </s:ArrayList> ...
  1. To the BitmapImage control, add the source property with a value of images/sang.jpg.
... <fx:String>Alyssa Le</fx:String> <s:BitmapImage source="images/sang.jpg"/> </s:ArrayList> ...
  1. Within the ArrayList collection, copy the BitmapImage control and paste three instances below the first:
... <s:BitmapImage source="images/sang.jpg"/> <s:BitmapImage source="images/sang.jpg"/> <s:BitmapImage source="images/sang.jpg"/> <s:BitmapImage source="images/sang.jpg"/> </s:ArrayList> ...
  1. 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.
... <s:BitmapImage source="images/sang.jpg"/> <s:BitmapImage source="images/aparker.jpg"/> <s:BitmapImage source="images/stucker.jpg"/> <s:BitmapImage source="images/ale.jpg"/> </s:ArrayList> ...
  1. Locate the DataGroup component.
  2. To the DataGroup component, reassign spark.skins.spark.DefaultComplexItemRenderer as the itemRenderer:
<s:DataGroup dataProvider="{employeeList}" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"> <s:layout> <s:VerticalLayout/> </s:layout> </s:DataGroup>
  1. 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.

Use an item renderer function

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:
<s:DataGroup dataProvider="{employeeList}" itemRendererFunction="rendererFunction"> <s:layout> <s:VerticalLayout/> </s:layout> </s:DataGroup>
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.
  1. Locate the Script comment.
  2. Below the comment, create a Script block:
<!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <fx:Script> <![CDATA[ ]]> </fx:Script>
  1. Within the Script block, create a private function named rendererFunction that returns information data typed to the ClassFactory class:
private function rendererFunction():ClassFactory { }
  1. 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.

  1. 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:
private function rendererFunction(item:Object):ClassFactory { if(item is String) { } }
  1. 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:
import spark.skins.spark.DefaultItemRenderer; if(item is String) { return new ClassFactory(DefaultItemRenderer); }
  1. Below the if statement, create an else statement:
if(item is String) { return new ClassFactory(DefaultItemRenderer); } else { }
  1. 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:
import spark.skins.spark.DefaultComplexItemRenderer; if(item is String) { return new ClassFactory(DefaultItemRenderer); } else { return new ClassFactory(DefaultComplexItemRenderer); }
  1. 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).

Change the display order of the data objects

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.
<s:ArrayList id="employeeList"> <fx:String>Samuel Ang</fx:String> <s:BitmapImage source="images/sang.jpg"/> <fx:String>Athena Parker</fx:String> <s:BitmapImage source="images/aparker.jpg"/> <fx:String>Saul Tucker</fx:String> <s:BitmapImage source="images/stucker.jpg"/> <fx:String>Alyssa Le</fx:String> <s:BitmapImage source="images/ale.jpg"/> </s:ArrayList>
  1. Save the file and run the application.

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

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.

  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.
if(item is String) { return new ClassFactory(NameDisplay); }
  1. 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.