Bidirectional (two-way) data binding in Flex 4
I use data binding a lot when writing Flex applications. One of the new features in Flex 4 is bidirectional, or two-way data binding. This blog post shows you a simple example that demonstrates the difference between one-way and two-way data binding syntax.
The first example is the most commonly used data binding scenario. It uses the curly braces syntax. In the example a String variable myName binds to a TextInput field. However if you change the value in the input field, the underlying String variable is not changed. This is because this kind of data binding is only one-way. There is a way to achieve bidirectional data binding in Flex 3 and you can find more info in this article, but I will not go into detail about that in this post.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:String id="myName">Alain</mx:String>
<mx:TextInput id="nameInput" text="{myName}"/>
</mx:Application>
For example in Flex 3 the DataGrid component had two-way data binding enabled if you made it editable. In Felx 4 it has become very easy to achieve bidirectional binding. The following example is based on the same scenario as the previous one, only now the underlying String value is updated.
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<fx:String id="myName"/>
</fx:Declarations>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:TextInput id="nameInput" text="@{myName}"/>
<s:SimpleText text="{myName}"/>
</s:Application>
That's basically it. The @{} syntax makes sure that the myName variable is changed and because the SimpleText label is also binded to the myName variable the value is also updated.
These are pretty simple examples, but you can find more information about the Flex 4 data binding techniques in the following articles:
Lifestream
-
Samsung GALAXY Tab Showcase site http://galaxytab.samsungmobile.com [hufkens]
-
-
-
Video: Robocop - the musical! http://tumblr.com/xnnht3iv9 [hufkens]
-
I scored 190 points in Fruit Ninja's Zen Mode on iPhone, with a delicious 5 fruit combo! http://www.fruitninja.com http://bit.ly/9XarQ6 [hufkens]
-
Photo: Introducing the iWatch (iPod Nano + Wristband) http://tumblr.com/xnnhoi7xj [hufkens]
-
Giant Duck in Hasselt http://flic.kr/p/8ygsZs [hufkens]
-
Shared Giant Duck.
-
Go nuts for your favorite bar! www.duyvis.be [hufkens]
-
Photo: Batman vs. Penguin http://tumblr.com/xnnhlccjz [hufkens]
-
Video: The Future of screen technology. http://tumblr.com/xnnhlbok5 [hufkens]
-
In The Coming HTML5 Browser Wars, The Markup Should Remain The Same http://t.co/a40nTJx via @techcrunch [hufkens]
-
Photo: Awesome USB flash drive! http://tumblr.com/xnnhiyh96 [hufkens]
-
RT @Damir: The Future of Silverlight http://team.silverlight.net/announcement/the-future-of-silverlight/ [hufkens]
-
Video: Pac Man Paranoia http://tumblr.com/xnnhcmgmc [hufkens]
-
Video: EpicMix - Track your physical activities on the slopes and get rewards! http://tumblr.com/xnnh7u29j [hufkens]
-
Off to Venlo for the last time! [hufkens]
-
Now doing some Photoshop and Wordpress PHP hacking #allrounder [hufkens]
-
Doing some HTML/CSS for a top-secret project! [hufkens]
June 17th, 2009 - 08:11
Blogged: Bidirectional (two-way) data binding in Flex 4 http://bit.ly/15AGVE (one of my favorite new features)
This comment was originally posted on Twitter
June 17th, 2009 - 09:46
Pointers in your flex !
But yeah, pretty cool, that should eliminate quite a bit of boilerplate code.