MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual page 70

Switch to the flexstore.mxml file and in Code view, locate the
14.
and add the following property (shown in bold type):
<local:ProductDetail xmlns:local="*"
id="productDetail"
dataObject="{selectedItem}"
...
You bind the
the variable to the ProductDetail component.
Save the flexstore.mxml file.
15.
Make sure the Flex server is running and then press F12 to test the file in a browser.
16.
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" on page 70
•
"Add products to the shopping cart" on page 71
•
"Display the products in the shopping cart" on page 71
•
"Activate the Delete button" on page 73
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.
Switch to the flexstore.mxml file.
1.
In Code view, add the ShoppingCart class to your application by entering the following tag after
2.
the opening
<mx:Application>
<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.
Save the flexstore.mxml file.
3.
70 Chapter 2: Flex Builder Tutorials
property to the
dataObject
tag:
<local:ProductDetail>
variable to pass the product stored in
selectedItem
tag