User Guide

72 Chapter 2: Flex Builder Tutorials
1.
Open the CartView.mxml file located in the fbBindings folder.
2.
In Code view, enter the following code after the opening <mx:Panel> tag:
<mx:Script>
var dataObject:ShoppingCart;
</mx:Script>
The variable declaration creates a property of the CartView component. You want to use this
property in the
<CartView> tag in the flexstore.mxml file to pass the shoppingCart object to
the component.
3.
Locate the <mx:DataGrid> tag, and add the following property (shown in bold type):
<mx:DataGrid id="dg"
dataProvider="{dataObject.items}"
...
4.
Locate the <mx:Label> tag near the end of the file and modify the value of the text property
as follows (shown in bold type):
<mx:Label styleName="price"
text="Total: ${dataObject.total}" />
5.
Save the CartView.mxml file.
6.
Switch to your flexstore.mxml file.
7.
In Code view, locate the <local:CartView> tag, and add the following property (shown in
bold type):
<local:CartView xmlns:local="*"
id="cartView"
dataObject="{cart}"
...
You bind the dataObject property to the shopping cart object (cart) to pass the object to the
CartView component.
8.
Save the flexstore.mxml file.
9.
Press F12 to test the file in a browser.
Click any product in the list view or the thumbnail view. The product details should appear in
the product detail area. Click the Add to Cart button to add the product to the shopping cart.
Choose another product, change the quantity, and click the Add to Cart button again.