Ellipse Tutorial

Le modèle de gestion d'événements clients Ellipse

Accès rapide :
La technique habituelle
Gestion des événements via la technique Ellipse
Architecture de référence Ellipse

La technique habituelle

De manière traditionnelle, pour ajouter un gestionnaire d'événement à un objet Javascript (éventuellement associé à un tag HTML) on affecte une fonction à un membre de l'objet associé à l'événement considéré. Un membre d'un objet associé à un gestionnaire d'événements commence toujours par les deux caractères on. De plus ces membres sont toujours nommés exclusivement en minuscule (ex: onmouseover). Voici un petit exemple.

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

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

Cette technique pose néanmoins un gros problème si elle est utilisée avec les composants Javascript fournis par la librairie JWT (Javscript Widget Toolkit) : cette librairie correspond à l'ensemble du code client Javascript du framework Ellipse. Effectivement les composants JWT font un très large usage des événements Javascript. Du coup, si vous ajoutez votre gestionnaire d'événement, il se peut que vous rentriez en conflit avec le code de la librairie JWT. Effectivement si on affecte une fonction à un gestionnaire d'événements Javascript on remplace l'éventuel gestionnaire précédent. Contrairement aux listeners de la librairie Java, la technique Javascript ne fonctionne pas en ajout (mais bien en remplacement).

Gestion des événements via la technique Ellipse

Le framework Ellipse règle le problème de la manière suivante : la fonction addEventHandler est à utiliser pour tout ajout de gestionnaire d'événement. Celle-ci stocke tous les gestionnaires d'événements dans un tableau et la méthode onxxx (ou xxx représente un événement particulier) est définie pour propager l'événement sur l'ensemble des gestionnaires. Il est clair que cette technique vous impose de ne plus utiliser la technique traditionnelle. Le nouveau mécanisme fonctionne en mode ajout : il vous est donc possible, par exemple, d'ajouter autant de gestionnaires d'événements que vous souhaitez sur l'événement clic sur un tag quelconque. Voici un petit exemple.

 
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>

Fichier "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 );
    });
	
});

Fichier "TestEventHandler.js"

Informations complémentaires : la fonction addEventHandler est définie dans le fichier corelib/services/web/javascript/Core.js". Qui plus est, cette fonction garantie que, quelque soit le navigateur (IE ou Firefox), l'objet d'événement sera passé en paramètre de votre gestionnaire (et ce pour plus de compatibilité dans vos scripts).

Architecture de référence Ellipse

Ellipse est un framework : en tant que tel il impose une structuration particulière pour vos développements Web, ceci dans le but de simplifier et d'augmenter la productivité de ces développements. Cette structuration est appelée "Architecture de référence Ellipse" : elle est présentée tout au long des tutoriaux relatifs au framework Ellipse. Dans cette architecture de référence, il vous est recommandé de suivre certaines règles de bonne conduite, et ce notamment au niveau de l'utilisation des gestionnaires d'événements.

Une page Web Ellipse peut être découpée en plusieurs fichiers et notamment : le fichier de page Web (d'extension .wp qui contient la définition de la mise en page), la classe de page (elle contient le code serveur) et le fichier de code Javascript (d'extension .js qui contient le code client spécifique à cette page Web). Ce dernier fichier étant chargé automatiquement, pour peu qu'il existe, bien entendu.

L'utilisation des attribut de tags pour définir les gestionnaires d'événement est fortement déconseillée (par exemple : <div onclick="alert('event fired');">). Effectivement elle ne permet pas l'invocation de la fonction addEventHandler. Il est préférable de définir un attribut id et d'affecter un gestionnaire d'événement par le biais d'un code Javascript (comme le montre l'exemple TestEventHandler vu ci-dessus). Ainsi, chaque fichier à sa propre responsabilité.

ATTENTION : Ellipse Framework vous est proposé en version beta (d'évaluation) afin de vous permettre d'évaluer ce framework. Infini Software se dégage de toutes responsabilités relatives à l'utilisation de ce framework. De plus, Infini Software ne pourra nullement être tenu responsable de l'utilisation des informations présentes dans ces tutoriaux.