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):

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에서 편집할 수 있습니다. 즉, 데이터 원본도 업데이트됩니다. 단원을 편집할 때입니다. Text Input에서 바인딩할 수 있기 때문에 DataSource가 바뀌면 Text Input의 값이 자동으로 업데이트됩니다. 그러나 다른 DataGrid에서는 Text Input를 변경하는 텍스트가 자동으로 데이터 원본을 업데이트하지 않습니다. 예를 들어 다음 코드를 사용합니다.문자열 변수입니다): <?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>