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.