Planning an Event-Driven Application

You can apply the same DOM-event style logic to anything that happens within your application itself. You can plan your application that way from the outset:

• Application is loaded
  • Initialize the stage
  • Get the locale
  • Load extra content
  • Load adverts
  • Display stage
• User changes language by activating a language component
  • Load extra content
  • Load adverts
  • Display Stage

The only thing that’s missing is turning this event plan (once it is finished for the first phase) into real code, and this is where the browser or JavaScript does not give us the built-in interfaces that we’d like to have for the purpose.

Beyond DOM Events: The Custom Event

Whenever the browser or JavaScript itself lets us down we turn to JavaScript libraries to solve the problem. In this case we’ll use the Yahoo! User Interface Library (YUI) with its Custom Event Object. This object allows you to define any event you like, subscribe listener methods to it, and fire the event whenever you want. It’s like simulating a click on a button. Internally, the YUI uses Custom Events a lot to trigger different reactions. For example the Animation utility allows not only for the animation of elements but makes it easy to create successive animations by providing onStart, onComplete and onTween Custom Events.

Using these events you can put together a web app that is easy to change, extend and maintain.

A Quick Example of an Event-Plan Driven Application

Let’s take a look at an example how all of this could work. As our application example we have an HTML document with two components: one to change the language, and another to change the layout. The application links DOM events (such as click events when the user clicks on links) to meaningful "interesting moments" in the application, moments that we encapsulate in Custom Events; for example, the user choosing to change the layout of the page is encapsulated in a Custom Event, and when that event is triggered we activate the scripts which perform layout modification.

All links here point to PHP scripts that would perform similar transformations on the server side to ensure that we are not dependent on JavaScript (for this example, however, we’ll look only at the client-side code).

eventPlanExample.html (excerpt):

<ul>
   <li>Change Language:
     <ul id="languages">
       <li><a href="test.php?lang=en">English</a></li>
       <li><a href="test.php?lang=de">Deutsch</a></li>
       <li><a href="test.php?lang=nl">Neederlands</a></li>
     </ul>
   </li>
</ul>
<ul>
   <li>Change Layout:
     <ul id="layout">
       <li><a href="test.php?layout=onecolumn">One Column</a></li>
       <li><a href="test.php?layout=threecolumns">Three Columns</a></li>
     </ul>
   </li>
</ul>

Now for the important bit: we define an event plan with Custom Events and subscribe the necessary tool methods to each custom event:

customEvents.js:

// Changing the language
   languageChange = new YAHOO.util.CustomEvent('language change');

   languageChange.subscribe(retrieveData);
   languageChange.subscribe(renderLayout);
   languageChange.subscribe(ads);
   languageChange.subscribe(pageWidgets);

// Changing the layout
   layoutChange = new YAHOO.util.CustomEvent('layout change');

   layoutChange.subscribe(renderLayout);
   layoutChange.subscribe(ads);
   layoutChange.subscribe(pageWidgets);