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, which in turn bubbles up and is handled by a grandparent container defined in ActionScript. I’ve also commented the code to help clarify the difference between target and currentTarget, and added id’s to the UI components to make the value of the target property more readable.
When you open the new demo, click on the Feedback tab to see the custom event dispatched and handled. As always, right-click on the application to view and download the source. When you look at the code, notice the constructor arguments in CustomClickEvent.as:
public function CustomClickEvent( message:String,
type:String=EVENT_CUSTOM_CLICK,
bubbles:Boolean=true,
cancelable:Boolean=false)
The value of bubbles defaults to true, since the CustomClickEvent’s entire purpose in life is to bubble. (Don’t you love bubbly personalities?)
Jim,
Very nice blog; these kind of posts should help many a Flex developer, especially newer ones. Best practices (assumed) are great to share, and providing working (or deliberately broken) examples are priceless.
Keep it up, I predict you’ll have 3000 readers by 2008, at which point you’ll have an army to do with as you please.
I need to start reading up on Flex integration with Ruby (and Rails), there’s quite a lot going on in that arena…
Jim,
Thanks for your helpful follow-up post. Being a very wet behind the ears newbie, I hope I don’t annoy you with too many dumb questions. I am still not entirely clear about the Metadata stuff in the Feedback.mxml. You specified the [Event name="customClick"...] I noticed the name string is the same as the string assigned to the type property of the CustomClickEvent. Is this coincidence, or do they need to match? If they DO need to match, I thought the point of having public static const (i.e. public static const EVENT_CUSTOM_CLICK:String = “customClick”;
) was so that you could use the compiler to enforce checking you are using a valid constant, and not mistyping the string for a particular event type. Thus, you used CustomClickEvent.EVENT_CUSTOM_CLICK in your addEventListener inside the CustomPanel.as class. So if the name in the [Event] metadata must match the type property in the Event object, then can you/how do you use the public static const to keep from messing up with the metadata?
Again, very grateful for your useful example!
Chris: Thanks for the encouragement. It’s very much appreciated!
annespg: You are correct on the reason for having the static constant in the Event class, and it is a best practice. However, the name in the Event metadata declaration does not need to match the constant; it can be any arbitrary value.
The primary use of the Event metadata is when the component is included in a container using MXML syntax, like so:
<view:Feedback customClick=”myCustomClickHandler(event)” />
In the sample app, since the dispatched event bubbles and is ignored in the parent container (being handled in the grandparent instead), we don’t even need the Metadata tag. If you comment it out, the app will still work.
It *is* essential, however, that the event type specified in the addEventListener() call match the event type that is dispatched via dispatchEvent(). This is where the static constant comes in handy.
In the sample app, since we used the default event type, we didn’t need to specify it in dispatchEvent(); we only needed to specify it in addEventListener(). (Compare the Feedback.sendMessage() with the addEventListener() call in the CustomPanel constructor.)
Just on a side note…
How do you set the Flash app to allow for the “View Source” option?
- Saj
Saj: In Flex Builder, go to Project -> Publish Application Source…
Then re-compile your app. And don’t forget to upload the srcview folder when you deploy to the Web.
Jim,
Got buried in stuff, but wanted to thank you for the really excellent explanation of the purpose of the Metadata stuff. I think I may finally get it. I’m going to do some more experimenting, but reserve the option to ask you yet another follow-up question. Hope you won’t mind.
Hi Jim
I’ve been hearing a lot of good things about your ppt, why don’t you share your slides or put them up somewhere – where unlucky people like me who were not present at the FlexManiacs conference can see it?
(check out http://slideshare.net if you are game)