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.
Summary of Contents for FLEX BUILDER-USING 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...
