Welcome!

Weblogic Authors: Yeshim Deniz, Elizabeth White, Michael Meiner, Michael Bushong, Avi Rosenthal

Related Topics: Machine Learning , Java IoT, Adobe Flex, AJAXWorld RIA Conference & Expo, Agile Computing, Apache

Machine Learning : Article

Event-Driven Web Application Design

"The era of boring web sites is over !"

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);


More Stories By Christian Heilmann

Christian Heilmann is the author of 'Beginning JavaScript with DOM Scripting and AJAX' and he contributed a chapter on accessible JavaScript to Web Accessibility: Web Standards and Regulatory Compliance. He has worked in web development for almost 9 years for several agencies and .coms, is currently a lead developer at Yahoo! in England. Chris blogs at http://wait-till-i.com.

Comments (1) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
riccardo molti 11/21/07 08:08:38 AM EST

So web developers are now 'Front-end engineers' - I like it! Let em start looking at Yahoo! UI, sounds cool.

IoT & Smart Cities Stories
DXWorldEXPO LLC announced today that Telecom Reseller has been named "Media Sponsor" of CloudEXPO | DXWorldEXPO 2018 New York, which will take place on November 11-13, 2018 in New York City, NY. Telecom Reseller reports on Unified Communications, UCaaS, BPaaS for enterprise and SMBs. They report extensively on both customer premises based solutions such as IP-PBX as well as cloud based and hosted platforms.
To Really Work for Enterprises, MultiCloud Adoption Requires Far Better and Inclusive Cloud Monitoring and Cost Management … But How? Overwhelmingly, even as enterprises have adopted cloud computing and are expanding to multi-cloud computing, IT leaders remain concerned about how to monitor, manage and control costs across hybrid and multi-cloud deployments. It’s clear that traditional IT monitoring and management approaches, designed after all for on-premises data centers, are falling short in ...
The deluge of IoT sensor data collected from connected devices and the powerful AI required to make that data actionable are giving rise to a hybrid ecosystem in which cloud, on-prem and edge processes become interweaved. Attendees will learn how emerging composable infrastructure solutions deliver the adaptive architecture needed to manage this new data reality. Machine learning algorithms can better anticipate data storms and automate resources to support surges, including fully scalable GPU-c...
A valuable conference experience generates new contacts, sales leads, potential strategic partners and potential investors; helps gather competitive intelligence and even provides inspiration for new products and services. Conference Guru works with conference organizers to pass great deals to great conferences, helping you discover new conferences and increase your return on investment.
Poor data quality and analytics drive down business value. In fact, Gartner estimated that the average financial impact of poor data quality on organizations is $9.7 million per year. But bad data is much more than a cost center. By eroding trust in information, analytics and the business decisions based on these, it is a serious impediment to digital transformation.
We are seeing a major migration of enterprises applications to the cloud. As cloud and business use of real time applications accelerate, legacy networks are no longer able to architecturally support cloud adoption and deliver the performance and security required by highly distributed enterprises. These outdated solutions have become more costly and complicated to implement, install, manage, and maintain.SD-WAN offers unlimited capabilities for accessing the benefits of the cloud and Internet. ...
Business professionals no longer wonder if they'll migrate to the cloud; it's now a matter of when. The cloud environment has proved to be a major force in transitioning to an agile business model that enables quick decisions and fast implementation that solidify customer relationships. And when the cloud is combined with the power of cognitive computing, it drives innovation and transformation that achieves astounding competitive advantage.
SYS-CON Events announced today that Silicon India has been named “Media Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Published in Silicon Valley, Silicon India magazine is the premiere platform for CIOs to discuss their innovative enterprise solutions and allows IT vendors to learn about new solutions that can help grow their business.
DXWorldEXPO LLC announced today that "IoT Now" was named media sponsor of CloudEXPO | DXWorldEXPO 2018 New York, which will take place on November 11-13, 2018 in New York City, NY. IoT Now explores the evolving opportunities and challenges facing CSPs, and it passes on some lessons learned from those who have taken the first steps in next-gen IoT services.
SYS-CON Events announced today that CrowdReviews.com has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5–7, 2018, at the Javits Center in New York City, NY. CrowdReviews.com is a transparent online platform for determining which products and services are the best based on the opinion of the crowd. The crowd consists of Internet users that have experienced products and services first-hand and have an interest in letting other potential buye...