Frameworks javascript/Ajax

Frameworks javascript/Ajax
1. Introduction
2. Quelques sites Ajax/Web 2.0 qui montrent ce que l'on peut attendre des futures applications web
3. Etude du toolkit Dojo
4. TP MBDS Janvier 2010
5. TP Novembre 2009
5.1. Les bases de Dojo
5.2. Dojo avancé 1 : utilisation des widgets et des ItemFileStore (dernier exercice du TP)
5.3. Dojo avancé 2 : Widget type DataGrid
6. Ancien TP de 2008
6.1. Récupérer et exécuter le projet exemple
6.2. Etude des exemples faisant des appels Ajax
6.3. Etude des exemples utilisant des datastores en JSON
Introduction
Dans cette séance nous allons étudier quelques frameworks javascript, indépendants du langage de
programmation utilisé pour coder la partie serveur des applications. Ces frameworks seront utilisables
ainsi avec des applications web écrites en java, php, C#/.net, Python, Ruby etc...
Ces frameworks ont plusieurs choses en commun : ils facilitent les appels Ajax, ils proposent une API de
mnipulation du DOM simplifiée et sont accompagnés d'un ensemble de widgets graphiques évolués,
facilitant l'écriture de GUI riches. Néanmoins, ils possèdent des caractéristiques qui leurs sont propres,
et peuvent cohabiter au sein d'une même application. On rencontre souvent une application basée sur
le toolkit Dojo, mais utilisant de ci, de là, une animation réalisée à l'aide d'un morceau de scriptaculous
ou encore ici un petit widget en provenance de la yahoo ui.
• Scriptaculous un toolkit très orienté animation. Testez donc les démonstrations (liens depuis les
bulles de la page principale), en particulier drag'n'drop et autocompleter. Utilisez la touche F12 pour
voir à l'aide de firebug les échanges HTTP.
• Dojo, un toolkit très complet, créé initialement par la société Jot.com aujourd'hui rachetée par
Google. Il a servi entre autre à crééer la plateforme JotSpot (devenu Google Sites), le wiki de la
communauté US des utilisateurs de Ebay, etc. Gros support pour ce toolkit (developpeurs initiaux
chez Google + communauté très active avec contributions de Sun, IBM, Adobe, etc. Voir la page
wikipedia US : http://en.wikipedia.org/wiki/Dojo_Toolkit).
• http://dojocampus.org/ : site web contenant des tutoriaux, la documentation, des exemples,
etc.
1
• http://dojocampus.org/explorer/ : les démos interactives avec source à copier/coller dans
ses propres programmes.
• ExtJs, similaire à Dojo, ce toolkit très puissant est doté d'une très large gamme de widgets. Il est open
source et a rencontrérencontre un succès grandissant, avant que la licence ne change. Il est toujours
open source ma sa licence devient payante pour des utilisations commerçiales.
• Démos interactives de ExtJs
• Rico : encore un framework, moins connu que les autres, plus léger. Essayez entre autre la démo
"javascript updater" (regardez le XML renvoyé en utilisant le widget accordéon)
• http://www.dhtmlgoodies.com : un ensemble de scripts DHTML suffisament riches pour faire un
desktop dans une page web ! C'est un des framewokrs les plus riches pour créer un windows manager
en javascript ! Cliquez sur "MenuScript" ou "Windows Script" puis sur les liens de démo.
• Spry, un framework propriété d'Adobe. Permet de faire des applications web multimédia (photos,
etc.) très belles et très frime.
• Le site de démo de Spry. Testez en particulier les "Effects démo" Shake, etc...
• Yahoo User Interface Library, plus connue sous le nom de YUI : énorme bibliothèque de goodies
(widgets, gestionnaire de CSS portable et efficace, ajax utilities, etc.). Testez par exemple les
exemples de "l'animation utility" (une fois sur la page, cliquez sur le lien "exemples" pour avoir des
démos interactives). Contrairement aux autres frameworks, on peut utiliser simplement un tout petit
morceau de la Yahoo UI sans embarquer l'ensemble du framework. Par exemple, le widget "syntax
highlighter" permet d'inclure dans des pages web du code source avec couleurs, numéros de lignes,
etc... comme ceci :
<div id="test"></div>
<script>
var myAnim = new YAHOO.util.Anim('test', {
width: { to: 400 }
}, 1, YAHOO.util.Easing.easeOut);
</script>
• JQuery est un framework "minimaliste" qui ne pèse que 77 Ko dans un unique fichier (26 Ko dans sa
version compressée). Il facilite la manipulation du dom, des css, les appels ajax, la gestion des effets
d'animation, mais contrairement aux autres toolkits présentés dans le début de la liste il ne propose
pas de librairie de widgets (quoique des projets externes en proposent, comme
http://ui.jquery.com/). Il est très populaire du fait de sa simplicité et de ses performances. Son
apprentissage est très rapide. Les démos et tutoriaux sont accessible depuis le site principal. Avec
Dojo ce doit être un des frameworks les plus populaires.
2
Quelques sites Ajax/Web 2.0 qui montrent ce que l'on peut
attendre des futures applications web
• Zimbra : cliquez sur le bouton "skip registration, go to demo", entrez les caractères tordus comme
demandé, puis admirez un outlook du futur. Pour voir l'intérêt, cliquez sur la gauche sur le premier
lien Yahoo. Entrez un code postal au hasard, 06410 par exemple, et regardez une "application web"
qui montre que le web est une grosse machine virtuelle !
• Zoho : le plus gros concurrent asiatique des Google Apps ! Une suite complète de logiciels de
bureautique, CRM, gestion de projet, etc... Vous pouvez tester avec les logins/password que vous
donnera le professeur en TP.
• Etc...
Etude du toolkit Dojo
Etant donné que nous ne pouvons pas tout étudier, nous focaliserons le cours et le TP sur un des
toolkits les plus utilisé (sachant que JQuery a été étudié l'an dernier) : Dojo. Nous ré-utiliserons ce
Toolkit lors du TP sur les web services RESTful.
TP MBDS Janvier 2010
• Support de cours : Dojo MBuffa CarolMcDonald2010.ppt
• Sujet du TP ici : TP Dojo 1.3.2
TP Novembre 2009
Les bases de Dojo
Pour information, nous ferons au moins deux TPs sur Dojo... Dans ce premier TP nous étudions les
principes de base.
Nous utiliseronts les exercices et supports de cours du site javapassion.com pour l'étude de Dojo. Ils
sont très bien faits...
• Aller à cette adresse : http://www.javapassion.com/ajaxcodecamp/#Dojo_Toolkit_Basics
• récupérer le support de cours en format PDF ou Open Office (lien dans la page),
• Récupérer l'archive du TP (18Mo), qui contient la distribution Dojo et les projets d'exemple.
• Faire le "lab", suivre le lien "online lab document" dans la page... Les plus curieux pourront
aller voir les différentes ressources référencées.
Ceux qui auront terminé pourront s'occuper avec l'ancien TP de 2008... (un peu plus loin)
3
Dojo avancé 1 : utilisation des widgets et des ItemFileStore (dernier exercice
du TP)
Pas de surprise, le TP est la suite du suivant. Il s'agit ici de prendre contact avec la manipulation des
widgets Dojo, également avec une structure de donnée qui est très utilisée par Dojo : les ItemFileStore
qui sont des structures hiérarchisées pouvant être associées à des fichiers textes, jspn ou xml, chargés
en ajax, et servant de modèles pour différents types de widgets faisant alors office de "vues". Ce qu'il
manque à ce TP est une étude des widgets de type Grid/EditGrid (soit des tableaux triables et/ou
éditables) que l'on peut associer à des modèles. Nous verrons cela par la suite.
Aller à cette adresse : http://www.javapassion.com/ajaxcodecamp/#Dojo_Toolkit_Widgets
• récupérer le support de cours en format PDF ou Open Office (lien dans la page),
• Récupérer l'archive du TP (18Mo), qui contient la distribution Dojo et les projets d'exemple.
• Faire le "lab", suivre le lien "online lab document" dans la page... aller jusqu'à la fin, le dernier
exercice est assez important.
Dojo avancé 2 : Widget type DataGrid
A venir...
• Resource : la documentation sur les Grid de Dojo 1.3 sur DojoCampus.org :
http://docs.dojocampus.org/dojox/grid/DataGrid
• FAQ sur les DataGrid : http://www.dojotoolkit.org/forum/532
Ancien TP de 2008
Il s'agit d'un TP basé sur Dojo 1.2 (on est en 1.3.x). Normalement les exemples devraient tourner avec
dojo 1.3.x...
Support de cours :
• Dojo 1.2 par Carol Mc Donald
• Copie locale des transparents Open Office : dojo1.2.odp (1.4Mo)
4
Récupérer et exécuter le projet exemple
Le projet sur lequel nous allons travailler contient de nombreux exemples d'utilisation ce ce toolkit.
L'original est téléchargeable sur le site de Carol McDonald mais comme il fait 11Mo, je préfère vous
proposer une copie locale :
• dojo12App.zip
Il s'agit d'un projet Netbeans mais qui ne doit poser aucun soucis pour tourner sous Eclipse étant donné
qu'il n'utilise aucune librairie externe. Pour ceux qui sont sous Netbeans, dezippez le projet, ouvrez-le
avec netbeans 6.5, si jamais il indique qu'il y a un problème de serveur web, faites click droit dessus/
résoudre la référence au serveur web. Puis faites "Run".
Pour les utilisateurs d'Eclipse, tout le projet est dans src pour la partie java, les pages webs, jsp et dojo +
javascript sont dans le répertoire "web".
Si tout se passe bien, vous devriez obtenir dans votre navigateur :
5
Vous pouvez jouer avec tous les exemples, en prenant la peine de regarder les URLs affichez dans votre
navigateur, car ils indiquent les fichiers HTML qui contiennent le code javascript correspondant (et qui
sont par conséquent à étudier). *
Etude des exemples faisant des appels Ajax
Je vous recommande de passer du temps surtout sur les exemples utilisant les appels ajax XhrGet et
XhrPost, regardez en particulier ce dernier exemple qui montre comment Dojo facilite la gestion de
formulaires en ajax, avec l'envoi automatique des champs du formulaire.
Modifiez cet exemple (XhrForm) pour rajouter de nouveaux champs de formulaire (Nom et Prénom par
exemple), modifiez la JSP correspondant à l'appel Ajax pour qu'elle récupère l'ensemble des valeurs et
les affiche dans la chaine de caractère résultatnte.
6
Etude des exemples utilisant des datastores en JSON
Le format JSON est très populaire dès lors qu'il s'agit de sérialiser des objets en javascript. Etudiez les
exemples Dojo montrant comment manipuler ce type de données via des widgets spécialisés (DataGrid).
Récupéré depuis "http://miageprojet2.unice.fr/index.php?title=Intranet_de_Michel_Buffa/Cours_web_2.0_2009/
Frameworks_javascript%2F%2FAjax"
7