Flex 4 Bidirectional Data Binding

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.