Architecting Flex Applications

Implementation

Using Flex, you can create the classes for your application using MXML, the Flex XML-based markup language, or Flash ActionScript 2.0. ActionScript 2.0 is a fully object-oriented and strongly typed programming language. It is compliant with the ECMA-262 standard and will be familiar to Java and C# developers.

You typically use MXML to implement the user interface classes in your application (View), and ActionScript to build the non-visual classes (Model and Controller). Many of the controller classes you need to build your applications are available by default in the Flex class library.

This combination of a tag-based language to create the user interface (View) and a traditional OOP language to create faceless classes (Model or Controller) has emerged as a popular programming model: The same combination exists in Java presentation-tier development between JSPs and JavaBeans. Microsoft Longhorn Markup Language, or XAML, is also based on the same model.

View Classes

ThumbnailView, GridView, ProductDetailView, ShoppingCartView, and CheckoutView are the main user interface classes in the application. They are all built in MXML and represent self-contained components of the application’s user interface.

Using Flex, you can create MXML classes from scratch, or by extending or aggregating existing components. The following example shows the source code for the CartView class. The name you specify for your MXML file defines the class name. For example, to create the CartView class, simply name the source file CartView.mxml.

1  <?xml version="1.0" encoding="utf-8"?>
2  <mx:Panel xmlns:mx="http://www.macromedia.com/2003/mxml" title="Shopping Cart">
3    <mx:Metadata>
4      [Event("checkout")]
5    </mx:Metadata>
6    <mx:Script>
7      var cartData: ShoppingCart;
8    </mx:Script>
9    <mx:NumberFormatter id="price" precision="2"/>
10    <mx:DataGrid id="dg"
11      dataProvider="{cartData.items}"
12      widthFlex="1" heightFlex="1">
13      <mx:columns>
14        <mx:Array>
15          <mx:DataGridColumn columnName="name" headerText="Name"/>
16          <mx:DataGridColumn columnName="qty"  headerText="Qty"/>
17          <mx:DataGridColumn columnName="price" headerText="Price"/>
18        </mx:Array>
19      </mx:columns>
20    </mx:DataGrid>
21    <mx:ControlBar>
22      <mx:Button label="Delete" click="cartData.removeItemAt(dg.selectedIndex);"/>
23      <mx:Button label="Checkout" click="dispatchEvent({type: 'checkout'})"/>
24      <mx:Label styleName="price" text="Total: ${price.format(cartData.total)}"/>
25    </mx:ControlBar>
26	</mx:Panel>

Note that the root node in the MXML file specifies the class you extend. In this case, CartView extends the Panel class (line 2).

CartView has a reference named cartData to a ShoppingCart object (line 8). ShoppingCart is a Model class that represents data in a shopping cart and that provides an API to manipulate the data. I present the source code for the ShoppingCart class in the following section.

The CartView data grid is bound to the shopping cart items in the Model object (line 12).

Model Classes

Catalog, Product, Order, and ShoppingCart represent the Model classes in the application. Because Model classes are faceless by nature, you typically implement them in Action Script.

The following example shows the source code for the ShoppingCart class. ShoppingCart encapsulates shopping cart data and provides an API to manipulate the data.

ShoppingCart.as

class ShoppingCart {
    var items : Array;
    var total : Number = 0;
    function ShoppingCart() {
        items=new Array();
    }
    function addItem(item : Object, qty : Number, index: Number) : Void {
        items.addItemAt(index, {id: item.id, name: item.name, price: item.price, qty: qty});
        total+=parseFloat(item.price)*qty;
    }
    function removeItemAt(index: Number) : Void {
        total-=parseFloat(items[index].price)*items[index].qty;
        items.removeItemAt(index);
    }
    function getTotal() : Number {
        return total;
    }
}

Controller Classes

Web service is a Controller component built into the Flex class library. It provides the plumbing to connect to web services. Another built-in Controller component implicitly used in the application is the Binding class, which sits between the View and the Model components: the Binding class automatically notifies the Views when relevant data changes in the Model component.

Assembling the Application

After implementing your initial components, you start putting the application together by assembling these components. In this case, Flex Store is the main class (the starting point) of the application. The Flex Store class is defined in MXML and aggregates the View components described in the “View Classes” section above.

The following snippet shows the skeleton for the Flex Store class.

flexstore.mxml

1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*">
3   <ShoppingCart id="cart"/>
4   <mx:WebService id="catalogWS" serviceName="FlexStoreCatalogWS">
5      <mx:operation name="getList"/>
6   </mx:WebService>
7   <mx:Model id="catalog">
8      {catalogWS.getList.result}
9   </mx:Model>
10  <mx:HBox>
11     <ThumbnailView id="thumbView"
12        label="Product Catalog"
13        dataObject="{catalog}"
14        change="selectedItem=event.target.selectedItem"/>
15     <mx:VBox widthFlex="1">
16        <ProductDetail id="productDetail"
17           productData="{selectedItem}" 
18           shoppingCart="{cart}"/>
19        <CartView id="cartView" cartData="{cart}"
20           checkOut="changeView('checkout')"/>
21     </mx:VBox>
22   </mx:HBox>
23 </mx:Application>

When you create classes in MXML or Action Script, you can use these classes as tags in your main application file (or in any other component). There is no additional step required to create tags.

For example, to hold the items purchased by the user, you declaratively set up a ShoppingCart in flexstore.mxml (line 3). An instance of the ShoppingCart class (described in the Model Classes section above) is created behind the scenes.

Similarly, the CartView class described in the “View Classes” section above is used as a tag (line 19) to display the contents of the shopping cart.

Page 4 of 6

Previous Page

Next Page