« Firefox 2 Live Titles | Main | Apollo Application Demos »
November 30, 2006
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.
Posted by cantrell at November 30, 2006 10:17 AM | References
Comments
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)
Posted by: Daniel Larsen at December 1, 2006 01:21 PM
Very good but the developers need direct connectors to database.
Posted by: Juan Antonio at December 10, 2006 12:50 AM
I think these blog is really useful for new comers and Excellent resource list.
Posted by: Romina Miersch at February 24, 2007 08:57 PM
The shortest draft of the Data Binding functionality, excellent summary!
Posted by: Shomiron Das Gupta at May 27, 2007 10:01 PM
very usefull blog, gret work. Many greetings from germany
Posted by: tee at June 11, 2007 01:08 PM
Very good but the developers need direct connectors to database.
Posted by: Bramka sms darmowa at June 12, 2007 04:30 PM
Very interesting blog
Posted by: Wyniki lotto at June 12, 2007 04:32 PM
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.
Posted by: Chris Charlton at June 13, 2007 04:00 PM
I think this article is very useful to solve probs similar to this. I use the Data Binding usually: excellent summary
Posted by: Erin Meyer at June 17, 2007 11:29 PM
If U think Flex should have direct connections to database, U do not understand Flex.
Posted by: CyberSan at July 1, 2007 01:03 PM
very helpful
Posted by: kyle at July 5, 2007 09:59 PM
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.
Posted by: Hundehalsband at July 14, 2007 04:31 AM
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
Posted by: hello world at July 22, 2007 10:25 PM
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.
Posted by: Dondo at August 8, 2007 01:02 AM
try mx.binding.utils.BindingUtils
Posted by: Tomislav at December 25, 2007 04:14 PM