Did you know…
You can achieve binding programmatically with the “ChangeWatcher”? The following example illustrates various methods for achieving binding.
The first method simply binds the labels text property to the text property of the text input. This is probably the most straightforward method for achieving binding.
The second method binds via the ChangeWatcher. Using the change watcher, you need to explicitly specify the target and target’s property that you want to bind on as well as the action that you’d like to take place in the form of an event handler. You achieve binding by calling the “watch” method of the ChangeWatcher. You can also choose to remove bindings by calling “unwatch”. For this example, we could’ve utilized the TextInputs “change” event to establish the same intent.
The third method binds via the BindingUtils facility, which is available right out of the box. BindingUtils essentially utilizes the ChangeWatcher under the hood to achieve binding. If you look at the return value of the method “bindProperty” on BindingUtils, you’ll see that it’s return type is of a ChangeWatcher.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="{ onCreationComplete( event ) }">
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.binding.utils.ChangeWatcher;
private function onCreationComplete( event : Event ) : void
{
// utilizing the watch method of the ChangeWatcher to illustrate programmatic binding
ChangeWatcher.watch( txtInput2, "text", onInputChange );
// utilizing the bindProperty method of the BindingUtils facility to illustration binding
// if you look at the return type of "bindProperty", you'll see that it also returns an
// instance of a ChangeWatcher
BindingUtils.bindProperty( lblBinding3, "text", txtInput3, "text" );
// Notes: if you want to unbind on the ChangeWatcher, utilize the "unwatch" method of the ChangeWatcher
}
private function onInputChange( event : Event ) : void
{
var txtInputTarget : TextInput = event.currentTarget as TextInput;
lblBinding2.text = txtInputTarget.text;
}
]]>
</mx:Script>
<mx:VBox left="10" right="10" bottom="10" top="10">
<mx:Form>
<mx:FormHeading label="Non Programmatic Binding" />
<mx:FormItem label="Input:">
<mx:TextInput id="txtInput1" />
</mx:FormItem>
<mx:FormItem label="Binding On Text:">
<mx:Label id="lblBinding1" text="{ txtInput1.text }" />
</mx:FormItem>
</mx:Form>
<mx:Form>
<mx:FormHeading label="Programmatic Binding via Change Watcher" />
<mx:FormItem label="Input:">
<mx:TextInput id="txtInput2" />
</mx:FormItem>
<mx:FormItem label="Binding On Text:">
<mx:Label id="lblBinding2" />
</mx:FormItem>
</mx:Form>
<mx:Form>
<mx:FormHeading label="Programmatic Binding via BindingUtils.bindProperty()" />
<mx:FormItem label="Input:">
<mx:TextInput id="txtInput3" />
</mx:FormItem>
<mx:FormItem label="Binding On Text:">
<mx:Label id="lblBinding3" />
</mx:FormItem>
</mx:Form>
</mx:VBox>
</mx:Application>