Binding Flex TextInput UI Controls to a DataProvider
- September 16th, 2008
- Posted in *NIX . AIR . Announcements . Flex
- Write comment
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="example" text="{source}" />
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:
<mx:TextInput id="example" text="{source}" valueCommit="{source = example.text;}" />
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. Attached is source code that demonstrates all five techniques:
If you know of any other ways to bind data to UI Controls, please post a comment.
Thanks…! This is something good to know and very helpful.
Dude, this saved me from going bald.
thank you.
It helped me also a lot, thank you!
I’d prefer use the syntax without id, it is more generic to me
<mx:TextInput text=”{source}” valueCommit=”{source = text;}” />
Thanks Pieero. My habit is to include the object reference to make it clear where the value is coming from. However, your suggesting is interesting to me because I wonder due to the Flex scope chain, that the value of “example.text” might be located faster by simply using “text”. I believe it might be within scope of the TextInput class, whereas my version has to look outside to the parent component scope, then back into the TextInput. I’ll have to test that out and see.
@Jason
Unfortunately, I was a little too presumptuous.
This is not working, and I saw it only after posting, sorry.
I would expect to find a way to set context in inline code.
But even using the event.target.text, it says “event does not exists”, while we can write function_handler(event).
What a pity.
@Pieero
Ah, interesting. I’ve found binding to be surprising sometimes as well. The reason I suspect is because string binding code is not directly executed. Instead it is actually parsed by substituting a lot of “magic” variables and then interpreted inside the binding classes.
So some variables don’t work correctly due to the fact that the binding code doesn’t recognize them. however you don’t notice what is happening until you stumble onto some of these variables.
thanks for the comment, though, it’s an interesting thing to know.
I want to have a textinput that converts the users entry to a currencyFormat at the point of entry. As the user enters the values, the currencyformatter kicks in and formats as he types. Dunno if anyone has done anything like that. I’d like any ideas. Thanks and nice work