Event Bubbling in Flex 1.5 & ActionScript 3

Biggest problem I had in Flash was using a bucket brigade technique to notify one of my high level View controllers from a deeply nested View. Basically, if a form elment, nested in a form container with other views, that is in turn nested in a View controller; he has to go through the View he’s hosted in to get the event out to those who may care. In turn, the main View controller couldn’t subscribe to the event unless the hosting container forwarded it along… which is what I would do in Flash.

The nested would dispatch his event:

private function doSomething():Void
   dispatchEvent({type: "someEvent", target: this});

Then, the View hosting it would have to suscribe to the event, and forward it up the chain:

nestedView.addEventListener("someEvent", Delegate.create(this, doSomething));

private function doSomething(event_obj:Object):Void

Pain in the ass, and suddenly Views know too much about eachother; a parent shouldn't have to do a child's handiwork.

Peter Hall had made an ARP extension that allowed bubbling events.

Apparently, Flex 1.5 already does that. I have a View nested 2 deep in some complicated Flex components, and all the main View controller has to do is subscribe to the View it hosts, and as long as no one intercepts it, the event will "bubble up" the Views to anyone who cares.

This is accomplished by adding the bubbling property to true on the event object:

private function doSomething():Void
  dispatchEvent({type: "someEvent", bubbles: true, target: this});

Now, with Flex, you still have to define the event in the MetaData tag, much like you define Inspectable properties that component developers can use as getter/setters. So, that is one draw-back; you still have to define the event in whatever View uses it via composition. Bleh.

I'm not really sure if AS3 requires the metadata, though. Since EventDispatcher is built into Flash Player 8.5, and the 3 phases of capture, target, and bubbling are built into the core of Sprites and MovieClips, I'm sure you probably don't have to define the event; you can just have faith in knowing that if you mark the event is bubbling, it'll flow up!

:: goes to try a test ::

:: 20 minutes later ::

Well, that almost worked. Apparently, events that bubble cause Firefox to crash, haha! Anyway, I probably just found a bug in the alpha software, go figure, but if this is how easy it is to bubble events, awesome.

Flex 2 Bubble Event Source Files

*** Update 1.23.2006: Good write up on Event Bubbling with a great class by Bokel.

10 Replies to “Event Bubbling in Flex 1.5 & ActionScript 3”

  1. ARP Advisory memebers have their own labs, and there are public mods, so not sure if he ever put it there, but here’s Peter’s public ARP mods. If memory serves he actually put it in like the ARP base class instead of a part of EventDispatcher itself.

    That link can be viewed in a web browser, and you can also point Subversion there as well.

  2. Then since I’m subclassing mx.screens.Form I have a collection of child views in there… and I’m using a class in between so I can add the bubbles functionality there. Awesome.

  3. Jesse,

    I have been experimenting with this also. I see one thing with your example.

    The MouseTypeEvent.DOUBLE_CLICK event bubles by nature. It is internal where all this happens.

    When you stick dispatchEvent() into the actuall double click handler, you are generating a stack overflow and an infanite loop.

    my method looks like..

    private function doTwoClick(event:MouseEvent):Void

    Once taking out dispatchEvent that is causing the loop, works great in Explorer and Firefox.

    I think this is the point, if say you want to create an Event that did not bubble, you could either pass it false in the constructor OR create a subclass that set the bubbles property.

    Anyway, just thought I would share that becasue there is no bug, just a loop -)

    Peace, Mike

    Pimp, the event bubbled! Bubbles rule.
    Pimp, the event bubbled! Bubbles rule.

  4. Cool; just commented out those 2 lines of code, and she worked great; nice! Thanks man.

    How do you do it with a custom event? The bubbles property is read-only, and my custom event class didn’t work…

  5. Speaking about read-only ‘bubbles’ property in Flex 2 UI framework.

    Documentation doc is here:

    We had spotted, that the constructor of Event expects ‘bubble’ property as parameter:
    Event(type:String, bubbles:Boolean = false, cancelable:Boolean = false)

    Creates an Event object to pass as a parameter to event listeners.
    Does this mean that we can set bubbles property when creating new instance of the event?

  6. Event Bubbling is built into the Flash Player 9, so yes. In Flex 1.5 it had to be built into the component framework, but now even dispatcher is part of the player itself.

  7. Example of event bubbling in Flex 1.5 and AS2 would be nice, because Flex 1.5 docs are saying contradictory information regarding this matter.

    And your post from 11/2005 has a title ‘Flex 1.5 and AS3 event bubbling’, which is puzzling too.

    Example files from 11/2005 attached with your post are written in AS3.

  8. var o = {};
    o.bubbles = true;
    o.type = ‘someEvent’;
    o.target = this;

    You do that in Flex 1.5, and she’ll bubble up.

    Flex 1.5 supports event bubbling, even though it outputs Flash Player 7. Flash Player 7 does not have EventDispatcher built into the player, whereas Flash Player 9 does, which Flex 2 uses.

    The Macromedia / Adobe developers, however, managed to get the component framework from Flash MX 2004 converted & insanely upgraded for Flex 1 & 1.5 to support event bubbling. The above syntax will not work in Flash MX 2004, nor Flash 8, but will work in Flex 1 and 1.5.

    ActionScript 3 is the language utilized to write code for Flash Player 9, whether you choose to utilize Flex 2 technologies or not. It has EventDispatcher built-in, and a lot of the DisplayObjects, such as MovieClip, extend it, which is really nice. Now, MovieClip has dispachEvent built-in and it’s tons faster.

    This article was written on 11/2005; the date is acccurate. I know the tile is somewhat abmigious since it says Flex 1.5 and AS3 in the same context even though they are 2 totally seperate technologies.

Comments are closed.