Binding Flex TextInput UI Controls to a DataProvider

In Flex when you bind data to a UI control like a DataGrid, the grid cells refresh every time the dataSource changes. The reverse is also true if the DataGrid is enabled for editing. That is, the dataSource is also updated when you edit a cell.

The TextInput can be bound as well so that when the dataSource changes, the value of the TextInput will automatically update. However, unlike the DataGrid, changing the text of the TextInput will not automatically update the dataSource. Take the following code for example (assuming “source” is a String variable):

<mx:TextInput id="text1" text="{source}" change="{source= text1.text}" />

When the TextInput is changed, the value of source remains the same. It’s only bound one-way. If you want the value of source to be updated when TextInput changes, it’s actually easy, but there are at least five (5) different ways to do it of which I know. For the most straight-forward two-way binding, you could update the TextInput code like so:

Technically source is not bound to the TextInput, but it does produce the desired result. source is updated manually whenever the valueCommit event fires. The valueCommit event fires when the TextInput text has been changed onBlur (ie when when TextInput loses focus). If you prefer source to be updated on every key stroke, you can change valueCommit to change instead and the update will occur on every keyUp. If I’m updating a database or making a service call, I prefer valueCommit so the back-end code only fires once after the user is finished updating the field. If the TextInput is an ajax-style auto complete or lookup, the change event might be more desirable so the application can react after each key stroke.

As I mentioned there are five methods to do this. You can bind controls using Flex’s binding features in either MX code or ActionScript. Depending on your application one may be better than the rest as far as keeping your code clean and consistent. For the most part they all achieve the same result. Below is source code that demonstrates all five techniques:

在Flex中，当你像一个DataGrid的UI控件绑定数据，网格刷新每次“dataSource的变化。反向也是如此，如果启用DataGrid中进行编辑。也就是说，数据源也被更新，当您编辑一个单元。

在TextInput可以绑定，所以，当DataSource的变化，TextInput的值将自动更新。然而，不同的DataGrid，改变TextInput的文本不会自动更新数据源。例如，采取下面的代码（假设“源”是一个字符串变量）：

<mx:TextInput id="text1" text="{source}" change="{source= text1.text}"

当TextInput的改变，源值保持不变。它只能单向绑定。如果你想TextInput的变化时，它实际上是容易更新的源代码的价值，但有至少五（5）不同的方式做到这一点，我知道。对于最直接的双向绑定，你可以像这样更新的TextInput代码：

技术上源绑定的TextInput，但它确实产生预期的结果。源valueCommit事件发生时手动更新。valueCommit事件触发时的TextInput文本已更改的onblur（即当TextInput的失去焦点）。如果你喜欢在每一个关键中风更新源，你可以改变valueCommit改变，而不是和更新将发生在每一个的KeyUp。如果我更新数据库或服务电话，我喜欢的valueCommit，所以后端代码只触发一次后，用户更新完场。如果在TextInput是一个Ajax风格的自动完成或查找，更改事件可能是更可取的，因此应用程序可以反应后，每个击键。

正如我所提到的有五个方法来做到这一点。您可以在任MX代码或ActionScript使用Flex的绑定功能绑定控件。根据您的应用之一，可能比其他人更好尽可能保持代码的干净和一致的。在大多数情况下，他们都达到相同的结果。下面是源代码，演示了所有五个技巧：

<?xml version="1.0" encoding="utf-8"?><mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="{init()}"><mx:Script><![CDATA[import mx.binding.utils.BindingUtils;import mx.binding.utils.ChangeWatcher; /** * Called at creation complete and initializes all of the examples */private function init():void{this.initExample2();this.initExample3();this.initExample4();this.initExample5();} /** * Example 1: simple inline binding (see the MXML) * ----------------------------------------------------------------------- */ [Bindable]private var value1:String = "example 1"; /** * Example 2: use ChangeWatcher to assign a change watcher to text2.text * ----------------------------------------------------------------------- */ [Bindable]public var value2:String = "example 2"; private var watcher2:ChangeWatcher; public function initExample2():void{watcher2 = ChangeWatcher.watch(text2,"text",text2changed);} /** * notice that the argument is an event */public function text2changed(event:Event):void{this.value2 = (event.currentTarget as TextInput).text;} /** * Example 3: use BindingUtils to bind a change watcher to the text3.text setter * ----------------------------------------------------------------------- */ [Bindable]private var value3:String = "example 3"; private var watcher3:ChangeWatcher; public function initExample3():void{watcher3 = BindingUtils.bindSetter(text3changed,text3,"text");} /** * notice that the function argument is a string (the value of text3.text) */public function text3changed(val:String):void{this.value3 = val;} /** * Example 4: Use BindingUtils to bind text4.text to this.value4 (notice value4 has to be public) * ----------------------------------------------------------------------- */ [Bindable]public var value4:String = "example 4"; private var watcher4:ChangeWatcher; public function initExample4():void{watcher4 = BindingUtils.bindProperty(this, "value4", text4, "text");} /** * Example 5: using MX:Binding in the MXML (see below) * ----------------------------------------------------------------------- */ [Bindable]private var value5:String = "example 5"; public function initExample5():void{text5.text = this.value5;} ]]></mx:Script> <mx:HBox><mx:TextInput id="text1" text="{this.value1}" change="{this.value1 = text1.text}" /><mx:Label id="label1" text="{this.value1}" /></mx:HBox> <mx:HBox><mx:TextInput id="text2" text="{this.value2}" /><mx:Label id="label2" text="{this.value2}" /></mx:HBox> <mx:HBox><mx:TextInput id="text3" text="{this.value3}" /><mx:Label id="label3" text="{this.value3}" /></mx:HBox> <mx:HBox><mx:TextInput id="text4" text="{this.value4}" /><mx:Label id="label4" text="{this.value4}" /></mx:HBox> <mx:HBox><mx:TextInput id="text5" /><mx:Label id="label5" text="{this.value5}" /></mx:HBox> <!-- Configure the binding here in MXML --><mx:Binding source="text5.text" destination="this.value5" /> </mx:WindowedApplication>