18
Flex Builder Tutorials
9.
Switch to Code view (View > Code) and set column properties of the DataGrid by locating the
two
<mx:DataGridColumn>
tags, and adding the following properties (shown in bold type):
<mx:DataGridColumn headerText="Name" columnName="name"
width="300"
/>
<mx:DataGridColumn headerText="Price" columnName="price"
textAlign="right"
marginRight="4"
/>
You can use Code hints to quickly set these properties. For example, to set the
width
property,
click in the tag before the closing angle bracket, press the Spacebar to display the code hints,
type the letter
w
to quickly select the property, and press Enter. Type
300
to set the value.
10.
Save the component file in the fbComponents folder by selecting File > Save, double-clicking
the fbComponents folder, and naming the component file as follows:
GridView.mxml
In Design View, the completed component should look similar to the following figure if you
select the VBox container:
Note:
The component will scale to fit in the space allotted to it in the flexstore.mxml file.
Summary of Contents for FLEX-FLEX BUILDER
Page 56: ...56 Flex Builder Tutorials...