Flex 4 New Features: Two-way Data Binding

An article by Stefan Horochovec    4 Comments

Hello friends!

In this post i want to comment on a new feature of Flex 4 SDK is the “two-way data binding”, but what is and what it can help us in everyday life?

But first, what is Data Binding? Data Binding is the action of passing values from one object to another automatically. When an object undergoes a change in his particular property, this change is reflected in some attribute of an object. This object may or may not prove to be the same object that has the first amendment.

In Flex 3.x Data Binding enabled mirroring of information from one object to another but the reverse did not occur automatically, so we were forced to create another Binding, only this time, making the process in reverse, as follows code below:

1
2
3
4
5
6
7
8
9
10

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx:Binding source="fieldA.text" destination="fieldB.text"/>
	<mx:Binding source="fieldB.text" destination="fieldA.text"/>
 
	<mx:TextInput id="fieldA" x="10" y="10"/>
	<mx:TextInput id="fieldB" x="178" y="10"/>
 
</mx:Application>

Obviously that hindered the work of the developer in their day-to-day, and increase the memory consumption of applications.

In Flex 4.0, Adobe has prepared a great surprise to solve this problem – “Two-way Data Binding”.

But how does it work? Simple, by declaring additional twoway the Binding object you can define whether the binding to send and receive changes to the attribute of the source object.

See example below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:mx="library://ns.adobe.com/flex/mx">
 
	<fx:Declarations>
	</fx:Declarations>
 
	<fx:Binding source="fieldA.text" destination="fieldB.text" twoWay="true"/>
 
	<s:TextInput x="10" y="21" id="fieldA"/>
	<s:TextInput x="146" y="21" id="fieldB"/>
 
</s:Application>

Simple, so now any changes on TextInput “fieldB” will be reflected in the TextInput “fieldA” and the same with “fieldA” reflecting on “fieldB”.

You can also make a statement like the example below, using the @ in conjunction with the {}:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:mx="library://ns.adobe.com/flex/mx">
 
	<fx:Declarations>
	</fx:Declarations>
 
	<fx:Binding source="fieldA.text" destination="fieldB.text" twoWay="true"/>
 
	<s:TextInput x="10" y="21" id="fieldA"/>
	<s:TextInput x="146" y="21" id="fieldB"/>
 
	<s:TextInput x="10" y="65" id="fieldC" text="@{fieldD.text}"/>
	<s:TextInput x="150" y="65" id="fieldD"/>
 
</s:Application>

I prefer the first option, using the declaration to a better understanding and ordering the source code.

You can download the projects of this article here.

A hug from Brazil.