
Tutorial: Binding components to data with Flex Builder
53
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.
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.
Содержание FLEX-FLEX BUILDER
Страница 56: ...56 Flex Builder Tutorials...