Manual Data Binding in Flex

I’m currently working on an Exchange calendaring client for AIR (more details to come), and I decided early on to use the Cairngorm Flex framework. I’d worked on Cairngorm projects in the past, but I hadn’t ever used Cairngorm in one of my own projects from start to finish. I decided it was time to put it to use, and to make sure it was 100% AIR friendly.

One of the first things you realize about Cairngorm is that it relies very heavily on data binding. Data binding is one of my favorite features of Flex, so I was very happy with how my application was coming together. But then I ran into a snag. I found myself needing to execute a block of code in response to a property change rather than just display the new property value, or update a component’s data provider. Fortunately, Flex has anticipated this issue, and allows you to set up binding manually in a very flexible (naturally) way.

So here’s the scenario:

I have a ControlBar component which has a busy, and a notBusy state. In the busy state, I show a progress bar, and in the notBusy state, the progress bar goes away, and in its place, I show the date and time of the last update. My ModelLocator has a busy property which makes it easy for me to to maintain a global "busy" state for my entire app. Whenever that properly changes, I want to change the state of the ControlBar component, as well as execute a small block of UI-related code.

The key to making this work is the mx.binding.utils.ChangeWatcher class. In the creationComplete handler of my component, I have the following code:

ChangeWatcher.watch(ModelLocator.getInstance(), "busy", onBusyChange);

Believe it or not, that’s it. In my onBusyChange function, I change the state of my component, and do a couple of other small UI-related things. Now whenever the busy property of the ModelLocator changes, my app just does the right thing.

I found that the ChangeWatcher was really the key to making Cairngorm flexible enough to build any type of application. It allowed my team to throw together a pretty nice little Exchange Calendar viewer and notifier which I think will be a big hit with those who use Exchange in a corporate environment, but who aren’t big fans of Outlook. I will release the application and the code with the next public release of AIR.

8 Responses to Manual Data Binding in Flex

  1. Joe Rinehart says:

    Hey Christian,ChangeWatcher works well, but for a more declarative solution, Paul Williams put together a tag for this situation a while ago called Observer. You state a source and a handler, and it’ll call the handler, passing the value of the source along:http://weblogs.macromedia.com/paulw/archives/2006/05/the_worlds_smal.cfm

  2. Thank You Christian! I’ve run into this same issue using the PureMVC framework. I’m starting a new app right now and I’m sure I’ll be putting ChangeWatcher to work.

  3. Man – you really gotta post more. Great post – amazing tip. Thanks!

  4. ryan says:

    nice, changewatcher is one of those little gems that could easily pass you by until you really need it… look forward to taking your calendar app for a spin… did you use the scheduling framework?

  5. Dan Zeitman says:

    Thanks!What about more complex objects like an array collection or a object within the ac.Maybe you (or your audience) might have some insight…I’ve got a Master / Detail pair of views. The master list is an AC of generic “objects” – ID, CompanyName, City, State – displayed in a grid.The Detail is a complex form – bound to a CompanyDetailVO -I want to watch and update the fields in the masterlist, since the forms are side by side.Common scenerio I would think… I like you watcher solution, wondering how to extend it to meet the requirements.

  6. Sebastien says:

    Thanks christian ! I was wondering if this was possible at all before i read your post ! It works like a charm. Cheers

  7. Stephen Beattie says:

    Christian, you literally saved me from the brink of insanity when working with Cairngorm. I’m now using ChangeWatcher to successfully update my datagrid column headers (sort arrows) and selectedIndex value on a combobox (page selector) from my remote RecordSet VO.A big manly hug and little tears of joy from Cambridge UK!!!

  8. matt says:

    Hello Christian,I have a problem with refreshing data in a Flex List control when the data provider is a tree structure of generic objects.Here is my situation -Consider that I have an ActionScript class called TreeItem with the following attributes.Class TreeItem{public var name:String;public var description:String;publilc var image:String;public var children:TreeItem;}A tree structure of this TreeItem is provided as a data provider to a list control.Issue is that the list control is not reflecting changes in the tree structure when an attribute of leaf level TreeItem is updated even though I am using data binding to bind TreeItem to the list control.I was wondering if there is a way to explicitly trigger a refresh in this case using ChangeWatcher.watch(). I have already tried doing this by raising event PropertyChangeEvent.