Macromedia flex builder-using flex builder User Manual
66
Chapter 2: Flex Builder Tutorials
•
•
Detect the product in the GridView component
The first task is to modify the GridView component so it can detect when a user clicks a product.
1.
Open the GridView.mxml file located in the fbBindings folder and enter the following tag after
the opening
the opening
<mx:VBox>
tag:
<mx:Metadata>
[Event("change")]
</mx:Metadata>
2.
Locate the
<mx:Script>
tag and add the following variable declaration (shown in bold type):
<mx:Script>
var dataObject;
var selectedItem;
var selectedItem;
</mx:Script>
You want to use this local variable to store the product the user selected.
3.
Locate the
<mx:DataGrid>
tag and add the following property (shown in bold type):
<mx:DataGrid id="list"
dataProvider="{dataObject}"
change="selectedItem=event.target.selectedItem;
dispatchEvent({type:'change'})"
...
change="selectedItem=event.target.selectedItem;
dispatchEvent({type:'change'})"
...
4.
Save the GridView.mxml file.
Detect the product in the ThumbnailView component
You also modify the ThumbnailView component so it can detect when the user clicks a product
and what the product is.
and what the product is.
1.
Open the ThumbnailView.mxml file located in the fbBindings folder and enter the following
tag after the opening
tag after the opening
<mx:VBox>
tag:
<mx:Metadata>
[Event("change")]
</mx:Metadata>
2.
Locate the
<mx:Script>
tag and add the following variable declaration (shown in bold type):
<mx:Script>
var dataObject;
var selectedItem;
var selectedItem;
</mx:Script>
3.
Locate the
<ProductThumbnail>
tag and add the following property (shown in bold type):
<ProductThumbnail id="product"
xmlns="*"
dataObject="{list.currentItem}"
mouseDown="selectedItem=event.target.dataObject;
dispatchEvent({type:'change'})" />
dataObject="{list.currentItem}"
mouseDown="selectedItem=event.target.dataObject;
dispatchEvent({type:'change'})" />
4.
Save the ThumbnailView.mxml file.