Tutoriel Chat AJAX Partie 2 : Prototype, Scriptaculous, Application HTML

Transcription

1 Tutoriel Chat AJAX Partie 2 : Prototype, Scriptaculous, Application HTML Prototype et Scriptaculous Pour cette application de "chat" nous utiliserons deux librairies populaires de Javascript : Prototype et Scriptaculous. Prototype est un Framework Javascript qui vise à faciliter le développement d'applications web dynamiques. Au risque de se faire passer pour un traître vis à vis de PHP (humour) il a été intégré dans le Framework Ruby On Rails, ce qui signifie qu'il est utilisé comme un standard aujourd'hui. Les fonctionnalités de "class-based" de Prototype en Javascript offrent des possibilités intéressantes aux développeurs telles que le composant AJAX, qui intègre des raccourcis faisant appel à des fonctions Javascript, des extensions de classes Javascript, et davantage encore. Une partie de la très bonne documentation de Prototype se trouve sur Nous allons utiliser la version actuelle 1.5.0_rc1 intégrant la librairie Scriptaculous mais cette excellente documentation s'applique toujours. Scriptaculous (qui a été créé sur la base de Prototype) offre des effets visuels, beaucoup même. La combinaison de ces effets visuels ne sont pas juste fait pour la beauté des yeux. Utiliser Scriptaculous, avec des effets complexes comme "sliders", le "drag-and-drop", et d'autres fonctionnalités similaires peuvent être implémentées assez facilement sans aucun effort. Nous n'allons pas nous intéresser plus en détails dans cette librairie mais vous pouvez récupérer des exemples d'effets visuels en visitant Mise en place de Prototype et Scriptaculous Installer Prototype et Scriptaculous est assez simple. Téléchargez l'archive Scriptaculous depuis et extrayez-la dans le répertoire "/public/javascript". Renommez ce répertoire "scriptaculous". Scriptaculous inclut déjà la librairie Prototype 1.5.0_rc1 alors continuons. Tout ce dont on a besoin de faire est d'inclure les fichiers Javascript pour ces deux librairies dans notre application "chat" pour l'html. Application "chat" en HTML Notre application "chat" fonctionnera depuis une simple page HTML (XHTML 1.1) sans avoir besoin de rafraichir la page. L'absence de rechargements de la page est grâce à l'utilisation d'ajax. AJAX est basé principalement sur "XMLHttpRequest" qui est un navigateur objet inclut dans la plupart des

2 navigateurs récents (notamment Internet Explorer 7). "XMLHttpRequest" autorise au navigateur de procéder à des requêtes asynchrone en arrière plan, cad sans prévenir l'utilisateur. Combiné avec Javascript, "XMLHttpRequest" peut permettre aux requêtes de publier ses réponses à Javascript, qui peut modifier l'affichage de la page sans la recharger. La simple page HTML de notre tutoriel d'application "chat" est assez petite (ce sera plus simple pour vous de la modifier). Elle comprend deux premières parties, l'une pour garder les messages du "chat", et l'autre pour garder la liste des utilisateurs connectés. Une troisième partie contient des éléments de formulaire pour permettre aux utilisateurs d'envoyer leur message et changer leur pseudo. La liste des messages et des utilisateurs sont vides dans le gabarit puisque nous devrons envoyer des informations côté client en Javascript pour mettre à jour le contenu via AJAX. A form element is conspicuously missing html4strict. <html xmlns=" xml:lang="en"> <head> <title>chat Tutorial Application</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="language" content="en" /> <meta name="author" content="padraic Brady" /> <link rel="stylesheet" href="public/styles/chat.css" type="text/css" /> </head> <body> <div style="text-align: center;"> <h2>chat Application</h2> <p>this a simple Chat Application. Simply set your screen name and start chatting...</p> <div id="chatholder">  <div class="left">chat Messages</div> <div class="right">online Screen Names</div> <div class="clear"></div>  <div id="chatpane" class="left"></div> <div id="userlist" class="right"></div> <div class="clear"></div> <div id="control"> <p>your current username is: <span id="screenname"> <?php echo $this->escape($this->screenname)?> </span>.</p> Chat: <input type="text" value="" id="textmessage" size="50" maxlength="255" /> <input type="button" value="say it!" onclick="sendmessage()" /> <span id="loading" style="display:none;">loading...</span> <br /> <br /> Change Screen Name: <input type="text" value="" id="changename" size="15" maxlength="32" /> <input type="button" value="change!" onclick="changename()" /> </div>

