Requirements

 

Prerequisite knowledge
Exercise 1.1: Setting up your project

 

User level
Beginning
Required products
Flash Builder 4.7 Premium (Download trial)
Sample files
ex4_02_starter.zip
 
In this exercise, you will create a custom item renderer and use it to display the employee data as shown in Figure 1.
 
Review your task for this exercise.

Figure 1. Review your task for this exercise.

In this exercise, you will learn how to:
 

 
Create an inline item renderer

 

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.
     
<s:ArrayList id="employeeList"> <fx:Object firstName="Samuel" lastName="Ang" imageFile="images/sang.jpg"/> <fx:Object firstName="Athena" lastName="Parker" imageFile="images/aparker.jpg"/> <fx:Object firstName="Saul" lastName="Tucker" imageFile="images/stucker.jpg"/> <fx:Object firstName="Alyssa" lastName="Le" imageFile="images/ale.jpg"/> </s:ArrayList>
  1. Locate the DataGroup component.
  2. Within the DataGroup component tags, below the layout property tags, create an itemRenderer property tag set.
<s:DataGroup dataProvider="{employeeList}"> <s:layout> <s:VerticalLayout/> </s:layout> <s:itemRenderer> </s:itemRenderer> </s:DataGroup>
  1. Between the itemRenderer property tags, create a set of Component tags.
<s:itemRenderer> <fx:Component> </fx:Component> </s:itemRenderer>
  1. Between the Component block, create an ItemRenderer class block.
<s:itemRenderer> <fx:Component> <s:ItemRenderer> </s:ItemRenderer> </fx:Component> </s:itemRenderer>
Remember that itemRenderer (lowercase i) is a property of the DataGroup class while ItemRenderer (capital I) is a class that you are instantiating.
 
  1. Between the ItemRenderer tags, create a states tag block.
<fx:Component> <s:ItemRenderer> <s:states> </s:states> </s:ItemRenderer> </fx:Component>
  1. Between the states block, create a State instance and assign normal as the name.
<s:states> <s:State name="normal"/> </s:states>
  1. Between the ItemRenderer tags, below the states tag block, create an BorderContainer block.
<s:ItemRenderer> <s:states> <s:State name="normal"/> </s:states> <s:BorderContainer> </s:BorderContainer> </s:ItemRenderer>
  1. 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%.
<s:BorderContainer borderWeight="2" backgroundColor="#cccccc" top="5" height="100%" width="100%"> </s:BorderContainer>
  1. Within the BorderContainer block, create a layout block.
<s:BorderContainer borderWeight="2" backgroundColor="#cccccc" top="5" height="100%" width="100%"> <s:layout> </s:layout> </s:BorderContainer>
  1. Within the layout block, add the VerticalLayout tag.
<s:BorderContainer borderWeight="2" backgroundColor="#cccccc" top="5" height="100%" width="100%"> <s:layout> <s:VerticalLayout/> </s:layout> </s:BorderContainer>
  1. Within the BorderContainer block, below the layout block, create an Label control.
<s:BorderContainer borderWeight="2" backgroundColor="#cccccc" top="5" height="100%" width="100%"> <s:layout> <s:VerticalLayout/> </s:layout> <s:Label /> </s:BorderContainer>
  1. To the Label control, add the text property and bind data.firstName and data.lastName as the value.
<s:Label text="{data.firstName} {data.lastName}"/>
Data for the current object that is being evaluated is referenced in the data property of the item renderer.
 
  1. Within the BorderContainer block, below the Label control, create an BitmapImage control.
... <s:Label text="{data.firstName} {data.lastName}"/> <s:BitmapImage /> </s:BorderContainer>
  1. To the BitmapImage control, add the source property with a bound value of data.imageFile.
<s:BitmapImage source="{data.imageFile}"/>
  1. 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.
     
 Run the application to see the employee data displayed using the inline item renderer.

Figure 2. Run the application to see the employee data displayed using the inline item renderer.

  1. Return to the ex4_02_starter.mxml starter file in Flash Builder.
  2. Locate the BorderContainer block.
  3. Within the layout block, to the VerticalLayout tag, add the horizontalAlign property with a value of center.
<s:BorderContainer borderWeight="2" backgroundColor="#cccccc" top="5" height="100%" width="100%"> <s:layout> <s:VerticalLayout horizontalAlign="center"/> </s:layout> <s:Label text="{data.firstName} {data.lastName}"/> <s:BitmapImage source="{data.imageFile}"/> </s:BorderContainer>
  1. 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).
     
 Center the employee name and image horizontally in the item renderer.

Figure 3. Center the employee name and image horizontally in the item renderer.

  1. Return to the ex4_02_starter.mxml in Flash Builder.
  2. Within BorderContainer block's layout block, to the VerticalLayout tag, add the verticalAlign property with a value of middle.
<s:BorderContainer borderWeight="2" backgroundColor="#cccccc" top="5"height="100%" width="100%"> <s:layout> <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/> </s:layout> <s:Label text="{data.firstName} {data.lastName}"/> <s:BitmapImage source="{data.imageFile}"/> </s:BorderContainer>
  1. Save the file and run the application.
  2. You should see the employee name and image are now vertically and horizontally centered in the item renderer (see Figure 4).
     
 Run the application to see the employee information is centered within the item renderer.

Figure 4. Run the application to see the employee information is centered within the item renderer.

 
Create an item renderer component class file

 

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).
Figure 5. Create a new Item Renderer.

Figure 5. Create a new Item Renderer.

  1. 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.
 
 Fill in the New Item Renderer dialog box.

Figure 6. Fill in the New Item Renderer dialog box.

  1. Click Finish.
    The EmployeeItemRenderer.mxml file will open in the editor.
     
  2. Delete the Label control that was generated with the file.
  3. Switch to the ex4_02_starter.mxml file.
  4. Locate the DataGroup component.
  5. Within the DataGroup component, cut the code between the ItemRenderer tags.
  6. Switch the EmployeeItemRenderer.mxml file.
  7. Paste the copied code between the ItemRenderer tags..
  8. Save the file.
  9. Return to the ex4_02_starter.mxml file.
  10. From within the DataGroup component, delete the itemRenderer block and its contents.
  11. To the DataGroup component, add the itemRenderer property with a value of components.EmployeeItemRenderer.
<s:DataGroup dataProvider="{employeeList}" itemRenderer="components.EmployeeItemRenderer"> <s:layout> <s:VerticalLayout/> </s:layout> </s:DataGroup>
  1. Save the file and run the application.
    You should see the application appears as it did before, as shown in Figure 7.
     
Run the application to see it has not changed.

Figure 7. Run the application to see it has not changed.

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.