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.
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