Fun with bubbles
As a child, I never thought much about why bubbles worked. I just stuck the wand in the bottle, lifted it back out, and blew. It was fun to watch the bubbles rise up in the air and float away. It was even more fun when there was a dog around, because then you could watch the dog chase the bubbles.
When I started working with Flex, however, I found that I had to think about bubbles. What are bubbles? How do they work? What is the point of bubbles?
I’m not sure I fully understand them yet, but I’m starting to figure out some of their practical uses, and it occurs to me that the bottled bubbles help a little. Just like those bubbles float up and up through the air until a dog or some other event handler does something with them, bubbling events float up through the application containers. The containers can either enjoy watching the events float, or they can jump up and handle them.
It turns out that this behavior can save some work and help to build loosely coupled components. For example, suppose you have a form-based app with a validation routine that checks to see whether the user has changed the data. One way to do this is to run the routine whenever any field in any form loses focus. Obviously, writing code to add the event handler to every single form element is sub-optimal. This is where bubbling can come in handy: You can create an event listener in the root container (usually the main Application mxml file) that listens for the focusOut event. Every time any form element in the app loses focus, this event will be fired. This is a fine place to put the code that checks whether the user has made any modifications to the data.
- Click here to view a sample app that demonstrates event bubbling. Right-click on the app to view and download the source.
So from looking at the example - using the event listener allows monitoring of movement between all the form elements. Thus allowing one to reduce the number of event handlers down to a single one.
Any suggestion on a best practice for checking if the contents have changed? And how best to call various validation handlers?
Comment by Jason Epperson — June 18, 2007 @ 2:10 pm
Jim-
This is very helpful. As an old mTropolis user (does anyone else remember that fabulous development tool?), I’ve found the event model of Flash/Flex much more difficult. Particularly I’m still struggling with how to implement a custom event that bubbles. I don’t understand when/why/where to put those metadata items for the custom event that you want to have bubble up. Do you have to put the metadata in every mxml in the bubble foodchain? Also, suppose the event originates in some mxml component, but you want to have it bubble up and be handled by an Actionscript class….how would that get specified? Could you expand your sample to show that too? I for one would be most grateful.
Comment by annespg — June 18, 2007 @ 3:17 pm
Jason: One way to keep track of changes is by having two models. One model represents what is actually in the database and is kept in sync with the database, and the other model represents what is in the view. You bind the database-model to the UI elements using the usual curly-brace syntax, and then bind the data inside the UI elements to the view-model using BindingUtils. Then you compare the two models on the focusOut event; if anything is different, you know that the user has changed something.
annespg: MXML components are really ActionScript classes in disguise; so yes, you can handle events in ActionScript classes just as you can in MXML components. I’ll try to put together a sample app that fits the scenario you describe.
Update: Expanded sample has been posted here
Comment by jimrobson — June 18, 2007 @ 11:16 pm
[…] Published June 19th, 2007 Uncategorized In response to some good feedback to the previous post on event bubbling, I’ve expanded the Bubbles demo to show how an MXML component can dispatch a custom event, […]
Pingback by More fun with bubbles « Jim Robson — June 19, 2007 @ 2:52 am
[…] September 15th, 2007 Flex In view of the fact that I’ve written about bubbles here and here, you might conclude that I find bubbles interesting. And it’s OK for you to conclude […]
Pingback by Tips and bubbles « Jim Robson — September 15, 2007 @ 11:11 pm
[…] view of the fact that I’ve written about bubbles here and here, you might conclude that I find bubbles interesting. And it’s OK for you to conclude […]
Pingback by Jim Robson » Tips and bubbles — April 28, 2008 @ 5:09 pm