Exercise 5.6: Handling a DataGrid itemClick event

In this exercise you will use the itemClick event to handle a user click on the DataGrid control (see Figure 1).

Figure 1. Review your task for this exercise.

In this exercise, you will learn how to:

• Use the itemClick event

Requirements

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

Flash Builder 4

• Download
• Learn more

Exercise files:

• ex5_06_starter.zip (ZIP, 276 KB)
• ex5_06_solution.zip (ZIP, 276 KB)

Prerequisite knowledge:

• Exercise 1.1: Creating and skinning an application
• Exercise 2.4: Formatting dates
• Exercise 4.3: Populating an application with data and handling faults

Using the itemClick event

In this section, you will assign the itemClick event to display information from the data object selected.

1. Download the ex5_06_starter.zip file if you haven’t already and extract the file ex5_06_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex5_06_starter.fxp file.
4. Open EmployeeDirectory.mxml.
5. Below the UI components comment, locate the DataGrid control.

6. To the DataGrid control, use the code assist tool to generate the itemClick event (see Figure 2).

   

   Figure 2. Generate the itemClick event for the DataGrid control.

7. Use the code assist tool to generate a click handler function for the itemClick event (see Figure 3).

   

   Figure 3. Use the code assist tool to generate an event handler function for the itemClick event.

8. Within the Script block, locate the employeeDataGrid_itemClickHandler() function.

9. Within the function, remove the generated code and assign event.target.selectedItem.firstName as the employeeName Label control's text value:

   protected function employeeDataGrid_itemClickHandler(event:ListEvent):void
   {
       employeeName.text = event.target.selectedItem.firstName;
   }

10. Below the employeeName.text assignment, assign the employeeImage Image control's source property to the employee image located in the images directory using the employee id value from the data:

    protected function
    employeeDataGrid_itemClickHandler(event:ListEvent):void
    {
        employeeName.text = event.target.selectedItem.firstName;
        employeeImage.source = "images/"
        + event.target.selectedItem.id + ".jpg";
    }

11. Save the file.
12. Run the application.

13. Click on an employee item in the DataGrid control.

    You should see the employees first name and image displayed below the DataGrid control (see Figure 4).

    

    Figure 4. Click an employee to display their first name and image below the DataGrid control.

Test your knowledge

In this exercise, you learned how to use the itemClick event to handle a user click within a DataGrid control.

What event is used to handle a user click on the DataGrid control?

The itemClick event.

About the author