Flex 3 SDK Vs. Flex 4 SDK – Part 4 – Two-way data binding

In previous posts in the series we discussed namespaces, an introduction to the new Spark components architecture and the new mxml tags introduced with Flex 4.
This post is all about data binding, and two-way data binding new to Flex 4 specifically.

Basically, data binding is like taking a piece of string and tying each end to an object, so that when the data in one object is modified, the modified data also applies to the other object. The benefits are obvious – an easy way to pass data between different layers of the application or an easy way to catch an event with a single handler and have that handler update more than one object are a few examples.

As the string analogy above implies, data binding requires source and target objects. But it also needs something that triggers the copy from the source to the target, and that is called the triggering event. This is achieved by the source object dispatching the triggering event when the source property changes.

In Flex 3 two-way data binding was possible, but was also a bit of a hassle. Flex 4 provides some ways which are a bit easier to use, which are:

1. inline declaration, using the @{bindable property} syntax.

//Flex 3
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:TextInput id="t1" text="{t2.text}"/>
   <mx:TextInput id="t2" text="{t1.text}"/>
</mx:Application>

//Flex 4
<s:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <s:TextInput id="t1" text="@{t2.text}"/>
   <s:TextInput id="t2"/>
</s:Application>

2. <fx:Binding> tag.

//Flex 3
<mx:Binding source="a.property" destination="b.property"/>
<mx:Binding source="b.property" destination="a.property"/>

//Flex 4
<fx:Binding source="a.property" destination="b.property" twoWay="true"/>

Note, that two-way data binding is not supported for:
1. Style properties
2. Effect properties
3. The request property of the HttpService, RemoteObject, and WebService classes
4. The arguments property of the RemoteObject class.

You can find more information about data binding here.

Back to the series home page