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%
Summary of Contents for FLEX BUILDER-USING FLEX BUILDER
Page 1: ...Using Flex Builder...
Page 116: ...116 Chapter 4 Building a Flex User Interface Visually...
Page 144: ...144 Chapter 6 Working with Data...
Page 154: ...154 Appendix A Basic Flex Concepts...
