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 

<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;

</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'})"
...

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.

1.

Open the ThumbnailView.mxml file located in the fbBindings folder and enter the following 
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;

</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'})" />

4.

Save the ThumbnailView.mxml file.