Macromedia flex builder-using flex builder User Manual

70

Chapter 2:  Flex Builder Tutorials

14.

Switch to the flexstore.mxml file and in Code view, locate the 

<local:ProductDetail>

 tag 

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

<local:ProductDetail xmlns:local="*" 

id="productDetail"
dataObject="{selectedItem}"
...

You bind the 

dataObject

 property to the 

selectedItem

 variable to pass the product stored in 

the variable to the ProductDetail component.

15.

Save the flexstore.mxml file.

16.

Make sure the Flex server is running and then press F12 to test the file in a browser.

Click any product in either the list view or thumbnail view. The product details should appear 
in the product detail view (the ProductDetail component) on the right side of the catalog.

Bind the shopping cart component

The shopping cart view (the CartView component) should display the contents of the shopping 
cart as the user adds products to it. The spec says that it should display the following information: 
the name of the items added to the shopping cart, the quantity of each item, and the price of each 
item. The total price of all the products in the cart must be displayed, as well as a button to delete 
items in the cart and a button to let the user proceed to the checkout pages.

Note: The Checkout button is not activated in this tutorial.

In this part of the tutorial, you complete the following tasks:

•

•

•

•

Add the shopping cart logic

You need a way to keep track of the items in the shopping cart. A member of your team writes an 
ActionScript class to perform the task. The class is defined in a file called ShoppingCart.as, which 
is provided in this tutorial.

1.

Switch to the flexstore.mxml file.

2.

In Code view, add the ShoppingCart class to your application by entering the following tag after 
the opening 

<mx:Application>

 tag: 

<ShoppingCart id="cart" xmlns="*" />

You can open the ShoppingCart.as file in Flex Builder to view the class members. 
ShoppingCart is a model class created in ActionScript that defines the functions you need to 
track the items that are in the cart, how many there are, and the total price for the items.

3.

Save the flexstore.mxml file.