Using EventDispatcher - Page 2

In the previous page, I provided a brief introduction of EventDispatcher. In this page, let's go through a code example to make sense of how this all should work.

Getting It to Work
Example time with a clever metaphor:

//Import the class.

import mx.events.EventDispatcher;

//Create a generic object to serve as our broadcaster.

this.radioStation = new Object();

//Initialize the object, remember that this gives the methods of EventDispatcher to radioStation.

EventDispatcher.initialize(this.radioStation);

//Let's create our music lovers (rockListener and classicalListener), add them as listeners to the radioStation and give them

//actions for when their favourite music is playing.

this.rockListener = new Object();

this.radioStation.addEventListener("rockMusic", this.rockListener);

this.rockListener.rockMusic = function(eventObject:Object):Void {

trace("I love " + eventObject.type + ". The song " + eventObject.title + " by " + eventObject.artist + " is awesome!\n");

};

this.classicalListener = new Object();

this.radioStation.addEventListener("classicalMusic", this.classicalListener);

this.classicalListener.classicalMusic = function(eventObject:Object):Void {

trace("I admire " + eventObject.type + ". The song " + eventObject.title + " by " + eventObject.artist + " is magnificent!\n");

};

//Now that we have a fan base, we can fire up the tunes. You should notice that each listener only responds to the type of music

//it is set up to listen to.

//rockListener picks up this event and calls its function relating to the event but classicalListener doesn't listen.

this.radioStation.dispatchEvent({type:"rockMusic", title:"Rockin' In The Free World", artist:"Neil Young"});

//rockListener also recives this event and calls the function.

this.radioStation.dispatchEvent({type:"rockMusic", title:"Born To Be Wild", artist:"Steppenwolf"});

//No listener recives this event since none are subscribed to listen for it.

this.radioStation.dispatchEvent({type:"advertisement", title:"Buy Coke!!!", artist:"Coca-Cola"});

//Finially classical gets to listen to some beehtoven. You'll notice that rockListener tunes out for this.

this.radioStation.dispatchEvent({type:"classicalMusic", title:"Symphony 5", artist:"Ludwig van Beethoven"});

As you can see it’s fairly simple to use. Initialize a broadcaster, add event listeners and dispatch events. The key to dispatching an event lies in the object you pass as the parameter. In this object you must include the type property; this is the event that gets dispatched. You should also include a target property but the EventDispatcher will specify the broadcasting object as the target property for you if you don’t include a custom one. You can include as many properties as you want in this object which will get passed to the function called when the event is dispatched.

As said earlier, you can also add functions as listeners to an event as shown in this simple example:

import mx.events.EventDispatcher;

this.broadcaster = new Object();

EventDispatcher.initialize(this.broadcaster);

this.listener = function(eventObject:Object):Void {

trace(eventObject.type + " broadcast to all listeners of the event.");

};

this.broadcaster.addEventListener("genericEvent", this.listener);

this.broadcaster.dispatchEvent({type:"genericEvent"});

It works in much the same manner as with listening objects except it bypasses the need of an event named method of a listener. But you must note that the function is run in the scope of the broadcasting object (not the scope it was defined in). You can fix this using a class called Delegate which will be the subject of another tutorial.

You can also handle events using an appropriately named function called handleEvent as a property of a listener. This is a function which gets called as a method of any listener subscribed to the event broadcast.

import mx.events.EventDispatcher;

this.broadcaster = new Object();

EventDispatcher.initialize(this.broadcaster);

this.listener = new Object();

this.listener.handleEvent = function():Void {

trace("handleEvent called");

};

this.broadcaster.addEventListener("genericEvent", this.listener);

this.broadcaster.addEventListener("otherGenericEvent", this.listener);

this.broadcaster.dispatchEvent({type:"genericEvent"});

this.broadcaster.dispatchEvent({type:"otherGenericEvent"});

//handleEvent called will appear in the output box twice

The example points out that as long as the listener is listening to an event that is broadcast, its handleEvent function will be called.

To close of this section you should know that you can’t have events named move, draw or load since they are reserved by the v2 component architecture.

There is more on the next page.

1 | 2 | 3