44
Flex Builder Tutorials
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” in Using Flex Builder Help.
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>
You want to use this variable as a property of the GridView tag that you inserted in the
flexstore.mxml file to pass the catalog model in the flexstore.mxml file to your custom
component.
Note:
If you use Code hints, 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” in Using Flex Builder Help.
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 product data passed by the flexstore.mxml file is stored in the dataObject variable.
4.
Save the GridView.mxml file.
5.
Switch to the flexstore.mxml file.
Summary of Contents for FLEX-FLEX BUILDER
Page 56: ...56 Flex Builder Tutorials...