Macromedia flex builder-using flex builder 用户手册

72

Chapter 2:  Flex Builder Tutorials

1.

Open the CartView.mxml file located in the fbBindings folder.

2.

In Code view, enter the following code after the opening 

<mx:Panel>

 tag:

<mx:Script>

var dataObject:ShoppingCart;

</mx:Script>

The variable declaration creates a property of the CartView component. You want to use this 
property in the 

<CartView>

 tag in the flexstore.mxml file to pass the shoppingCart object to 

the component.

3.

Locate the 

<mx:DataGrid>

 tag, and add the following property (shown in bold type):

<mx:DataGrid id="dg"

dataProvider="{dataObject.items}" 
...

4.

Locate the 

<mx:Label>

 tag near the end of the file and modify the value of the 

text

 property 

as follows (shown in bold type):

<mx:Label styleName="price"

text="Total: ${dataObject.total}" />

5.

Save the CartView.mxml file.

6.

Switch to your flexstore.mxml file.

7.

In Code view, locate the 

<local:CartView>

 tag, and add the following property (shown in 

bold type):

<local:CartView xmlns:local="*" 

id="cartView" 
dataObject="{cart}"
...

You bind the 

dataObject

 property to the shopping cart object (cart) to pass the object to the 

CartView component.

8.

Save the flexstore.mxml file.

9.

Press F12 to test the file in a browser.

Click any product in the list view or the thumbnail view. The product details should appear in 
the product detail area. Click the Add to Cart button to add the product to the shopping cart. 
Choose another product, change the quantity, and click the Add to Cart button again.