MACROMEDIA FLEX BUILDER-USING FLEX BUILDER, Use Manual

Page: 67 / 158

Tutorial: Binding components to data with Flex Builder 67
Retrieve the product selection
After detecting the product selected by the user, you must pass the information from the
GridView and ThumbnailView components to the main application. If the user hasn’t selected a
product yet, you must specify a default selection.
1.
Open the flexstore_script.as file located in the fbBindings folder.
2.
Enter the following variable declaration at the top of the page:
var selectedItem;
You want to use this variable to store the product selected by the user. The variable is
automatically incorporated in the flexstore.mxml file because the ActionScript file is included
in the file.
3.
Save the ActionScript file.
4.
Switch to the flexstore.mxml file.
5.
In Code view, assign the selected product to the
selectedItem
variable by locating the
<local:GridView>
tag and adding the following property (shown in bold type):
<local:GridView xmlns:local="*"
id="gridView"
dataObject="{catalog}"
change="selectedItem=event.target.selectedItem" />
When a change is detected in the GridView component—for example, when the user clicks a
product in the catalog—the selected product is assigned to the
selectedItem
variable.
6.
Locate the
<local:ThumbnailView>
tag and add the following property (shown in bold type):
<local:ThumbnailView xmlns:local="*"
id="thumbView"
dataObject="{catalog}"
change="selectedItem=event.target.selectedItem" />
7.
Assign the default product to the
selectedItem
variable by locating the
<mx:WebService>
tag
and adding the following property (shown in bold type) in the
<mx:operation>
child tag:
<mx:WebService id="catalogWS" serviceName="FlexStoreCatalogWS">
<mx:operation name="getList"
result="selectedItem=catalogWS.getList.result[0]" >
</mx:operation>
</mx:WebService>
The first product in the catalog (
getList.result[0]
) is assigned to the
selectedItem
variable so it can be displayed in the ProductDetail component when the user hasn’t selected a
product in the catalog yet.
8.
Save the flexstore.mxml file.