User Guide

36 Chapter 2: Flex Builder Tutorials
4.
With the insertion point still blinking in the VBox container, specify the values for the following
properties in the Attributes panel:
Size > height: 100%
Size > width: 100%
Styles > verticalGap: 0
Note: The “Size > height” expression means the height property is located in the Size category of
the Attributes tab. This convention is used throughout the tutorials.
5.
Insert a DataGrid component to display the product catalog by clicking anywhere in the VBox
container, and clicking the DataGrid button in the Controls category of the Insert bar.
The DataGrid dialog box appears.
6.
Set the dialog box options as follows:
ID: list
Header Text (first row): Name
Header Text (second row): Price
Column Name (first row): name
Column Name (second row): price
The DataGrid dialog box should look similar to the following figure:
Caution: Make sure the column name values exactly match “name” and “price.” Column names
must exactly match the name of the data fields that will be assigned to the DataGrid in the bindings
tutorial.
7.
Click OK.
Flex Builder inserts a DataGrid component in your component file.
8.
Click the DataGrid component and set the following properties in the Attributes tab:
Size > height: 100%
Size > width: 100%