Exercise 4.3: Creating item renderers for Spark List components
Modified
23 May 2011
Requirements
Prerequisite knowledge
- Exercise 1.1: Setting up your project
- Exercise 4.1: Passing data to item renderers for display
- Exercise 4.2: Displaying dynamic data in a custom item renderer
User level
Beginning
Required products
- Flash Builder 4.5 Premium (Download trial)
Exercise files
In this exercise you will apply the item renderer component created in Exercise 4.2: Displaying dynamic data in a custom item renderer to a Spark List control (see Figure 1). You will also use the same item renderer with a Spark ComboBox control.
This is another example of the flexibility of the Spark component architecture.
In this exercise, you will learn how to:
Apply the Spark item renderer to the Spark List control
In this section, you will use the item renderer created in the previous exercise to render a Spark List control.
- Download the ex4_03_starter.zip file provided in the Exercise files section and extract the ex4_03_starter.fxp to your computer.
- Open Flash Builder.
- Import the ex4_03_starter.fxp file.
- Open ex4_03_starter.mxml.
- Locate the
DataGroupcontrol. - Replace the opening and closing
DataGrouptags withListcontrol tags.
<s:List dataProvider="{employeeList}"
itemRenderer="components.EmployeeItemRenderer">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:List>
- Save the file and run the application.
You should see the black border of the List control surrounding the employees (see Figure 2).
Apply the Spark item renderer to the Spark ComboBox control
In this section you will use the item renderer to display the employees in a Spark ComboBox control.
- Return to the ex4_03_starter.mxml file in Flash Builder.
- Locate the
Listblock. - Replace the opening and closing
Listtags withComboBoxcontrol tags.
<s:ComboBox dataProvider="{employeeList}"
itemRenderer="components.EmployeeItemRenderer">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:ComboBox>
- Save the file and run the application.
- Open the
ComboBoxcontrol.You should see the employees displayed with the item renderer, as shown in Figure 3.
- Select an employee from the
ComboBoxcontrol.You should see the string [object Object] in the
ComboBoxcontrol, as shown in Figure 4. This means that you need to define the property to display in the ComboBox control.
- Return to the ex4_03_starter.mxml file in Flash Builder.
- To the
ComboBoxcontrol, add thelabelFieldproperty with a value of lastName and add thewidthproperty with a value of125.
<s:ComboBox dataProvider="{employeeList}"
itemRenderer="components.EmployeeItemRenderer"
labelField="lastName"
width="125">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:ComboBox>
- Save the file and run the application.
- Select an employee from the
ComboBoxcontrol.You should see the employee's last name displayed in the
ComboBoxcontrol, as shown in Figure 5. Notice that the employee data is not centered within theComboBoxcontrol.
- Return to Flash Builder.
- From the Package Explorer view, locate the components folder and open the EmployeeItemRenderer.mxml file.
- Within the opening
BorderContainertag, add thebottom,left, andrightproperty with a value of5.
<s:BorderContainer borderWeight="2"
backgroundColor="#cccccc"
top="5" bottom="5" left="5" right="5"
height="100%" width="100%"/>
- Save the file.
- Run the application.
- Click the drop-down list.
Notice the employee data is now centered within the
ComboBoxcontrol (see Figure 6).
In this exercise you learned how to use an item renderer with a Spark List control and a Spark ComboBox control.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
More Like This
- Exercise 5.9: Skinning the SkinnableDataContainer container
- Exercise 5.10: Creating a production build
- Exercise 5.7: Creating a vertical title bar on a Panel container
- Exercise 1.1: Setting up your project files
- Exercise 1.6: Creating MXML custom components with ActionScript properties
- Exercise 2.1: Handling a user event
- Exercise 2.2: Using the event object
- Exercise 2.3: Using the addEventListener() method
- Exercise 2.4: Populating an ArrayCollection with retrieved data using the result event
- Exercise 4.5: Creating and using item renderers and item editors
