Two-way data binding-- By Eugene Kardash

Two-way data binding, aka bidirectional data binding, refers to two components acting as the source object for the destination properties of each other. I.e. if you have a variable defined, and a, let say, input field with this variable bound to text property of the field, when you change the field's text the variable is changed, and when you change the variable, the field's text property is changed. In Flex 3 this is possible using a combination of curly braces and statement. Below is the simple example illustrating this:

01.xml version="1.0" encoding="utf-8"?>

02.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="1024" minHeight="768">

03.

04. <mx:String id="myName"/>

05. <mx:Binding source="nameInput.text" destination="myName" />

06.

07. <mx:TextInput id="nameInput" x="30" y="28"/>

08. <mx:Label x="31" y="68" text="{myName}"/>

09.

10.mx:Application>

In Flex 4 this can be archived much easier, inline using declaration: @{bindable_property}. Code example:

01.xml version="1.0" encoding="utf-8"?>

02.<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

03. xmlns:s="library://ns.adobe.com/flex/spark"

04. xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">

05. <fx:Declarations>

06. <fx:String id="myName"/>

07. fx:Declarations>

08.

09. <s:VGroup width="200" height="67" x="37" y="38">

10. <s:TextInput id="nameInput" text="@{myName}"/>

11. <mx:Spacer height="10"/>

12. <s:SimpleText text="{myName}"/>

13. s:VGroup>

14.

15.s:Application>