MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual page 71

Add products to the shopping cart
The product detail view (ProductDetail component) must not only display details about a
product, it must let the user do the following tasks:
•
Specify the quantity of the displayed product the user wants to add to the shopping cart
•
Add the product and quantity to the shopping cart.
You modify the ProductDetail component so that it adds the displayed product and quantity to
the shopping cart when the user clicks the Add to Cart button.
Switch to the ProductDetail.mxml file.
1.
In Code view, locate the
2.
in bold type):
<mx:Script>
var dataObject:Object;
var shoppingCart;
</mx:Script>
The variable declaration creates a property of the ProductDetail component. You want to use
this property in the
cart object to the component. This object keeps track of items in the shopping cart.
Locate the
3.
<mx:Button>
<mx:Button
label="Add to Cart"
click="shoppingCart.addItem(dataObject, qty.value); qty.value=1;" />
When the user clicks the Add to Cart button, the
adds the product (
Note: The qty identifier is the name of the NumericStepper component that you use to specify a
quantity.
Save the ProductDetail.mxml file.
4.
Switch to your flexstore.mxml file.
5.
In Code view, locate the
6.
in bold type):
<local:ProductDetail xmlns:local="*"
id="productDetail"
dataObject="{selectedItem}"
shoppingCart="{cart}"
...
You bind the
shoppingCart
the ProductDetail component.
Save the flexstore.mxml file.
7.
Display the products in the shopping cart
After using the shoppingCart object to add products to the shopping cart, you can retrieve the
data and use it in the CartView component.
tag and enter the following variable declaration (shown
<mx:Script>
<local:ProductDetail>
tag in the file, and add the following property (shown in bold type):
) and the quantity (
dataObject
<local:ProductDetail>
property to the shopping cart object (cart) to pass the object to
Tutorial: Binding components to data with Flex Builder
tag in the flexstore.mxml file to pass a shopping
method of the shoppingCart object
addItem
) to the shoppingCart object.
qty.value
tag, and add the following property (shown
71