Home » Adobe, Flex 4

FLEX 4 Bidirectional (two way) Binding

21 August 2010 No Comment

In Flex 2 and 3, with Binding, you could automatically copies the value of a property of a source object to a property of a destination object when the source property changed.
Flex 4 has introduced the Bidirectional Binding (also know as “two-way” binding”) that allows to set two objects as the source and the destination for each other.

To defines a two-way binding you only need to add the at “@” symbol before one of the properties.

In the first example below, the first textInput (with id input1), is binded with the textInput below it, so you can write something in the first component and it will be automatically copied in the second one.
In the second example, both textInput components will work as source and destination, so you can write something inside both components and it will copied in the other one.

<?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" minWidth="955" minHeight="600">
 
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />	
	</s:layout>
 
 
 
	<!--Classic Binding-->
	<s:Label text="Classic Binding"  />
	<s:TextInput id="input1" width="200" />
	<s:TextInput text="{input1.text}"  width="200"/>
 
	<mx:HRule width="300" />
 
	<!--Bidirectional Data Binding-->
	<s:Label text="Bidirectional Binding"  />
	<s:TextInput id="input2" width="200" />
	<s:TextInput text="@{input2.text}"  width="200"/>
 
</s:Application>

Following the result:
fxbidirectionalbinding

To test the script create a new Flex Project, copy and paste the code above and try to write inside all the TextInput components to see how binding works


This sample is part of the training course “Flash Builder 4 and Flex 4″ available only in italian language on my website: http://www.fabiobiondi.com

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.