Contactez-nous

Kitpages
17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81

Par Philippe Le Van (@plv)

Evénements custom

Enjeux

Ajax est une technologie intéressante dans la mesure où elle peut dynamiser le web. Cependant elle a des implications fortes sur l'architecture d'un site web.

L'implication la plus forte en terme d'architecture est qu'il devient assez logique de déplacer le controller coté client (en javascript donc) au lieu de l'avoir coté serveur.

On revient donc à une architecture plus traditionnelle de client-serveur avec des MVC pour chaque composants coté client (on ne peut pas pousser le vice jusqu'à faire du java-swing en javascript, pour des raisons de performances...).

Dans ce genre d'archtecture, il faut pouvoir définir ses propres évènements. Plusieurs librairies javascript permettent de faire ça (dojo, YUI,...) mais j'ai tendance à m'appuyer sur la librairie "prototype" parce qu'elle est remarquablement bien pensée.

Voilà donc une librairie de création d'évènements en javascript basée sur prototype.

(Note : traditionnellement en javascript, on crée des fonctions dynamiquement pour gérer les évènements... Nous abordons ici une technique qui nous parrait moins être une source de bugs).

Utilisation

La librairie contient 2 classes :

Kitpages.util.EventSender
Kitpages.util.EventObject

Voilà un petit commentaire du code ci-dessous :

new Kitpages.util.EventSender(obj);

Ajoute à l'objet "obj" les fonctions qui vont lui permettre d'être "observable" (c'est lui qui enverra les évènements)
l'objet "obj" a donc 2 fonctions en plus (ajoutées par le constructeur EventSender) :

fire(eventName, message) : envoi l'évènement aux listeners
addListener(function) : ajoute un nouveau listener

obj.addListener(listenerObj.eventPerformed);

indiquer que la fonction listenerObj.eventPerformed va être appelée dès que l'objet "obj" appellera la méthode "fire". listenerObj.eventPerformed recevra en paramètre un objet de type Kitpages.util.EventObject

var obj = {
    doAction: function() {
        this.fire("eventName","");
    }
}
new Kitpages.util.EventSender(obj);
 
var listenerObj = {
    eventPerformed: function(eventObj) {
        alert("event performed : name="+eventObj.getName());
    }
}
 
obj.addListener(listenerObj.eventPerformed);
 
obj.doAction();

objet EventObject

L'objet EventObjet a une API très simple :

evtObj.getName() : renvoie le nom de l'évènement
evtObj.getSource() : renvoie l'objet qui a créé l'évènement
evtObj.getContent() : renvoie le message passé en paramètre à la fonction "fire"

Téléchargement

Télécharger le fichier : KitpagesEvent.js

Je vous demanderais de mettre un lien vers le site http://www.kitpages.fr quelque part sur votre site si vous utilisez cette librairie.

Commentaires

Note : on ne peut plus ajouter de commentaire sur ce site

Navigation