The Ellipse Tutorial - The Ellipse client event model's managment

Quick access:
The usual technique
Event management through the Ellipse technique
The Ellipse recommandating architecture

The usual technique

The traditional way to add an event manager to a Javascript object (it is possible to associate it with aa HTML tag), we affect a function with a member of the associated object and with the considered event. A member of an associated object with an event manager always begins with two characters on. In addition these members are still exclusively called in tiny (ex: onmouseover). Here is a small example.

 
window.onload = function() {
    alert( "Web Page totaly downloaded" );
} 

window.document.getElementById( "myTag" ).onclick = function() {
    alert( "Click detected" );
}

This technique, however, has a big problem if it is used with Javascript components supplied by the JWT library (Javscript Widget Toolkit): this library corresponds to the entire of the Javascript client code of the Ellipse framework. Indeed the JWT components are use very much the Javascript events. So, if you add your event manager, you may return in conflict with the code of the JWT library. Indeed if we affect a function to a Javascript event manager, we replace this eventual manager. In contrary to the listeners of the Java library, the Javascript technology does not work by adding (but by replacing).

Event management through the Ellipse technique

The Ellipse framework solves the problem in the following manner: the function addEventHandler is to be used for adding any manager of event. It stores all the event managers in a table and the method onxxx (xxx represents a particular event) is defined to propagate the event on all the managers. It is clear that this technique requires you to stop using the traditional technique. The new mechanism works in append mode: it is therefore possible, for example, to add as many event managers that you want on the click event on the tag you want. Here is a small example.

 
01 <?xml version="1.0" encoding="ISO-8859-1" ?>
02 <web:Html xmlns:web="corelib.services.web.components"
03           xmlns:demo="corelib.services.web.samples.virtualcaddy.webcomponents"
04           codeBehind="corelib.services.web.webapplications.WebPage">
05     <head>
06         <title>Sample HTML page</title>
07     </head>
08     <body>
09         <div id="theNode">Click Me</div>
10     </body>
11 </web:Html>

File "TestEventHandler.wp"

 
addEventHandler( window, "onload", function( event ) {
    
    var node = document.getElementById( "theNode" );

    addEventHandler( node, "onclick", function( event ) {
        alert( "First handler fired " + event );
    });

    addEventHandler( node, "onclick", function( event ) {
        alert( "second handler fired " + event );
    });
	
});

File "TestEventHandler.js"

Additional informations: the function addEventHandler is defined in the file corelib/services/web/javascript/Core.js". Moreover, this function ensures that, whatever the browser (IE or Firefox), the event object will be passed in parameter of your manager (and this for more compatibility in your scripts).

The Ellipse recommandating architecture

Ellipse is a framework: as such it imposes a particular structure for your Web developments, and this to simplify and increase the productivity of these developments. This structure is called an "Ellipse reference architecture": it is presented throughout the tutorials of the Ellipse framework. In this reference architecture, you are advised to follow certain rules of good conduct, particularly at the level of the use of the event managers.

An Ellipse Web page can be splitted into several files, including: the web page file (with the extension .wp which contains the definition of the page presentation), the page class of the (it contains the server code) and the Javascript code file (with the extension .js which contains the specific client code of this webpage). This last file is loaded automatically, if it exists, of course.

The use of the tags' attributes to define the event managers is strongly discouraged (for example: <div onclick="alert('event fired');">). Indeed it does not permit the invocation of the function addEventHandler. It is better to define an attribute id and to associate an event manager through a Javascript code (as shown in the TestEventHandler example above). Thus, each file has its own responsibility.