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” 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.
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.
Summary of Contents for Flex Builder
Page 1: ...Using Flex Builder...
Page 116: ...116 Chapter 4 Building a Flex User Interface Visually...
Page 144: ...144 Chapter 6 Working with Data...
Page 154: ...154 Appendix A Basic Flex Concepts...