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

Figure 1. Review your task for this exercise.

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

Requirements

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

Flash Builder 4

• Download
• Learn more

Exercise files:

• ex5_01_starter.zip (ZIP, 54 KB)
• ex5_01_solution.zip (ZIP, 55 KB)

Prerequisite knowledge:

• Exercise 1.1: Creating and skinning an application

Use the DefaultItemRenderer class

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

1. Download the ex5_01_starter.zip file that accompanies this tutorial and extract the file ex5_01_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex5_01_starter.fxp file.
4. Open EmployeeDirectory.mxml.
5. Locate the Declarations comment.
6. Below the Declarations comment, create a Declarations tag set:

   <!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
       
   <fx:Declarations>
           
   </fx:Declarations>

7. Within the Declarations tag block, create a set of ArrayList tags:

   <fx:Declarations>
       <s:ArrayList>
               
       </s:ArrayList>
   </fx:Declarations>

8. To the ArrayList instance, assign employeeList as the id:

   <s:ArrayList id="employeeList">
               
   </s:ArrayList>

9. Between the ArrayList tags, create a String tag set:

   <s:ArrayList id="employeeList">
       <fx:String></fx:String>
   </s:ArrayList>

10. Type Andrew Brilliam for the value of the String class:

    <s:ArrayList id="employeeList">
        <fx:String>Andrew Brilliam</fx:String>
    </s:ArrayList>

11. Copy the String tags and paste five instances within the ArrayList instance below the first String class instance:

    <s:ArrayList id="employeeList">
        <fx:String>Andrew Brilliam</fx:String>
        <fx:String>Andrew Brilliam</fx:String>
        <fx:String>Andrew Brilliam</fx:String>
        <fx:String>Andrew Brilliam</fx:String>
        <fx:String>Andrew Brilliam</fx:String>
        <fx:String>Andrew Brilliam</fx:String>
    </s:ArrayList>

12. Reassign the pasted String instance values to the following employee names: Ben Crater, David Avenon, Annette Kotter, Brian Minnows, and Barry Kramson:

    <s:ArrayList id="employeeList">
        <fx:String>Andrew Brilliam</fx:String>
        <fx:String>Ben Crater</fx:String>
        <fx:String>David Avenon</fx:String>
        <fx:String>Annette Kotter</fx:String>
        <fx:String>Brian Minnows</fx:String>
        <fx:String>Barry Kramson</fx:String>
    </s:ArrayList>

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

    <s:Label text="Employee Directory" 
        color="#00748D" 
        fontSize="24"/>
        
    <s:DataGroup>
            
    </s:DataGroup>

15. To the DataGroup component, bind employeeList as the dataProvider:

    <s:DataGroup dataProvider="{employeeList}">
            
    </s:DataGroup>

16. Save the file.
17. Run the application.

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

    

    Figure 2. Run the application to see the ActionScript error message.

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

    <s:DataGroup dataProvider="{employeeList}" 
        itemRenderer="spark.skins.spark.DefaultItemRenderer">
            
    </s:DataGroup>

20. Save the file and run the application.

    You should see the last employee in the ArrayList collection displayed below the header text (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.

21. Return to Flash Builder.
22. 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>

23. Add left and top padding of 25 to the application layout.
24. Save the file and run the application.

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

    

    Figure 4. Run the application to see the employees displayed vertically below the header text.

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 an Image control:

   ...
   <s:ArrayList id="employeeList">
       <fx:String>Andrew Brilliam</fx:String>
       <fx:String>Ben Crater</fx:String>
       <fx:String>David Avenon</fx:String>
       <fx:String>Annette Kotter</fx:String>
       <fx:String>Brian Minnows</fx:String>
       <fx:String>Barry Kramson</fx:String>
       <mx:Image/>
   </s:ArrayList>
   ...

4. To the Image control, assign images/abrilliam.jpg as the source:

   ...
       <fx:String>Barry Kramson</fx:String>
       <mx:Image source="images/abrilliam.jpg"/>
   </s:ArrayList>
   ...

5. Within the ArrayList collection, copy the Image control and paste five instances below the first:

   ...
       <mx:Image source="images/abrilliam.jpg"/>
       <mx:Image source="images/abrilliam.jpg"/>
       <mx:Image source="images/abrilliam.jpg"/>
       <mx:Image source="images/abrilliam.jpg"/>
       <mx:Image source="images/abrilliam.jpg"/>
       <mx:Image source="images/abrilliam.jpg"/>
   </s:ArrayList>
   ...

6. Reassign the source properties of the added Image controls to use the following images from the images directory: bcrater.jpg, davenon.jpg, akotter.jpg, bminnows.jpg, and bkramson.jpg:

   ...
       <mx:Image source="images/abrilliam.jpg"/>
       <mx:Image source="images/bcrater.jpg"/>
       <mx:Image source="images/davenon.jpg"/>
       <mx:Image source="images/akotter.jpg"/>
       <mx:Image source="images/bminnows.jpg"/>
       <mx:Image source="images/bkramson.jpg"/>
   </s:ArrayList>
   ...

7. Locate the DataGroup component.
8. 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>

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.

   

   Figure 5. Run the application to see the employee images displayed, but not the employee names.

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, assign rendererFunction as the itemRendererFunction value:

   <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 instance. Remember that this function is called multiple times, once for every element of data.
5. Locate the Script comment.
6. Below the comment, create a Script block:

   <!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   <fx:Script>
       <![CDATA[
               
       ]]>
   </fx:Script>

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

   private function rendererFunction():ClassFactory
   {
   
   }

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

9. Within the rendererFunction() function, create an if statement that evaluates if the item parameter value is of the String data type:

   private function rendererFunction(item:Object):ClassFactory
   {
       if(item is String)
       {
                       
       }
   }

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 code completion for the DefaultItemRenderer and note that the following import statement is generated within the Script block:

    import spark.skins.spark.DefaultItemRenderer;
    
    if(item is String)
    {
        return new ClassFactory(DefaultItemRenderer);
    }

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

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

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 code completion for the DefaultComplexItemRenderer and note that the following 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);
    }

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 instance (see Figure 6).

    

    Figure 6. Run the application to see all the data displayed.

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 instance nested within the Declarations block.
3. Within the ArrayList instance, move the Image controls so they are located below the respective String tag.

   <s:ArrayList id="employeeList">
         <fx:String>Andrew Brilliam</fx:String>
         <mx:Image source="images/abrilliam.jpg"/>
         <fx:String>Ben Crater</fx:String>
         <mx:Image source="images/bcrater.jpg"/>
         <fx:String>David Avenon</fx:String>
         <mx:Image source="images/davenon.jpg"/>
         <fx:String>Annette Kotter</fx:String>
         <mx:Image source="images/akotter.jpg"/>
         <fx:String>Brian Minnows</fx:String>
         <mx:Image source="images/bminnows.jpg"/>
         <fx:String>Barry Kramson</fx:String>
         <mx:Image source="images/bkramson.jpg"/>
   </s:ArrayList>

4. Save the file and run the application.

   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.

Test your knowledge

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.

What data types can the DefaultItemRender class be used to render?

The String type.

What data type can the DefaultComplexItemRenderer class be used to render?

You can use it to render UI elements.

What property is used to assign an item rendering function as the item renderer for the DataGroup component?

The itemRendererFunction property.

About the author