You can define a data model in an MXML tag, an ActionScript function, or an ActionScript class. In general, you should use MXML-based models for simple data structures, and use ActionScript for more complex structures and client-side business logic.

You can place an <mx:Model> tag or an <mx:XML> tag in a Flex application file or in an MXML component file. The tag should have an id value, and it cannot be the root tag of an MXML component.

The <mx:Model> tag

The most common type of MXML-based model is the <mx:Model> tag, which is compiled into an ActionScript object of type mx.utils.ObjectProxy, which contains a tree of objects when your data is in a hierarchy, with no type information. The leaves of the Object tree are scalar values. Because models that are defined in <mx:Model> tags contain no type information or business logic, you should use them only for the simplest cases. Define models in ActionScript classes when you need the typed properties or you want to add business logic.

The following example shows an employee model declared in an <mx:Model> tag:

<?xml version="1.0"?>
<!-- Models\ModelsModelTag.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Model id="employeemodel">
        <employee>
            <name>
                <first/>
                <last/>
            </name>
            <department/>
            <email/>
        </employee>
    </mx:Model>    
</mx:Application>

An <mx:Model> child tag with no value is considered null. If you want an empty string instead, you can use a binding expression as the value of the tag, as the following example shows:

<?xml version="1.0"?>
<!-- Models\ModelTagEmptyString.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Model id="employeemodel">
        <employee>
            <name>
                <!--Fill the first property with empty string.-->
                <first>{""}</first> 
                <!--Fill the last property with empty string.-->
                <last>{""}</last> 
            </name>
            <!--department is null-->
            <department/> 
            <!--email is null-->
            <email/> 
        </employee>
    </mx:Model>    
</mx:Application>

The <mx:XML> tag

An <mx:XML> tag represents literal XML data. Setting the format property to e4x creates an XML object, which implements the powerful XML-handling standards defined in the ECMAScript for XML specification (ECMA-357 edition 2) (known as E4X). For backward compatibility, when the format property is not explicitly set to e4x, the type of the object created is flash.xml.XMLNode.

Script-based models

As an alternative to using an MXML-based model, you can define a model as a variable in an <mx:Script> tag. The following example shows a very simple model defined in an ActionScript script block. It would be easier to declare this model in an <mx:Model> tag.

<?xml version="1.0"?>
<!-- Models\ScriptModel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            [Bindable]
            public var myEmployee:Object={
                name:{
                    first:null,
                    last:null
                    },
                department:null,
                email:null
            };
        ]]>
    </mx:Script>   
</mx:Application>

There is no advantage to using a script-based model instead of an MXML-based model. As with MXML-based models, you cannot type the properties of a script-based model. To type properties, you must use a class-based model.

Class-based models

Using an ActionScript class as a model is a good option when you want to store complex data structures with typed properties, or when you want to execute client-side business logic by using application data. Also, the type information in a class-based model is retained on the server when the model is passed to a server-side data service.

The following example shows a model defined in an ActionScript class. This model is used to store shopping cart items in an e-commerce application. It also provides business logic in the form of methods for adding and removing items, getting an item count, and getting the total price. For more information on ActionScript components, see Creating and Extending Adobe Flex 3 Components.

package
{

[Bindable]
public class ShoppingCart {
    public var items:Array = [];

    public var total:Number = 0;

    public var shippingCost:Number = 0;

    public function ShoppingCart() {
    }

    public function addItem(item:Object, qty:int = 1,
        index:int = 0):void {
        items.splice(index, 0, { id: item.id,
        name: item.name,
        description: item.description,
        image: item.image,
        price: item.price,
        qty: qty });
        total += parseFloat(item.price) * qty;
}

    public function removeItemAt(index:Number):void {
        total -= parseFloat(items[index].price) * items[index].qty;
        items.splice(index, 1);
        if (getItemCount() == 0)
        shippingCost = 0;
}

    public function getItemCount():int {
        return items.length;
    }

    public function getTotal():Number {
        return total;
    }
}
}

You declare a class-based model as an ActionScript component tag in an MXML file, as the following example shows:

<local:ShoppingCart id="cart" xmlns:local="*"/>

This component is in the same directory as the MXML file, as indicated by the XML namespace value *. For more information about specifying the location of components, see Creating and Extending Adobe Flex 3 Components.