The NWS Tutorial

The NWS client event model's managment



Quick access:
   The usual technique
   Event management through the NWS technique
   The NWS 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 NWS 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 NWS technique

The NWS 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.server.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 NWS recommandating architecture

NWS 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 a "NWS reference architecture": it is presented throughout the tutorials of the NWS 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.

A NWS 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: <divonclick="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.



CAUTION : NWS is proposed to you in BETA version to allow evaluation of this framework. Infini Software is released from any responsibility for the use of framework NWS. In addition, Infini Software can in no way be liable for the use of information contained in these tutorials.

Dominique LIARD - © 2007 SARL Infini Software - All rights reserved
Other brands and product names in these documents are the property of their respective owners.