Popa Mihai

With Flex 4 we now have a new way of using two-ways data binding by using the @ character in conjunction with the curly braces syntax. In the previous version of Flex if we needed to have a two way binding we had to specify this in both the tags that were bound together:

	<mx:TextInput id="txt1" text="{txt2.text}"/>
	<mx:TextInput id="txt2" text="{txt1.text}"/>

Now, in Flex 4 we only specify the binding in one tag, and leave the other tag empty. In addition to this you must use the @ character just before you start the curly brace. This is how it works now with Flex 4:

	<s:TextInput id="txt1" text="@{txt2.text}" />
	<s:TextInput id="txt2" />

Here is the complete working example:

<?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" viewSourceURL="srcview/index.html">
 
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" paddingTop="10"/>
	</s:layout>
 
	<s:TextInput id="txt1" text="@{txt2.text}" />
	<s:TextInput id="txt2" />
 
</s:Application>

View Source is enabled in the above example. To view the source files right click on the swf and choose “View Source” from the context menu.

You can create a binding with property declared in ActionScript as a source in a binding. When you do this you will have to tell Flex to perform the copy by using the [Bindable] metadata tag.

In the following example we have two TextInput tags: textInpup_01 and textInpup_02.

textInpup_01 has a change event listener that changes the value of the bindableProperty property. Then textInpup_02 is bound to the bindableProperty property.

     <mx:textinput id="textInpup_01" change="changeEventHandler()"></mx:textinput>
     <mx:textinput id="textInpup_02" text="{bindableProperty}"></mx:textinput>

Read the rest of this entry »

When using the Binding tag you only need to provide two parameters: the source and the destination.

Here is an example that will bind the text properties of two TextInput tags:

     <mx:textinput id="sourceTextInput"></mx:textinput>
     <mx:textinput id="destinationTextInput"></mx:textinput>
     <mx:binding source="sourceTextInput.text" destination="destinationTextInput.text"></mx:binding>

Read the rest of this entry »

A binding is a mechanism that allows you to copy the value of a property from one object to a property in another object automatically.

The object that receives the data is called the destination object and the object that provides the data is called the source object.

In most cases you will want to bind a property of the source object to a property of the destination object, but it is also possible to bind one source to multiple destinations and one destination to multiple sources.
There are three ways you can bind data in Flex:

• Data Binding in Flex using the curly braces syntax in mxml
• Data Binding in Flex using the Bindaing tag
• Data Binding in Flex using the BindingUtils class
• Two-ways data binding in Flex 3
• Two-ways data binding in Flex 4 using the @ character

You can also bind to a property defined with ActionScript, but to do this you will have to use the [Bindable] metadata tag before the property declaration.