Exercise 4.4: Using the Spark DataGrid control

In this exercise you will use the DataGrid control to display employee data. You will also configure and format the control's columns and data as shown in Figure 1.

In this exercise, you will learn how to:

• Specify DataGrid control columns
• Format data in a DataGrid control
• Create a reusable label function
• Apply the alternatingRowColors property

In this section, you will configure a DataGrid control so that it displays only the columns you define.

1. Download the ex4_04_starter.zip file provided in the Exercise files section and extract the ex4_04_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex4_04_starter.fxp file.
4. Open ex4_04_starter.mxml.
5. Locate the Label control below the UI components comment.
6. Below the Label control, type <D to invoke the content assist tool and select the Spark DataGrid control.

7. To the DataGrid control, bind employeeList as the dataProvider value.

8. Save the file and run the application.

   You should see the DataGrid control is populated with employee data, as shown in Figure 2.

9. Return to the ex4_04_starter.mxml file in Flash Builder.

10. Between the DataGrid control tags, create a columns block.

Remember that the dataProvider property contains the data model for this component. The column displays are the view. In other words, all of the data is stored in the dataProvider property and you are merely defining which pieces are exposed via the columns.

Within the columns property block you can define one or more GridColumn instances inside of an ArrayList or an ArrayCollection instance. Since you will not be implementing any advanced sorting of the data, you can use the lighter weight ArrayList class.

11. Within the columns block, add an ArrayList block.
    

12. Within the columns block, add a DataGridColumn control instance.

13. To the GridColumn control, add the dataField property with a value of lastName and the headerText property with a value of Name.

The dataField property references the name of the data field in the data model that you are displaying. The headerText property is the text that will appear at the top of the column.

14. Below the GridColumn control, create another GridColumn control and add the dataField property with a value of hireDate and the headerText property with a value of Hire Date.

15. Save the file and run the application.

    You should see the DataGrid control only displays the Last Name and Hire Date columns and some of the content within the Name column has ben cut off, as shown in Figure 3.

In this section, you will use a function and the labelFunction property of the GridColumn control to format the employee name displayed in the first GridColumn instance and the typicalItem property of the DataGrid control to define the display width of the column. You will also use a DateTimeFormatter component to format the date within the second GridColumn control.

1. Return to Flash Builder.
2. Within the Script block, below the employeeList variable, create a private function named employeeName that returns data typed to the String class.

3. For the function, create the argument item and data type it to the Object class.

This function will be called for every row in the DataGrid control. Each time it is run, the DataGrid control passes all of the data in that one row to the function. In the step above you are naming that data item for use in the function.

Remember that, by default, the DataGrid column only displays the one data field that matches the dataField property. You can use this function, and the item property, to reference multiple data fields for display in the column.

4. For the function, create another argument named column and data type it to the GridColumn class.

This second argument references the name of the GridColumn instance that calls this function.

5. Within the function, use the return keyword to return the item.firstName value and the item.lastName value separated by a space.

6. Locate the DataGrid control.
7. From the first GridColumn control, remove the dataField property and value.
8. To the first GridColumn control, add the labelFunction property with a value of employeeName.

9. Save the file and run the application.

   You should see the full employee name in the first column. Note that some employee last names are still slightly cut off (see Figure 4).

10. Return to the ex4_04_starter.mxml file in Flash Builder.
11. Above the columns block in the DataGrid control, add a typicalItem block.

    Adding the typicalItem property will allow you to set example data that will set the width of the columns in the DataGrid control. This is an alternative to setting the width property on the DataGrid control or its columns.

12. Within the typicalItem block, add an instance of the DataItem class.

13. To the DataItem instance, reference the firstName and set its value to Christopher.

14. Next, reference the lastName and set its value to Winchester. The lastName matches the dataField value and sets a default size for that field in the data provider.

Note: For both the firstName and lastName, you can set the values to any string that is longer than the last names in the data.

15. To the DataItem instance, reference the hireDate and set its value to 12/31/2011.
16. Save the file and run the application.

    You should see each employee's full name and hire date in the DataGrid control (see Figure 5). The first column is as wide as it must be to fit the name Christopher Winchester.

17. Return to Flash Builder.
18. Locate the Declarations block.
19. Within the Declarations block, below the HTTPService component, create a DateFormatter tag.

The DateTimeFormatter class affects the formatting of a visual element but is not a visual element itself, so is declared within the Declarations block.

20. To the DateTimeFormatter tag, assign employeeDateFormatter as the id and d-MMM-yy as the dateTimePattern.

21. Within the Script block, below the employeeName() function, create a private function named dateFormat and assign its return type to the String class.

22. For the function, create a parameter named item and data type it to the Object class.

23. For the function, create another parameter named column and data type it to the GridColumn class.

24. Within the dateFormat() function, use the format() method of the employeeDateFormatter instance and a return statement to return a formatted version of the item.hireDate value for each employee.

25. Locate the DataGrid control.
26. To the second GridColumn tag, add the labelFunction property with a value of dateFormat.

27. Save the file and run the application.

You should see the Hire Date column now displays the formatted hire date, as shown in Figure 6.

In this section, you will make the dateFormat() function reusable by applying the column parameter to a GridColumn control.

1. Return to Flash Builder.
2. Within the Script block, locate the dateFormat() function.
3. Within the function, replace the hireDate parameter with column and change the reference to the specific column to item[column.dataField].

4. Save the file and run the application.

   You should see there is no change to the application (see Figure 6), but you could now reuse this function for any GridColumn instance.

In this section, you will apply the alternatingRowColors property to the DataGrid control to add alternating colors to each row of the grid.

1. Return to the ex4_04_starter.mxml file.
2. Locate the opening tag for the DataGrid control.
3. Add the alternatingRowColors property and set the value to #FFFFFF (white) and #CCCCCC (gray), separated by a comma within Array brackets.

4. Save the file and run the application.

You should see that the rows of the DataGrid control display alternating colors of white and gray (see Figure 7).

In this exercise you used the DataGrid control to display employee data and configured and formatted the control's columns and data.