Requirements

Prerequisite knowledge Required products Exercise files User level

Flash Builder 4.7 Premium (Download trial)

Beginning
 
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.
 
Review your task for this exercise.
Figure 1. Review your task for this exercise.
 

 
Specify DataGrid control columns

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.
<s:Label text="Employee Directory" width="400" height="40" styleName="titleHeader"/> <s:DataGrid> </s:DataGrid>
  1. To the DataGrid control, bind employeeList as the dataProvider value.
<s:DataGrid dataProvider="{employeeList}" > </s:DataGrid>
  1. Save the file and run the application.
    You should see the DataGrid control is populated with employee data, as shown in Figure 2.
     
Run the application to see the DataGrid control populated with employee data.
Figure 2. Run the application to see the DataGrid control populated with employee data.
 
  1. Return to the ex4_04_starter.mxml file in Flash Builder.
  1. Between the DataGrid control tags, create a columns block.
<s:DataGrid dataProvider="{employeeList}" > <s:columns> </s:columns> </s:DataGrid>
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.
 
  1. Within the columns block, add an ArrayList block.
<s:DataGrid dataProvider="{employeeList}"> <s:columns> <s:ArrayList> </s:ArrayList> </s:columns> </s:DataGrid>
  1. Within the columns block, add a DataGridColumn control instance.
<s:DataGrid dataProvider="{employeeList}"> <s:columns> <s:ArrayList> <s:GridColumn/> </s:ArrayList> </s:columns> </s:DataGrid>
  1. To the GridColumn control, add the dataField property with a value of lastName and the headerText property with a value of Name.
<s:GridColumn dataField="lastName" headerText="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.
 
  1. 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.
<s:DataGrid dataProvider="{employeeList}" > <s:columns> <s:ArrayList> <s:GridColumn dataField="lastName" headerText="Name"/> <s:GridColumn dataField="hireDate" headerText="Hire Date"/> </s:ArrayList> </s:columns> </s:DataGrid>
  1. 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.
     
Run the application to see the DataGrid control populated with only employee last name and hire date.
Figure 3. Run the application to see the DataGrid control populated with only employee last name and hire date.
 

 
Format data in a DataGrid control

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.
private function employeeName():String { }
  1. For the function, create the argument item and data type it to the Object class.
private function employeeName(item:Object):String { }
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.
 
  1. For the function, create another argument named column and data type it to the GridColumn class.
private function employeeName(item:Object, column:GridColumn):String { }
This second argument references the name of the GridColumn instance that calls this function.
 
  1. Within the function, use the return keyword to return the item.firstName value and the item.lastName value separated by a space.
private function employeeName(item:Object, column:GridColumn):String { return item.firstName + " " + item.lastName; }
  1. Locate the DataGrid control.
  2. From the first GridColumn control, remove the dataField property and value.
  3. To the first GridColumn control, add the labelFunction property with a value of employeeName.
<s:DataGrid dataProvider="{employeeList}"> <s:columns> <s:ArrayList> <s:GridColumn labelFunction="employeeName" headerText="Name"/> <s:GridColumn dataField="hireDate" headerText="Hire Date"/> </s:ArrayList> </s:columns> </s:DataGrid>
  1. 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).
     
Run the application to see the employee first and last names in the first column.
Figure  4. Run the application to see the employee first and last names in the first column.
 
  1. Return to the ex4_04_starter.mxml file in Flash Builder.
  2. 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.
     
  3. Within the typicalItem block, add an instance of the DataItem class.
<s:typicalItem> <s:DataItem/> </s:typicalItem>
  1. To the DataItem instance, reference the firstName and set its value to Christopher.
<s:DataItem firstName="Christopher"/>
  1. 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.
<s:DataItem firstName="Christopher" lastName="Winchester"/>
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.
 
  1. To the DataItem instance, reference the hireDate and set its value to 12/31/2011.
  2. 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.
     
The employee names and hire dates are fully visible in the DataGrid.
Figure  5. The employee names and hire dates are fully visible in the DataGrid.
 
  1. Return to Flash Builder.
  2. Locate the Declarations block.
  3. Within the Declarations block, below the HTTPService component, create a DateFormatter tag.
<fx:Declarations> <s:HTTPService id="employeeService" url="data/employees.xml" result="employeeList=employeeService.lastResult.employees.employee"/> <s:DateTimeFormatter/> </fx:Declarations>
The DateTimeFormatter class affects the formatting of a visual element but is not a visual element itself, so is declared within the Declarations block.
 
  1. To the DateTimeFormatter tag, assign employeeDateFormatter as the id and d-MMM-yy as the dateTimePattern.
<s:DateTimeFormatter id="employeeDateFormatter" dateTimePattern="d-MMM-yy"/>
  1. Within the Script block, below the vemployeeName() function, create a private function named dateFormat and assign its return type to the String class.
private function dateFormat():String { }
  1. For the function, create a parameter named item and data type it to the Object class.
private function dateFormat(item:Object):String { }
  1. For the function, create another parameter named column and data type it to the GridColumn class.
private function dateFormat(item:Object, column:GridColumn):String { }
  1. 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.
private function dateFormat(item:Object,column:GridColumn):String { return employeeDateFormatter.format(item.hireDate); }
  1. Locate the DataGrid control.
  2. To the second GridColumn tag, add the labelFunction property with a value of dateFormat.
<s:DataGrid dataProvider="{employeeList}" width="200"> <s:columns> <s:ArrayList> <s:GridColumn headerText="Name"/> <s:GridColumn dataField="hireDate" headerText="Hire Date" labelFunction="dateFormat"/> </s:ArrayList> </s:columns> </s:DataGrid>
  1. 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.
 
Run the application to see the formatted date.
Figure 6. Run the application to see the formatted date.
 

 
Create a reusable label function

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].
private function dateFormat(item:Object,column:GridColumn):String { return employeeDateFormatter.format(item [column.dataField]); }
  1. 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.
     

 
Apply the alternatingRowColors property

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.
<s:DataGrid dataProvider="{employeeList}" alternatingRowColors="[#FFFFFF, #CCCCCC]">
  1. 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).
 
The rows of the DataGrid display alternating colors.
Figure 7. The rows of the DataGrid display alternating colors.
 
In this exercise you used the DataGrid control to display employee data and configured and formatted the control's columns and data.
 

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights


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.