« Encrypting Data in AIR | Main | Managing Symbolic Links in AIR »
January 3, 2008
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.
Posted by cantrell at January 3, 2008 9:39 AM
Comments
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
Posted by: Joe Rinehart at January 3, 2008 10:14 AM
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.
Posted by: Tom Cornilliac at January 3, 2008 12:06 PM
Man - you really gotta post more. Great post - amazing tip. Thanks!
Posted by: Jim Rutherford at January 4, 2008 8:49 AM
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?
Posted by: ryan at January 8, 2008 2:02 PM
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.
Posted by: Dan Zeitman at May 9, 2008 8:14 AM
Thanks christian ! I was wondering if this was possible at all before i read your post ! It works like a charm. Cheers
Posted by: Sebastien at May 11, 2008 2:51 AM
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!!!
Posted by: Stephen Beattie at October 27, 2008 5:06 PM
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.
Posted by: matt at March 29, 2009 5:34 PM
Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009).