User Guide
78 Chapter 4: Architecting Flex Applications
The component contains the following property definitions in an <mx:Script> tag:
• var shoppingCart
• var dataObject
The shoppingCart property stores ShoppingCart data.
The component contains MXML tags for displaying product details. It also contains an
<mx:NumericStepper> tag for selecting product quantity, and an <mx:Button> tag for adding
items to the ShoppingCart.
The following example from the FlexStore.mxml file shows how the
shoppingCart property is
set to the
cart ShoppingCart object. Notice that you reference the custom ShoppingCart and
ProductDetail objects using the default namespace.
...
<ShoppingCart id="cart"/>
...
<ProductDetail id="productDetail" dataObject="{selectedItem}"
shoppingCart="{cart}" width="370" height="330" vScrollPolicy="off"/>
...
Checkout
The Checkout object is defined in an MXML component because it is a visual object that you can
create using MXML tags and a small amount of ActionScript code. The top-level tag of the
Checkout component is a VBox container.
The component uses an
<mx:Script> tag to include the ActionScript file Checkout_script.as.
The Checkout_script.as file contains the following property definitions:
• var cartData
• var months
• var years
• var shippingCost
The
cartData property stores ShoppingCart data.
The component uses the
months, years, and shippingCost properties to store credit card data.
The Checkout_script.as file contains the following method definition:
confirmOrder()
The Checkout component contains an <mx:Form> tag for entering order information, and an
<mx:Model id="order"> tag for storing order information. It also contains data formatter tags
and data validator tags.
The following example from the FlexStore.mxml file shows how the
shoppingCart property is
set to the
cart ShoppingCart object. Notice that you reference the custom ShoppingCart and
Checkout objects using the default namespace.
...
<ShoppingCart id="cart"/>
...
<Checkout id="checkoutView" cartData="{cart}"/>