In the following example, a set of UI control properties act as the binding source for a data model. For more information about data models, see Storing Data.

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

    <!-- Data model stores registration data that user enters. -->
    <mx:Model id="reg">
        <registration>
            <name>{fullname.text}</name>
            <email>{email.text}</email>
            <phone>{phone.text}</phone>
            <zip>{zip.text}</zip>
            <ssn>{ssn.text}</ssn>
        </registration>
    </mx:Model>

    <!-- Form contains user input controls. -->
    <mx:Form>
        <mx:FormItem label="Name" required="true">
            <mx:TextInput id="fullname" width="200"/>
        </mx:FormItem>

        <mx:FormItem label="Email" required="true">
            <mx:TextInput id="email" width="200"/>
        </mx:FormItem>

        <mx:FormItem label="Phone" required="true">
            <mx:TextInput id="phone" width="200"/>
        </mx:FormItem>

        <mx:FormItem label="Zip" required="true">
            <mx:TextInput id="zip" width="60"/>
        </mx:FormItem>

        <mx:FormItem label="Social Security" required="true">       
            <mx:TextInput id="ssn" width="200"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>
The executing SWF file for the previous example is shown below:

Binding a source property to more than one destination property

You can bind a single source property to more than one destination property by using the curly braces ({}) syntax, the <mx:Binding> tag, or the BindingUtils methods in ActionScript. 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>
The executing SWF file for the previous example is shown below:

Binding more than one source property to a destination property

You can bind more than one source property to the same destination property. You can set up one of these bindings by using curly braces, but you must set up the others by using the <mx:Binding> tag, or by using calls to the BindingUtils.bindProperty() method or to the BindingUtils.bindSetter() method.

In the following example, the TextArea control is the binding destination, and both input1.text and input2.text are its binding sources:

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

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

    <mx:TextInput id="input1"/>
    <mx:TextInput id="input2"/>
    
    <mx:TextArea id="myTA" text="{input1.text}"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

If input1.text or input2.text is updated, the TextArea control contains the updated value.

Defining bidirectional bindings

You can define a bidirectional data binding, where the source and destination of two data bindings are reversed, as the following example shows:

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

    <mx:TextInput id="input1" text="{input2.text}"/>
    <mx:TextInput id="input2" text="{input1.text}"/>    
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, both TextInput controls are the source of a data binding expression, and both are a destination. When you modify input1, its value is copied to input2, and when you modify input2, its value is copied to input1.

Flex ensures that bidirectional data bindings do not result in an infinite loop; that is, Flex ensures that a bidirectional data binding is triggered only once when either source property is modified.