Archive for November, 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.

Firefox 2 Live Titles

I’m sure most Firefox users are familiar with Live Bookmarks by now — bookmarks that point to RSS feeds, and update themselves as the feed is updated. Firefox 2 has now introduced Live Titles — page titles that also update themselves. If you’re using Firefox 2 and you want to see an example, go to woot.com and bookmark it. Rather than the typical name text field, you’ll see a combo box that lets you enter a static title, or choose one of woot’s two Live Titles, which is a brief description of the item currently being sold. Makes perfect sense for both woot and woot fans.

Live Titles are actually "microsummaries" which are easily implemented using a link tag with a rel value of "microsummary". For more information, check out this page on the Mozilla wiki. You can also find a list of microsummary-enabled sites here. And finally, check out the Firefox 2 Release Notes for more information on what’s new in Firefox 2.

More Information on Adobe’s $100 Million in Venture Capital

I’ve been getting tons of requests for more information on the Adobe $100 million venture capital investment plan. We now have a page up on the site, so if you’re interested, check it out. Don’t be put off by the last paragraph which talks about non-disclosure agreements. That’s a pretty standard investor disclaimer, and nothing to worry about from a reputable company. Good luck!