3 </div> </div> </body> </html> Ce gabarit HTML doit être enregistré sous le nom de "index.tpl.php" dans notre répertoire "application/views". Nous n avons qu'une variable PHP qui nous intéresse, à savoir le titre de la page assigné à un nouveau visiteur. Comme vous avez pu le remarquer, nous n'avons pas inclut de bouton pour soumettre un formulaire. Nous n'avons pas l'intention d'en envoyer. A la place nous utiliserons Javascript pour récupérer la valeur de chaque élément du formulaire pour l'envoyer au serveur via une requête AJAX. Associée à la page HTML, nous utilisons aussi une feuille de style CSS. Elle doit être enregistrée sous le nom de "chat.css" dans le répertoire "public/styles". body { background-color: #f2ebce; #chatholder { background-color: #eada9d; border: 2px groove #fd9a26; padding-bottom: 5px;.left { width: 70%; margin: 4px; background-color: #ffffdd; border: 1px solid #fd9a26; float: left;.right { position: relative; margin-left: 71%; margin: 4px; background-color: #ffffdd; border: 1px solid #fd9a26; overflow: hidden; #chatpane.left { height: 250px; overflow: scroll; margin-top: 0px; background-color: #ffffff; #userlist.right { height: 250px; background-color: #ffffff;

4 #control { text-align: left; #loading { background-color: #fd9a26; color: #eada9d; font-weight: bold; width: 90px; margin-left: 100px; p { text-align: left; p.message { margin: 0px; span.screenname, #screenname { font-weight: bold;.clear { clear: both; Les deux fichiers HTML et CSS peuvent être modifiés comme vous le souhaitez. L'essentiel de ce gabarit contient le code minimum requis dont nous avons besoin pour faire fonctionner et afficher l'application "chat". Avec du temps, de l'inspiration (et beaucoup de tests sous Internet Explorer), quelque chose de plus esthétique peut être réussie. Modification de l'indexcontroller Quand nous initialisons le lancement de cette application, nous utiliserons par défaut la méthode IndexAction() de la classe IndexController que nous avons vu dans la première partie du tutoriel. Maintenant que nous avons le gabarit en place, nous pouvons tester en s'assurant que la méthode IndexAction du contrôleur analyse et "echo" l'application dans le navigateur. Le changement requis utilise la classe Zend_View que nous avons instancié plus tôt dans le fichier "Boostrap" index.php avant d'enregistrer dans le registre statique du Zend Framework son implémentation. class IndexController extends Zend_Controller_Action { public function IndexAction() { /* * Get View from Registry */ $view = Zend_Registry::getInstance()->get('view'); /*

5 * Render template and add to Response body */ $this->getresponse()->setbody( $view->render('index.tpl.php') ); Essayez d'ouvrir une nouvelle fois l'application "chat" dans votre navigateur. Comme vous pouvez le voir, le design extrêmement simpliste de l'application est en place. Il ne peut pas encore être utilisé comme une application "chat". Pour cela, nous aurons besoin d'inclure nos librairies Javascript et les rendre fonctionnelle. Inclure les librairies Javascript Une fois le design en place, notre prochaine étape est d'inclure les librairies Javascript sur la page. Nous finirons en beauté en utilisant trois fichiers Javascript. Les deux premières seront les librairies Prototype et Javascript. La troisième sera notre propre Javascript qui gèrera les requêtes AJAX et traitera les réponses depuis le serveur. Pour commencer, nous modifions la partie <head> de la page HTML en "html4strict". <head> <title>chat Tutorial Application</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="language" content="en" /> <meta name="author" content="padraic Brady" /> <link rel="stylesheet" href="public/styles/chat.css" type="text/css" /> <script src="public/javascript/scriptaculous/lib/prototype.js" type="text/javascript"></script> <script src="public/javascript/scriptaculous/src/scriptaculous.js" type="text/javascript"></script> <script src="javascript/chat.js" type="text/javascript"></script> </head> Le changement permet d'inclure les fichiers "prototype.js", "scriptaculous.js", et "chat.js". Le fichier "chat.js" n'existe pas encore. Nous devons le créer. Veuillez donc créer un nouveau fichier vide "chat.js" et l'enregistrer dans le répertoire "javascript" à la racine du dossier "chat-tutorial". Nous verrons l'écriture du code Javascript sur ce fichier dans la partie 5 de ce tutoriel. La prochaine partie du tutoriel nous renverra côté serveur où nous débuterons par implémenter une solution de stockage pour nos messages du "chat" en utilisant XML. Si XML a l'air d'une montagne à vos yeux, alors mettez vos peurs de côté. L'extension "SimpleXML" de PHP5 va venir à la rescousse :). Il a ses propres défauts, mais rien de bien inquiétant.

6 Le Zend Framework est une communauté basée sur un projet. Si vous êtes intéressé d'en apprendre davantage ou de contribuer à son développement, visitez cette page Traduction réalisé par R-Benyacoub.