Flex Data Binding

Flex Data Binding enables objects and their values to be bound together so that when a source changes a target automatically gets updated.

Data binding elements:

Source - the object/value we are interested in observing
Target - the object/value we going to copy the source value to
Trigger - the event from the source that triggers the copy from source to target

A Binding event is triggered when a bindable property's value changes.

Here is a very simple example that demonstrates binding in action.

Embed Flex Example

This is the source code for the example. There's not much to it.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
   <mx:TextInput id="input" />
   <mx:Label text="{input.text}" />
</mx:Application>

In the above example, as we type in the TextInput control we are updating its text property. As the TextInput's "text" property changes its new value is automatically copied to the Label's "text" property. This is binding in action.

Using {Binding} in MXML

The curly braces ({}) syntax is an easy way to setup binding for MXML controls. Flex will automatically resolve the object/property inside {} as the source of binding.

   <mx:TextInput id="input" />
   <mx:Label text="{input.text}" />

The binding source is the TextInput's "text" property and the target is the Label's "text" property. The binding is setup for us by Flex because we used the MXML {input.text} notation.

Using <mx:Binding> in MXML

We can also setup binding in MXML using the <mx:Binding> control.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
   <mx:TextInput id="inputSource" />
   <mx:Label id="labelTarget" />
   <mx:Binding source="inputSource.text" destination="labelTarget.text" />
</mx:Application>

The above code has the exact same affect as the previous example. The binding source is the TextInput's "text" property and the target is the Label's "text" property. When the source value changes it is copied to the destination property.

Using BindingUtils in ActionScript

Like most everything in Flex, if you can do it in MXML you can do it in ActionScript.

Use the BindingUtils class in the mx.binding.utils package to setup bindings in ActionScript.

The static bindProperty() method binds a public property of a target (site) object to the public property of a source (host) object.

Example using BindingUtils to setup a binding:

   BindingUtils.bindProperty( target, "targetProperty", source, "sourceProperty" );

BindingUtils.bindProperty() function arguments:

target:Object - the target object the binding sets to
targetProperty:String - the name of the public property in target to set the binding value to
source:Object - the source object the binding sets from
sourceProperty:String - the name of the public property in source to get the binding value from

For clarity, the names of the arguments above have been modified from what you'll see in the ActionScript reference documentation for BindingUtils.

[Bindable] Metadata Tag

[Bindable] is a Metadata tag that declares that an object or property can be the source of binding. As the source of a binding an object will dispatch an event (PropertyChangeEvent) when a watched property's value changes.

Learn more about the [Bindable] metatdata tag...

Binding Events (TODO)

Binding happens asynchronously via events...

TODO: PropertyChangeEvent

Examples

Multiple and Chained Bindings

The below example shows how Flex can handle multiple and chained bindings. Multiple bindings is binding multiple targets to the same source. Chained bindings is having the target of one binding act as the source for another binding.

Embed Flex Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
   <!-- The original source. -->
   <mx:TextInput id="input1" />
   <!-- First target of the original source. -->
   <mx:Label id="label1" text="{input1.text}" />
   <!-- Second target of the original source. Also a source. -->
   <mx:TextInput id="input2" text="{input1.text}" />
   <!-- Target for the second source. -->
   <mx:Label id="label2" text="{input2.text}" />
</mx:Application>

In the above example:

input1 is the source for both mutiple and chained bindings
label1 is a target, bound to input1
input2 is a target, also bound to input1
label2 is a target, bound to input2

All a user has to do is type something in "input1" and all the others will be updated. Note that "label2" is updated as a result of "input2" being updated which is updated as a result of "input1" changing. (input1 -> input2 -> label2)