Navigation

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

Ajouter un commentaire