The following examples show a few different ways to bind data in Flex.
Full code after the jump.
The following example shows how you can use the <mx:Binding /> tag to bind values between two controls:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/01/data-binding-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Binding source="textInputSrc.text"
destination="textInputDst.text" />
<mx:Form>
<mx:FormItem label="source:">
<mx:TextInput id="textInputSrc" />
</mx:FormItem>
<mx:FormItem label="destination:">
<mx:TextInput id="textInputDst"
width="{textInputSrc.width}" />
</mx:FormItem>
</mx:Form>
</mx:Application>
View source is enabled in the following example.
The following example shows how you can use the static BindingUtils.bindProperty() method to bind values between two controls:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/01/data-binding-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
private function init():void {
BindingUtils.bindProperty(textInputDst, "text", textInputSrc, "text");
}
]]>
</mx:Script>
<mx:Form>
<mx:FormItem label="source:">
<mx:TextInput id="textInputSrc" />
</mx:FormItem>
<mx:FormItem label="destination:">
<mx:TextInput id="textInputDst"
width="{textInputSrc.width}" />
</mx:FormItem>
</mx:Form>
</mx:Application>
View source is enabled in the following example.
The following example shows how you can use the static BindingUtils.bindSetter() method to call a method whenever the source property is changed:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/01/data-binding-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
private function init():void {
BindingUtils.bindSetter(setterFunc, textInputSrc, "text");
}
private function setterFunc(str:String):void {
textInputDst.text = str;
}
]]>
</mx:Script>
<mx:Form>
<mx:FormItem label="source:">
<mx:TextInput id="textInputSrc" />
</mx:FormItem>
<mx:FormItem label="destination:">
<mx:TextInput id="textInputDst"
width="{textInputSrc.width}" />
</mx:FormItem>
</mx:Form>
</mx:Application>
View source is enabled in the following example.
{ 16 comments… read them below or add one }
Hmm, nice. But why would I use anything but [Bindable]? Can you include reasons, explainations, or circumstances where one might want to use these alternatives instead? Pros and cons or something…
One scenario where you might use the BindingUtils is when you generate UI components at runtime based on the results of a dataservice. This can be handy for performing binding on non-data aware display components such as Grid, where the the state maintenance is largely up to the developer and what child components the grid contains.
I had the situation when using the Cairngorm framework that I needed to update a mx:progressbar component using the setProgress function whenever a variable in the ModelLocator changed. I used the BindingUtils.bindSetter to call the function whenever the variable changed, just to give you another example.
Well done :)
A few examples of how to use the binding utilities with Objects and ArrayCollections would be most appreciated :).
Added SWFs.
Peter
Hi,
Is it possible to bind to a function that requires a parameter ?
ex :
[Bindable("change")]
public function getString(obj:Object):String
{
…
}
Thanks
thanks for the code, but the text in the destination loses its property like font size, font type, font color on pressing a space bar, how to avoid that
A few examples of how to use the binding utilities with Objects and ArrayCollections would be most appreciated too.
Another way could be to use Actionscript only as described in a blogpost of mine. It shows you how you can bind to a component and use a labelFunction to return a value, instead of the actual value (e.g.: a formatted datestring instead of a date object).
http://webdevotion.be/blog/2009/04/20/binding-between-a-datefield-and-a-button-label-at-runtime/
very nice example, thank you very much!
This post not render on Chrome.
Works for me on Vista 64 w/ Google Chrome 2.0.172.33.
Peter,
Thanks for the site – I refer to it frequently. On to the matter at hand:
I am attempting to bind an object’s property to another object’s property for writing to a mySQL database. It works correctly, however, I need to do this task a dynamic number of times based on user interaction with the datagrid (based on how many items they have selected in the “multipleSelectionsAllowed” datagrid).
code is something like:
for each (var obj:Object in myObjCollection) //myObjCollection is the list of selected items in datagrid
{
BindingUtils.bindProperty(_destObj, "myProp", obj, "myProp");
var asyncToken:AsyncToken = _destObj.save();
}
where destObj is defined as the same type object as obj
The line “var asyncToken:AsyncToken = _destObj.save();” works fine outside of the loop with a separate binding of source/dest in but only does this for one item, not each in the list.
Any help is much appreciated :D
By the way, the error I am getting is something like “Record is locked and can’t be saved” – this only occurs in the for loop, not in the single call (which works/updates correctly)
Since bi-directional binding is not supported in Flex 3, you can use a mapping file and a binder class using the mapping file to support bi-directional binding.
Furthermore this will reduce code and extract the mapping/binding concern from your main application code.
Sample: Flex binding
Kind regards,
Marc