Fun with Flex Data Binding

I’m working on a new Apollo application, and I’ve been having some fun with data binding in Flex. In case you haven’t used data binding yet, it is simply a way to bind an object to a component so that changes to that object are automatically picked up by that component, and the component automatically updates itself appropriately. Here’s a simple example (not valid MXML, but you get the point):

[Bindable]
private var labelText:String = "This is a label";

<mx:Label text="{labelText}"/>

Now that labelText is bound to the label component, anytime the labelText variable changes, the text of the label automatically changes, as well.

Ok, that’s a basic example. Here’s a more interesting usage:

[Bindable]
private var items:ArrayCollection;

<mx:Label text="You have {items.length} items."/>

All I’m doing in the example above is combining bound data with a static string so that the label will always show the current number of items in the ArrayCollection. The beauty of data binding is that is saves you the trouble of updating components manually when certain events occur. You just focus on the logic of your application (adding and removing items from the ArrayCollection, in this case), and the label just takes care of itself.

Here’s a slightly more interesting example:

<mx:TextInput id="myInput"/>
<mx:Button label="Do Something" enabled="{myInput.text.length > 0}"/>

This is an example, I’m binding an expression to a component attribute. The length property of the text input is bindable, so whenever it changes, the expression that I’ve bound to the enabled attribute is evaluated. If the length is greater than zero, true is returned, and the button is enabled, but if the length is zero (meaning nothing has been typed into the text input), the button automatically disables itself.

Let’s take this one step further:

private function isButtonEnabled(someString:String, itemLength:uint):Boolean
{
if (...) {
myButton.label = "I'm enabled!";
return true;
} else {
myButton.label = "I'm disabled.";
return false;
}
}

<mx:Button id="myButton" enabled="{isButtonEnabled(someString, items.length)}"/>

In this example, I appear to be binding a function call to the enabled attribute of the button, but in fact I’m actually binding someString and the length property of items to the button. Whenever either changes, the entire expression is evaluated, which causes my function to be called. The arguments of my function call are basically just an arbitrarily long list of objects that my button may be interested in, and may not even be used in the function itself to decide what to do or return. Another advantage of this approach is that my function may do more than just return true or false. I can change the label of the button, or do any number of other things that are appropriate for the current state of the application.

There are a lot of other fun things that can be done with data binding, but I’m not going to go any further because I haven’t decided where to draw the line yet between using data binding to its full potential, and abusing it. That said, if you have any good data binding tips or tricks, I’d love to hear them.

19 Responses to Fun with Flex Data Binding

  1. Daniel Larsen says:

    This is a fantastic enhancement to Flex. It really cuts the number of listeners that you have to use.Do you know if this is going to be as easy in the Flash 9 IDE? (BLAZE)

  2. Juan Antonio says:

    Very good but the developers need direct connectors to database.

  3. I think these blog is really useful for new comers and Excellent resource list.

  4. Shomiron Das Gupta says:

    The shortest draft of the Data Binding functionality, excellent summary!

  5. tee says:

    very usefull blog, gret work. Many greetings from germany

  6. Very good but the developers need direct connectors to database.

  7. Wyniki lotto says:

    Very interesting blog

  8. These are good examples of using bindings in MXML. The documentation, unfortunately, isn’t as intuitive in the samples it provides.@Juan Antonio/Bramka sms – read about AS3’s new MySQL library.

  9. Erin Meyer says:

    I think this article is very useful to solve probs similar to this. I use the Data Binding usually: excellent summary

  10. CyberSan says:

    If U think Flex should have direct connections to database, U do not understand Flex.

  11. kyle says:

    very helpful

  12. Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings.

  13. hello world says:

    How can i connect Flex to SQL Server 2000 or Access database. so that i can bind dynamic data to Pie charts and data grid etc.pls tell me asap

  14. Dondo says:

    But how can I move that //enabled=”{isButtonEnabled(someString, items.length)}”//part to ActionScript? I´m trying to keep my mxml clean for any code.

  15. Tomislav says:

    try mx.binding.utils.BindingUtils

  16. Eric Goeken says:

    the 1st couple example I thought, “Done that before” but the example with the function was a really good idea.I was thinking to use a getter function, but it would not know when to dispatch the binding.Nice trick

  17. Gowri sankar says:

    very nice blog..it helped me a lot in understanding the binding concept…i am very thankful to the writer..NEAT AND CLEAR

  18. Connor Garvey says:

    Thanks for the examples. I never thought to pass properties as parameters to a function to force those parameters to be bound. I’m glad I found this post!

  19. mirie says:

    Noob questions…Can you help me figure out why the following won’t work for me? I am so frustrated!//MyComponent.mxml[Bindable]public var url:String;public function setAndCallService():void {url = “http://localhost:8888/blah/blah/blah”;serv.send();}private function serv_fault(evt:FaultEvent):void {trace(“serv fault occurred: ” + error.text);trace(“url ” + url);error.visible = true;}//… the rest of the file …What occurs is that the serv.send() gets called, and serv_fault is then called and the first trace line indicates that no URL was given to the HTTPService component. and yet the url gets printed out by the second trace line correctly as “http://….blah/blah”.If you have any extra time, might you be able to explain why if I have [Bindable] set for a private property, why I also need [Bindable] by the getter/setter for that property (and which? the getter or the setter?Thanks very much.