Flex 4 Bidirectional Data Binding

November 18, 2009By 7 Comments

One cool feature that really simplifies things in Flex 4 is the new way to achieve bidirectional or two-way data binding. Bidirectional data binding basically allows you to use a property as both a source and destination for a value. You use the @ symbol outside of your curly braces that you would normally use for binding. So for instance in the following code snippet, the properties on ‘contact’ (bindable value object) are both displayed and stored as they are changed:

<mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%">
	<mx:FormItem label="Name:">
		<s:TextInput id="nameTxt" text="@{contact.name}"/>
	</mx:FormItem>
	<mx:FormItem label="Address:">
		<s:TextInput id="address" text="@{contact.address}"/>
	</mx:FormItem>
	<mx:FormItem label="City:">
		<s:TextInput id="city" text="@{contact.city}"/>
	</mx:FormItem>
	<mx:FormItem label="State:">
		<s:TextInput id="state" text="@{contact.state}"/>
	</mx:FormItem>
	<mx:FormItem label="Zip:">
		<s:TextInput id="zip" text="@{contact.zip}" maxChars="5"/>
	</mx:FormItem>
	<mx:FormItem>
		<s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event)"/>
	</mx:FormItem>
</mx:Form>

In Flex 3 we need to explicitly save those properties in the submit button click handler for instance to ensure the inputs were saved. There is also a way to do bidirectional binding in Flex 3 using either a combination of curly braces, statements or using the mx.binding.utils.BindingUtils.bindProperty() method, but the shorthand notation introduced in Flex 4 really simplifies things and helps us pass our data between application layers automatically and effortlessly. You do need to make sure that your source and destination types are the same. And one more thing to note if it’s not already obvious is that using data binding in Flex does not come without a cost. When any type of data binding is done in Flex, code is generated to throw events and other processing occurs behind the scenes to make this happen, so if performance is a big concern, be wary of this. Specific details about this new feature can be found here.

I also recently added a more extensive sample of how this is done to Tour de Flex. You can find it under the Flex 4 | Coding Techniques section of the tree (sample 2), or here in the Tour de Flex web version.

Filed in: Adobe FlexFlex 4 Tags:

About the Author ()

Comments (7)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. Flex 4 Bidirectional Data Binding » 空想小築 | January 6, 2011
  1. Mutiny64 says:

    per the Adobe Design spec, there are supposed to be 2 notations. I currently don’t see the mxml notation working in Beta 2

    http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=flex+4+two+way+binding

    The two ways to specify a two-way data binding are:

    1) inline declaration using the syntax, @{bindable_property}
    2) with MXML,

    • devgirl says:

      Hi there, I just tried the two-way binding using the MXML syntax with my Flex 4 build (13518 – which is later than the Beta 2 SDK) and it seems to work fine. I used the following code as a test, hope this helps!

      <?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/halo" minWidth="1024" minHeight="768">
      
      	<fx:Binding source="text1.text" destination="text2.text" twoWay="true" />
      
      	<s:HGroup horizontalCenter="0" verticalCenter="0">
      		<s:TextInput id="text1" />
      		<s:TextInput id="text2" />
      	</s:HGroup>
      
      </s:Application>
      
  2. Ribeiro says:

    If the Contact class have a property that is not a string, how to proceed?
    Currently it causes “Error: Implicit coercion of a value of type String to an unrelated type…”

  3. Atul Singh Parihar says:

    See this one ………..I hope help this one………

    http://livedocs.adobe.com/flex/3/html/help.html?content=databinding_5.html

  4. Sumit Arora says:

    Is there any way to use thison combobox.

Leave a Reply