Frameworks javascript/Ajax

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, propriété de 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 de Google + communauté très active).
  
  • http://dojocampus.org/ : site web contenant des tutoriaux, la documentation, des exemples, etc.
  • 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 mais rencontre un succès grandissant, en particulier dans sa mouture GwtExt, qui n'est autre que le framework extjs "encapsulé" dans des widgets GWT (nous y reviendrons).
  
  • 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.). 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>

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.

Etude du toolkit Dojo

Etant donné