From Ape Wiki
Contents |
[edit] Créer un plugin APE avec mootools
Mootools permet d'utiliser des fonctions avancées orientées objet en javascript. Il est donc conseillé de suivre le schéma suivant pour créer un plugin APE, ou même un simple application.
Dans cet exemple nous allons créer un plugin de shoutbox
[edit] Pré-requis
Vous devez, pour suivre ce tutoriel :
- Avoir installé et configuré votre serveur APE et le module chat.
- Connaitre Mootools un minimun
- Utiliser Firefox avec Firebug
[edit] Création d'une classe
Voici le schéma classique d'une classe pour créer un plugin APE.
var Ape_shoutbox = new Class({ //La classe doit implémenter Ape_client pour intercepter les évènements Implements: Ape_client, //Constructeur de la classe initialize: function(core){ //Pour que Ape_client fonctionnement correctement il faut créer une variable de classe _core this._core = core; } });
[edit] Personnaliser la classe
Nous allons maintenant modifier le constructeur de notre classe pour :
- Faire passer en paramètre l'élement dans lesquel la shoutbox va devoir être insérée
- Demander un pseudo a l'utilisateur
- Se connecter au serveur APE à l'aide de la méthode start
//Constructeur de la classe initialize: function(core,container){ //Pour que Ape_client fonctionnement correctement il faut créer une variable de classe _core this._core = core; //Objet destiné à contenir les eléments du DOM this.els = {}; //Element dans lequel la shoutbox sera présente this.els.container = $(container); //Demande du pseudo var nickname = prompt('Entrez votre pseudo') if(nickname){ //Appel de la méthode start() du core pour lanncer la connexion this._core.start(nickname); } }
[edit] Initialisation de votre classe
Créez une page HTML vide et placez le code suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en"> <head> </head> <body> <!-- Mootools --> <script type="text/javaScript" src="./js/mootools.js"></script> <!-- Ape client utilisé pour démmarer APE --> <script type="text/javaScript" src="./APE_JSF/ape_client.js"></script> <!-- Script de shoutbox --> <script type="text/javaScript" src="./moo_demo.js"></script> <!-- Démarrage de APE --> <script type="text/javaScript"> //Url où est le JSF var base_url = 'http://votre-site.com/APE_JSF/'; //Instanciation de Ape_client var ape_client = new Ape_client(); //Initialisation de APE ape_client.load({ //Domaine de votre site 'domain':'votre-site.com', //Adresse de votre server APE 'server':'ape.votre-site.com', //Channel sur lequel les utilisateurs sont connectés automatiquement 'channel':'shoutbox', //Fonction exécuter une fois le core de APE chargé 'complete':function(ape){ //Initialisation de la shoutbox var shoutbox = new Ape_shoutbox(ape,'demo_shoutbox'); }, //Scripts à charger dans l'iframe 'scripts': [base_url+'/ape_core.js'] }); </script> <div id="demo_shoutbox"></div> </body> </html>
Affichez la page dans votre navigateur, une fenêtre va vous demander votre nom d'utilisateur. Une fois le nom d'utilisateur entré, la connexion au serveur APE s'effectue. Si vous regardez dans votre console Firebug,vous verrez trois requètes Ajax :
- Un première effectuant la connexion (raw_login)
- Une seconde vous informant que vous avez rejoint le channel shoutbox
- Une troisième encore ouverte en attente de nouveaux messages
[edit] Intercepter des évènements
Notre plugin se connecte au serveur APE, maintenant nous voulons interagir avec celui ci.
Nous allons modifier le constructeur de notre classe pour intercepter les évènements qui nous intéressent.
[edit] L'évènement new_pipe
- L'évènement new_pipe qui est envoyé quand l'utilisateur rejoint un channel (pipe)
Et nous allons ajouter la méthode create_shoutbox qui est exécutée lorsque l'évènement new_pipe est lancé. L'évènement new_pipe transmet en argument l'objet pipe venant d'être créé.
//Constructeur de la classe initialize: function(core,container){ //Pour que Ape_client fonctionnement correctement il faut créer une variable de classe _core this._core = core; //Objet destiné à contenir les eléments du dom this.els = {}; //Element dans lequel la shoutbox sera présente this.els.container = $(container); //Demande du pseudo var nickname = prompt('Entrez votre pseudo') if(nickname){ //Appel de la méthode start() du core pour lancer la connexion this._core.start(nickname); } //Interception de la création d'un nouveau pipe this.add_event('new_pipe',this.create_shoutbox); }, /*** * Créer la shoutbox */ create_shoutbox:function(pipe,options){ /*** * Définition d'une variable de classe content l'objet pipe * Il serra utilise pour envoyer les messages */ this.pipe = pipe; //Création de la shoutbox this.els.shoutbox = new Element('div',{ 'id':'shoutbox'}).inject(this.els.container); //Ajout d'un élement pour contenir les messages reçus this.els.shoutbox_msg = new Element('div',{'id':'shoutbox_msg'}).inject(this.els.shoutbox); //Ajout du formulaire d'envoie de message this.els.shoutbox_form = new Element('form').inject(this.els.shoutbox); this.els.shoutbox_input = new Element('input',{'type':'text','class':'text'}).inject(this.els.shoutbox_form); //Input pour le texte new Element('input',{'class':'submit','type':'submit','value':'Envoyer'}).inject(this.els.shoutbox_form); //Bouton envoyer //Lorsque le formulaire est soumis, la méthode post_message est exécuté this.els.shoutbox_form.addEvent('submit',this.post_message.bindWithEvent(this)); }
Notre classe peut à présent se connecter au serveur APE, rejoindre un channel et afficher la shoutbox. Si vous tentez de poster un message vous obtiendrez une erreur javascript car la méthode permettant d'envoyer le message n'est pas encore définie.
[edit] Envoi de message
Nous allons maintenant interagir avec le serveur :
- Ajouter un évènement à la soumission du formulaire pour poster le message
- Intercepter la commande send (qui envoie le message au serveur ape) et afficher le message dans la shoutbox
[edit] Méthode post_message
Cette méthode est exécutée lorsque le formulaire est soumis. Dans cette méthode, nous allons utiliser la méthode send() de l'objet pipe pour envoyer le message au serveur.
/*** * Envoie un message */ post_message: function(ev){ //Empèche au formulaire d'être soumis ev.stop(); //Récupération du contenu de l'input var msg = this.els.shoutbox_input.get('value'); //Enlève les espaces en début et fin de chaine msg = msg.trim(); //Si le message n'est pas vide, il est envoyé if(msg!=''){ //Envoi du message a l'aide de la méthode send() de l'objet pipe this.pipe.send(msg); //Effacement de l'input this.els.shoutbox_input.set('value',''); } }
[edit] Affichage du message
Pour afficher le message nous allons intercepter la commande send. Rajouter dans le constructeur le code suivant :
//Envoie d'un message this.add_event('cmd_send',this.cmd_send);
[edit] Méthode cmd_send
Note : Cette méthode fait appel a une variable du core user. Cette variable est automatiquement instanciée par le core après le login de l'utilisateur. Elle contient toutes les propriétés d'un utilisateur ainsi que son pubid.
/*** * Intercepte la commande send et écrits le message dans la shoutbox */ cmd_send: function(pipe,sessid,pubid,message){ this.write_message(message,this._core.user.properties.name); }, /*** * Écrit un message dans la shoutbox */ write_message: function(message,sender_nickname){ //Création d'un élement pour contenir le message var msg_container = new Element('div',{'class':'msg_container'}).inject(this.els.shoutbox_msg,'top'); //Ajout du pseudo new Element('span',{ 'class':'pseudo', 'text':sender_nickname+' dit : ' }).inject(msg_container); //Ajout du msg new Element('span',{ 'class':'msg', 'text':unescape(message) //les messages reçu du serveur sont echappés }).inject(msg_container); }
[edit] L'évènement raw_data
A ce stade, votre shoutbox est capable d'envoyer des messages mais pas d'en recevoir il reste a implémenter l'évènement raw_data qui est lancé lorsque un message est reçu. Rajouter dans le constructeur le code suivant :
//Réception d'un message this.add_event('raw_data',this.raw_data);
[edit] Méthode raw_data()
Pour finir La méthode raw_data() qui, lors de la réception d'un message,l'écrit dans la shoutbox à l'aide de la méthode write_message :
/*** * Intercepte le raw data et écrit le message dans la shoutbox */ raw_data: function(raw, pipe){ this.write_message(raw.datas.msg,raw.datas.sender.properties.name); }
[edit] Rendu final
var Ape_shoutbox = new Class({ //La classe doit implémenter Ape_client pour intercepter les évènements Implements: Ape_client, //Constructeur de la classe initialize: function(core,container){ //Pour que Ape_client fonctionnement correctement il faut créer une variable de classe _core this._core = core; //Objet destiné a contenir les eléments du dom this.els = {}; //Element dans lequel la shoutbox serra présente this.els.container = $(container); //Interception de la création d'un nouveau pipe this.add_event('new_pipe',this.create_shoutbox); //Envoie d'un message this.add_event('cmd_send',this.cmd_send); //Réception d'un message this.add_event('raw_data',this.raw_data); //Demande du pseudo var nickname = prompt('Entrez votre pseudo') if(nickname){ //Appel de la méthode start() du core pour lancer la connexion this._core.start(nickname); } }, /*** * Intercepte le raw data et écrit le message dans la shoutbox */ raw_data: function(raw, pipe){ this.write_message(raw.datas.msg,raw.datas.sender.properties.name); }, /*** * Intercepte la commande send et écrit le message dans la shoutbox */ cmd_send: function(pipe,sessid,pubid,message){ this.write_message(message,this._core.user.properties.name); }, /*** * Écrit un message dans la shoutbox */ write_message: function(message,sender_nickname){ //Création d'un élement pour contenir le message var msg_container = new Element('div',{'class':'msg_container'}).inject(this.els.shoutbox_msg,'top'); //Ajout du pseudo new Element('span',{ 'class':'pseudo', 'text':sender_nickname+' dit : ' }).inject(msg_container); //Ajout du msg new Element('span',{ 'class':'msg', 'text':unescape(message) //les messages reçu du serveur sont echappés }).inject(msg_container); }, /*** * Créer la shoutbox */ create_shoutbox:function(pipe,options){ /*** * Définition d'une variable de classe content l'objet pipe * Il serra utilisé pour envoyer les message */ this.pipe = pipe; //Création de la shoutbox this.els.shoutbox = new Element('div',{ 'id':'shoutbox'}).inject(this.els.container); //Ajout d'un élement pour contenir les messages reçus this.els.shoutbox_msg = new Element('div',{'id':'shoutbox_msg'}).inject(this.els.shoutbox); //Ajout du formulaire d'envoie de message this.els.shoutbox_form = new Element('form').inject(this.els.shoutbox); this.els.shoutbox_input = new Element('input',{'type':'text','class':'text'}).inject(this.els.shoutbox_form); //Input pour le texte new Element('input',{'class':'submit','type':'submit','value':'Envoyer'}).inject(this.els.shoutbox_form); //Bouton envoyer //Lorsque le formulaire est soumis, le message est envoyé this.els.shoutbox_form.addEvent('submit',this.post_message.bindWithEvent(this)); }, /*** * Envoie un message */ post_message: function(ev){ //Empèche le formulaire d'être soumis ev.stop(); //Récupération du contenu de l'input var msg = this.els.shoutbox_input.get('value'); //Enlève les espaces en début et fin de chaine msg = msg.trim(); //Si le message n'est pas vide, il est envoyé if(msg!=''){ this.pipe.send(msg); //Effacement de l'input this.els.shoutbox_input.set('value',''); } } });
[edit] Conclusion
Cette classe présente de manière succinte la fonctionnement du framework javascript d'APE. Il reste cependant certaines fonctions a implémenter :
- Détecter les erreurs sur les noms d'utilisateur (pseudo déjà pris ou incorrect)
- Ajouter la gestion des sessions pour que la shoutbox fonctionne sur toutes les pages d'un site
Languages : 
