FLEX 4 Bidirectional (two way) Binding
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>
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!