Binding data with the <mx:Binding> tag -- Flex 2.01

You can use the <mx:Binding> tag as an alternative to the curly braces syntax. When you use the <mx:Binding> tag, you provide a source property in the <mx:Binding> tag's source property and a destination property in its destination property. This is equivalent to using the curly braces syntax.

In contrast with the curly braces syntax, you can use the <mx:Binding> tag to completely separate the view (user interface) from the model. The <mx:Binding> tag also lets you bind different source properties to the same destination property because you can specify multiple <mx:Binding> tags with the same destination.

In the following example, the properties of user interface controls are bound to the myEmployee data model using <mx:Binding> tags:

<?xml version="1.0"?>
<!-- binding/BindingTags.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- The myEmployee data model. -->
    <mx:Model id="myEmployee">
        <Employee>
            <name>
                <first/>
                <last/>
            </name>
            <department/>
            <email/>
        </Employee>
    </mx:Model>

    <!-- Properties of user interface controls are bound to the
        myEmployee data model using <mx:Binding> tags. -->
    <mx:Binding source="firstName.text" 
        destination="myEmployee.name.first"/>
    <mx:Binding source="lastName.text" 
        destination="myEmployee.name.last"/>
    <mx:Binding source="department.text" 
        destination="myEmployee.department"/>
    <mx:Binding source="email.text" 
        destination="myEmployee.email"/>

    <!-- Form contains user input controls. -->
    <mx:Form label="Employee Information">
        <mx:FormItem label="First Name">
            <mx:TextInput id="firstName"/>
        </mx:FormItem>
        <mx:FormItem label="Last Name">
            <mx:TextInput id="lastName"/>
        </mx:FormItem>
        <mx:FormItem label="Department">
            <mx:TextInput id="department"/>
        </mx:FormItem>
        <mx:FormItem label="Email Address">
            <mx:TextInput id="email"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>

Subtopics

Using ActionScript expressions in Binding tags

The source property of an <mx:Binding> tag can contain curly braces. When there are no curly braces in the source property, the value is treated as a single ActionScript expression. When there are curly braces in the source property, the value is treated as a concatenated ActionScript expression. The <mx:Binding> tags in the following example are valid and equivalent to each other:

<?xml version="1.0"?>
<!-- binding/ASInBindingTags.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            public function whatDogAte():String {
                return "homework";
            }
        ]]>
    </mx:Script>

    <mx:Binding 
        source="'The dog ate my '+ whatDogAte()" 
        destination="field1.text"/>
    <mx:Binding 
        source="{'The dog ate my '+ whatDogAte()}" 
        destination="field2.text"/>
    <mx:Binding 
        source="The dog ate my {whatDogAte()}" 
        destination="field3.text"/>

    <mx:TextArea id="field1"/>
    <mx:TextArea id="field2"/>
    <mx:TextArea id="field3"/>
</mx:Application>

The source property in the following example is not valid because it is not an ActionScript expression:

<mx:Binding source="The dog ate my homework" destination="field1.text"/>

Binding more than one source property to a destination property

You can bind more than one source property to the same destination property by using multiple <mx:Binding> tags that specify the same destination but different sources, or by using the combination of binding expressions in curly braces and <mx:Binding> tags. You cannot do this with just the curly braces syntax.

In the following example, the data model field thing1.part is the destination, and both input1.text and input2.text are its sources. If input1.text or input2.text is updated, thing1.part contains the updated value.

<?xml version="1.0"?>
<!-- binding/BindMultSources.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Model id="thing1">
        <data>
            <part>{input1.text}</part>
        </data>
    </mx:Model>

    <mx:Binding source="input2.text" destination="thing1.part"/>

    <mx:TextInput id="input1"/>
    <mx:TextInput id="input2"/>
    
    <mx:TextArea text="{thing1.part}"/>
</mx:Application>

Binding a source property to more than one destination property

You can bind a single source property to more than one destination property. In the following example, a TextInput control's text property is bound to properties of two data models, and the data model properties are bound to the text properties of two Label controls.

<?xml version="1.0"?>
<!-- binding/BindMultDestinations.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Model id="mod1">
        <data>
            <part>{input1.text}</part>
        </data>
    </mx:Model>

    <mx:Model id="mod2">
        <data>
            <part>{input1.text}</part>
        </data>
    </mx:Model>

    <mx:TextInput id="input1" text="Hello" />

    <mx:Label text="{mod1.part}"/>
    <mx:Label text="{mod2.part}"/>
</mx:Application>