User Guide

Tutorial: Binding components to data with Flex Builder 63
5. Click the final WebServer event (onResult) and inspect the information in the right pane.
If the application successfully called the web service when it was initialized, then the data for
the product catalog should appear in the right pane. Note how the Network Monitor converts
the raw data passed between the server and the application into ActionScript. Scroll down to
view the catalog data passed to the application.
This confirms that the web service is called when the application is initialized and the catalog
data is passed to the application.
6. Disable the Network Monitor for now by clicking the Enable Flex Network Monitor checkbox
again.
For more information on using the Network Monitor, see “Debugging applications by
monitoring interactions with the server” on page 91.
Bind the GridView component to the data
After specifying where and when to retrieve the data, and then verifying that the data is passed to
the application, you can use the data to populate the GridView component.
1. Open the GridView.mxml file located in the fbBindings folder.
2. In Code view, enter the following script block after the opening <mx:VBox> tag to declare a
variable called dataObject:
<mx:Script>
var dataObject;
</mx:Script>
By creating a variable called dataObject, you create a property for the component. You can use
this new property in the GridView tag to pass data to the GridView component. For example,
you can write the following tag in another MXML file:
<local:GridView xmlns:local="*" dataObject="somevalue"...>
The value is passed to the component and stored in the dataObject variable.
Note: If you use Code hints to write this script block, Flex Builder automatically inserts a CDATA
block for you. You can declare the variable in this block. For more information on CDATA blocks,
see “About ActionScript files in Flex applications” on page 147.
3. Locate the <mx:DataGrid> tag in the file and add the following property (shown in bold type):
<mx:DataGrid id="list"
dataProvider="{dataObject}"
...
The data stored in the dataObject variable is used in the DataGrid control.