Building on the ASBroadcaster tutorial, we'll look at an example of a custom, object-oriented event source. Event sources will often be custom objects that belong to a class. For example, text fields are event sources, and are instances of the TextField class. (As mentioned in the Listeners tutorial, text fields broadcast changed and scroller events.)

The NewsFeed Event Source Class

We will design a NewsFeed class--a template for a simple event source. Other objects can receive the news feed by subscribing as listeners. When a news item comes in, the news feed sends a headline, short summary, and a URL to each subscriber. The feed also sends a reference to itself, so the listener knows the source of the news.

NewsFeed Constructor

The constructor for NewsFeed is simple:

_global.NewsFeed = function (name) {
    this.name = name;
};

We stick the contructor in _global for easy access. The function's one parameter, name, is a string. We copy name into the this.name property of the news feed object.

NewsFeed.toString()

It's useful to code a custom toString() method, which returns a string representation of the object:

NewsFeed.prototype.toString = function () {
    return this.name;
};

Now the name of the news feed will be returned when we use trace() on the object. This will come into play later.

Initializing with ASBroadcaster

To turn an object into an event source, we use ASBroadcaster.initialize() on it. With a class, the question is, what is the proper object to operate on? Should we initialize each instance? If so, that would mean putting ASBroadcaster in the constructor:

// hypothetical constructor
_global.NewsFeed = function (name) {
    this.name = name;
    ASBroadcaster.initialize (this);
};

This would do the job. The NewsFeed instance would gain the _listeners array and the three methods addListener(), removeListener(), and broadcastMessage(). However, this isn't very efficient--each instance has its own copy of the methods. An ActionScript class should be designed to keep common methods in the prototype object.

What we can do instead is initialize the prototype object itself:

ASBroadcaster.initialize (NewsFeed.prototype);

Note that this code is executed outside the constructor. It adds three methods to NewsFeed.prototype. Our class now has these methods:

• NewsFeed.prototype.toString()
• NewsFeed.prototype.addListener()
• NewsFeed.prototype.removeListener()
• NewsFeed.prototype.broadcastMessage()

Revising the Constructor

We also have a _listeners array in NewsFeed.prototype. Unlike the methods, we don't want to share this property among the instances. We want each individual news feed to have its own list of subscribers. So each object should have its own array.

Thus, we modify the NewsFeed constructor to declare a _listeners array for the instance:

_global.NewsFeed = function (name) {
    this.name = name;
    this._listeners = new Array();
};

Now each news feed will maintain its own array of listeners. The _listeners property in NewsFeed.prototype will simply be ignored.

NewsFeed.sendNews() method

We're finally ready to broadcast something. We could let the end user (the ActionScript developer) call the broadcastMessage() directly as a NewsFeed method. However, it would be more convenient (and encapsulated) to wrap broadcastMessage() in a customized sendNews() method:

NewsFeed.prototype.sendNews = function (headline, summary, url) {
    this.broadcastMessage ("onNews", this, headline, summary, url);
};

The method is passed three arguments. The headline, summary, and url parameters are all strings. Internally, sendNews() broadcasts the news item to the onNews handlers of the listeners, using broadcastMessage(). It passes four parameters to onNews(): the three supplied arguments, and this, a reference to the news feed object itself.

Here is an example of how we would call the sendNews() method:

myNewsFeed.sendNews ("The End is Near", "Magma will cover the earth", "http://drevil.com");

A listener's onNews() event handler would look like this:

myListener.onNews = function (source, headline, summary, url) {
    // do something with the news
};

The onNews() methods of different listeners will follow this basic structure. However, their responses to the news can vary greatly, as we'll see.

Setting Up the System

As we saw in the ASBroadcaster tutorial, there are six basic steps for creating an event-based system in ActionScript:

1. create the event source object
2. initialize the event source with ASBroadcaster.initialize()
3. create a listener object
4. define event handlers for the listener
5. register the listener
6. broadcast the event

We have already covered step #2 on the list--we have initialized the event source, but at the class level.

Creating the Event Source Object

Now we proceed by creating the event source object, an instance of our NewsFeed class. Let's create a feed for the National Press:

natPress = new NewsFeed ("National Press");

Why don't we run a quick test of the NewsFeed.toString() method by tracing the object:

trace (natPress); // output: "National Press"

The name of the news feed is returned, so it appears the object is functioning correctly.

Creating Listener Objects

We'll create two listeners for this example.

NABC = new Object();
AICN = new Object();

NABC and AICN are two news services that use stories from the National Press news feed.

For this example, these listeners will start as simple, generic objects. In a real project, it would be beneficial to have objects defined by a particular class, having a variety of properties and methods. To keep things simple here, we'll add just one method to each object, and no properties.

Defining Event Handlers

Now at step #4, each listener needs an onNews() handler to respond the news feed's messages. We have already decided that the event will be sent with four parameters: source, headline, summary, and url. So we can start out the handler methods like this:

NABC.onNews = function (source, headline, summary, url)
AICN.onNews = function (source, headline, summary, url)

Thus, both event handlers receive the same information. However, each listener will format the news with its own template. NABC delivers its news in a calm style:

NABC.onNews = function (source, headline, summary, url) {
    trace ("----- NABC News -----");
    trace ("> " + headline + " <");
    trace (summary);
    trace (">> " + url);
    trace ("[via " + source + "]");
    trace ("--");
};

AICN, on the other hand, likes to spice up the headlines a little:

AICN.onNews = function (source, headline, summary, url) {
    trace ("///// Ain't It Crazy News /////");
    trace ("Unbelievable!!");
    trace (headline + "!!!");
    trace (source + " reports: '" + summary + "'");
    trace ("Read the rest of the incredible story here:");
    trace (url);
    trace ("//");
};

Registering the Listeners

With the listeners and their event handlers created, step #5 is to register them with the event source:

natPress.addListener (NABC);
natPress.addListener (AICN);

NABC and AICN are now listening to events from natPress. If we check the natPress._listeners array, we can see our objects in there:

trace (natPress._listeners); // output: [object Object],[object Object]

Broadcasting the Event

We're finally at the sixth and final step--triggering the event to send the news. The NewsFeed.sendNews() method we defined takes three arguments: headline, summary, and url. We call natPress.sendNews() and pass strings for each of these:

natPress.sendNews ( "Macrosoft buys Micromedia",
     "After months of secret negotiations, Macrosoft absorbs its chief rival",
     "http://www.macrosoft.com" );

The two listeners respond immediately, sending this text to the Output window:

----- NABC News -----
> Macrosoft buys Micromedia <
After months of secret negotiations, Macrosoft absorbs its chief rival
>> http://www.macrosoft.com
[via National Press]
--
///// Ain't It Crazy News /////
Unbelievable!!
Macrosoft buys Micromedia!!!
National Press reports: 'After months of secret negotiations, Macrosoft absorbs its chief rival'
Read the rest of the incredible story here:
http://www.macrosoft.com
//

As an exercise, you can try creating your own listener and event handler, with a different template for the news.

There are many possible approaches to creating event sources. This tutorial has shown, through a simple example, how to design an object-oriented event source, using a class and ASBroadcaster. As you apply these concepts in your own projects, the elegance of event-based programming will hopefully result in faster implementation and cleaner code.