User Guide
Tutorial: Building custom components with Flex Builder 37
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.