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}"/>

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

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


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

  1. […] Namespaces 2. Introducing components 3. Language tags 4. Two-way data binding Possibly related posts: (automatically generated)Adobe Flex 4 SDK out of beta!!Flash Builder 4 – […]

  2. […] This post was mentioned on Twitter by FlexBlackBelt, FlexBlackBelt. FlexBlackBelt said: Flex 3 SDK Vs. Flex 4 SDK post on two way data binding published http://tinyurl.com/3434rzp […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: