For the complete experience, please enable JavaScript in your browser. Thank you!

See plans for: businesses photographers students

Get Support

Find answers quickly. Contact us if you need to.
Start now >
Learn the apps

Get started or learn new ways to work.
Learn now >
Ask the community

Post questions and get answers from experts.
Start now >

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.

Subtotal
Promotions
Estimated shipping
Tax	Calculated at checkout

Total

Review and Checkout

Exercise 4.3: Creating item renderers for Spark List components

by Trilemetry

Trilemetry, Inc.

Content

Apply the Spark item renderer to the Spark List control
Apply the Spark item renderer to the Spark ComboBox control

Modified

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

Figure 1. Review your task for this exercise.

In this exercise, you will learn how to:

Apply a Spark item renderer to the Spark List control
Apply the Spark item renderer to the Spark ComboBox control

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 DataGroup control.
Replace the opening and closing DataGroup tags with List control 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).

Figure 2. Run the application to see the employees rendered in the List control.

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 List block.
Replace the opening and closing List tags with ComboBox control 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 ComboBox control.
You should see the employees displayed with the item renderer, as shown in Figure 3.

Figure 3. Open the ComboBox control to view the employees.

Select an employee from the ComboBox control.
You should see the string [object Object] in the ComboBox control, as shown in Figure 4. This means that you need to define the property to display in the ComboBox control.

Figure 4. Select an employee to see the string displayed in the ComboBox control.

Return to the ex4_03_starter.mxml file in Flash Builder.
To the ComboBox control, add the labelField property with a value of lastName and add the width property with a value of 125.

        <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 ComboBox control.
You should see the employee's last name displayed in the ComboBox control, as shown in Figure 5. Notice that the employee data is not centered within the ComboBox control.

Figure 5. Select an employee to see the last name displayed in the ComboBox control.

Return to Flash Builder.
From the Package Explorer view, locate the components folder and open the EmployeeItemRenderer.mxml file.
Within the opening BorderContainer tag, add the bottom, left, and right property with a value of 5.

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

Figure 6. The employee data is centered in the ComboBox control.

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

Choose your region Products Downloads Learn & Support Company

AdChoices