After you establish an object model, you need to consider what types of Flex component to use for each object in the model. For simple visual objects that use standard Flex user-interface components, you can create an MXML component. For nonvisual objects, or to modify the behavior of a visual component, you can create an ActionScript component. For complex visual objects, you can create a SWC component in Macromedia Flash MX.
For more information about MXML components, see Building an Application with Multiple MXML Files in Developing Flex Applications. For more information about ActionScript components, see Creating ActionScript Components in Developing Flex Applications. For more information about SWC components, see Developing Flex Applications.
When you have a plan for the types of Flex components to use in your object model, you must start thinking about a messaging strategy for acquiring and manipulating application-specific data. You need a way for the objects in the application to send and receive data. To solve this problem in the Flex Store application, many of the objects contain data object properties, which are ActionScript properties or <mx:Model> tags that you use to pass data into the objects.
This following sections describe the component types and messaging strategy of the Flex Store application.
The following figure shows the component type of each object in the object model of the Flex Store application. The Data Object boxes show which objects contain data object properties.
The FlexStore object, the top-level application object, is an MXML file. It contains standard MXML tags that declare most of the application, and custom MXML tags that declare custom objects. For the custom tags, this file declares them to use the default namespace.
The FlexStore object also contains some application-level ActionScript code that helps glue the application together, and Cascading Style Sheet (CSS) definitions. The ActionScript code and CSS definitions are contained in external files to promote modularity and reusability.
The catalog object is declared in an <mx:Model> tag in the FlexStore.mxml file because it is a simple object with the sole function of data storage, and it requires no data typing. Compare this with the ShoppingCart object, which is also in the model tier, but stores and manipulates data. The data for the catalog object is defined in an external XML file, catalog.xml, which is accessed using a named web service and the following <mx:WebService> data service tag:
<mx:WebService id="catalogWS" serviceName="FlexStoreCatalogWS">
<mx:operation
name="getList"
result="selectedItem=catalogWS.getList.result[0]"
/>
</mx:WebService>
Data could just as easily be accessed using an HTTP service or a server-side Java object that retrieves data from a remote data source.
The following example shows the catalog object declared in the FlexStore.mxml file:
<mx:Model id="catalog">
{catalogWS.getList.result}
</mx:Model>
The following example shows a product definition in the catalog.xml file:
<catalog> <name>USB Watch</name> <description>So, you need to tell the time of course, but you also need a way to carry your valuable data with you at all times (you know - your MP3 files, favorite images, your ThinkGeek shopping list). This watch can handle the mission for you and do it in style. It can store up to 256 MB of data.</description> <price>129.99</price> <image>assets/products/usbwatch.jpg</image> <thumbnail>assets/products/usbwatch_sm.jpg</thumbnail> ... </catalog>
The ShoppingCart object is defined in an ActionScript class because it performs data storage and data manipulation. An ActionScript class is the appropriate component type because it can contain both properties and methods.
The ShoppingCart class contains the following properties:
var items
var total
The class contains the following methods:
addItem()
getItemCount()
getTotal()
removeItemAt()
The component is declared in the FlexStore.mxml file using a <ShoppingCart> tag.
The CartView 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 CartView component is a Panel container.
The CartView component uses a <mx:Script> tag to include the ActionScript file CartView_script.as. That file contains the following property definitions:
var selectedItem
var dataObject
The dataObject property stores ShoppingCart data.
The CartView_script.as file also contains the following method definitions:
dataGridChange(selectedItem)
removeItem()
The CartView.mxml component contains an <mx:DataGrid> tag for displaying ShoppingCart items along with several other user-interface components and an <mx:NumberFormatter> tag for displaying prices in a specific format. The component is declared in the ShoppingCart.mxml file using a <CartView> tag.
The following example shows how the value of the dataObject property is set to the cart ShoppingCart object by using curly braces ({ }) to bind data:
...
<ShoppingCart id="cart"/>
...
<CartView id="cartView" dataObject="{cart}"
width="370" height="{549-productDetail.height}"
itemSelected="selectedItem=event.target.selectedItem"
checkOut="changeView('checkout')" vScrollPolicy="off"/>
The ProductThumbnail object defines a custom cell renderer used by the ThumbnailView object. You use a cell renderer to manipulate and display custom cell content for each of row of a list-based component. In this example, you use ProductThumbnail to define an image and two labels in each cell of a TileList control.
The ProductThumbnail component contains the following properties defined in an <mx:Script> tag:
var _filteredOut
var dataObject
The _filteredOut property indicates whether to dim a ProductThumbnail's appearance based on the currently selected price range. The dataObject property stores catalog data.
The component contains the following methods defined in an <mx:Script> tag:
setValue()
set filteredOut()
hideWhenChanging()
The following example from the ThumbnailView.mxml file shows how the dataObject property is set to the catalog data for the currentItem in the catalog object, and the cell renderer is set to the ProductThumbnail object:
...
<mx:Script>
<![CDATA[
var dataObject;
var selectedItem;
]]>
</mx:Script>
...
<mx:TileList id="myTile" dataProvider="{dataObject}"
cellRenderer="ProductThumbnail"
width="100%" height="100%"
itemWidth="120" itemHeight="116"
borderStyle="none"
dragEnabled="true"
change="selectedItem=dataObject[myTile.selectedIndex];
dispatchEvent({type:'change'})
"/>
The component is declared in the ThumbnailView.mxml file using a <ProductThumbnail> tag.
The ThumbnailView 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 ThumbnailView component is a VBox container.
The component is declared in the FlexStore.mxml file using a <ThumbnailView> tag.
The component contains the following properties defined in an <mx:Script> tag:
var selectedItem
var dataObject
var min
var max
The dataObject property stores catalog data.
The component contains the following methods defined in an <mx:Script> tag:
filter()
sort()
unselect()
The component contains an <mx:TileList> tag for displaying a set of ProductThumbnail components in a grid format.
The following example from the FlexStore.mxml file shows how the dataObject property is set to the catalog.product property. Notice that you reference the custom ThumbNailView object using the default namespace.
<ThumbnailView id="thumbView"
label="Product Catalog"
dataObject="{catalog}"
change="selectedItem=event.target.selectedItem"
/>
The ProductDetail 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 ProductDetail component is a VBox container.
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"/>
...
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}"/>
Version 1.5
Send me an e-mail when comments are added to this page | Comment Report
Current page: http://livedocs.adobe.com/flex/15/flex_docs_en/00000079.htm