MACROMEDIA FLEX BUILDER-USING FLEX BUILDER, Руководство пользователя

Страница: 71 / 158

Tutorial: Binding components to data with Flex Builder 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.
1.
Switch to the ProductDetail.mxml file.
2.
In Code view, locate the
<mx:Script>
tag and enter the following variable declaration (shown
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
<local:ProductDetail>
tag in the flexstore.mxml file to pass a shopping
cart object to the component. This object keeps track of items in the shopping cart.
3.
Locate the
<mx:Button>
tag in the file, and add the following property (shown in bold type):
<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
addItem
method of the shoppingCart object
adds the product (
dataObject
) and the quantity (
qty.value
) to the shoppingCart object.
Note: The qty identifier is the name of the NumericStepper component that you use to specify a
quantity.
4.
Save the ProductDetail.mxml file.
5.
Switch to your flexstore.mxml file.
6.
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}"
shoppingCart="{cart}"
...
You bind the
shoppingCart
property to the shopping cart object (cart) to pass the object to
the ProductDetail component.
7.
Save the flexstore.mxml file.
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.