1. Ajax en Java
Sujets spéciaux en TI
Concepts et outils
École de technologie supérieure
par
Claude Coulombe
GTI-780 / MTI-780 ETS - Montréal - 2009

2. Applications Web en Java - rappel
3 tiers : présentation, application, base de données
MVC (Modèle-Vue-Contrôleur) Servlets jouent le rôle du contrôleur, les pages JSP la vue et les
JavaBeans et la BD sous-jacente constituent le modèle
GTI-780 / MTI-780 * Source : Sun http://java.sun.com/javaee/5/docs/tutorial/doc/bnall.html ETS - Montréal - 2009

3. Applications Web en Java - rappel
On peut construire des applications web
simples en Java sans JEE
Servlets Java (HttpServlet)
Java Server Pages (JSP)
Simple serveur de pages et conteneur
de servlets comme Tomcat
GET et POST
EL* & JSTL**
GTI-780 / MTI-780 * EL: Unified Expresion Language ** JSTL: Java Server Tal Library ETS - Montréal - 2009

4. Ajax – Une véritable percée!
AJAX
Le premier à utiliser le terme AJAX
fut Jesse James Garrett en février 2005
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009

5. Ajax – Une véritable percée!
Ajax (Asynchronous JavaScript & XML)
Fini le pénible rechargement de pages!
Réalise des requêtes asynchrones au serveur
et fait la mise-à-jour de la page Web sans faire
de chargement complet
Applications Web plus réactives et plus
dynamiques
Objet XMLHttpRequest inventé par M$
Basé sur du code-client en JavaScript
GTI-780 / MTI-780 ETS - Montréal - 2009

6. Ajax – Diagramme de collaboration
Fureteur client
Fureteur client Interface utilisateur
Appel JavaScript
Interface utilisateur HTML + CSS
Moteur Ajax
Requête HTTP
Requête HTTP
Réponse HTTP
(HTML + CSS)
Réponse
XML / JSON / Texte
Serveur Web
Serveur Web et
XML / JSON/ Texte
Base de données,
systèmes de gestion
Serveur Base de données,
systèmes de gestion
Serveur
Application Web traditionnelle
Application Web Ajax
GTI-780 / MTI-780 Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php ETS - Montréal - 2009

7. Ajax – Diagramme de séquence - Web traditionnel
En mode synchrone, le fureteur est gelé en attendant la réponse du serveur.
GTI-780 / MTI-780 Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php ETS - Montréal - 2009

8. Ajax – Diagramme de séquence – Application Web Ajax
En mode asynchrone, l'exécution dans le fureteur sur le poste client se poursuit sans attendre la réponse
du serveur. La réponse sera traitée par une fonction de retour (fonction Callback) quand elle arrivera.
L'état de la requête est donné par l'attribut readyState de l'objet XMLHttpRequest.
GTI-780 / MTI-780 Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php ETS - Montréal - 2009

9. Canevas* d'applications Java & extensions Ajax
Echo Cocoon Millstone OXF Spring
Struts SOFIA Tapestry WebWork Spring MVC
RIFE Spring MVC Canyamo Maverick JPublish JATO
Folium Jucas Verge Niggle Bishop Facelets
JSF Barracuda
Action Framework Shocks TeaServlet Struts 1
WingS Expresso Bento jStatemachine Struts 2
Jzonic Tapestry
OpenEmcee Turbine Scope Warfare
JWAA Jaffa Jacquard Macaw WebWork
Smile MyFaces Chiba JBanana
Jeenius JWarp Genie Melati
Dovetail Cameleon JFormular Xoplon Japple Helma
Dinamica WebOnSwing
Nacho Cassandra Baritus Stripes Click GWT
GTI-780 / MTI-780 * Note : traduction de Framework également traduit par cadre d'applications ou cadriciel ETS - Montréal - 2009

10. Struts et Ajax
Canevas d'applications Web de 1ère génération, à base de
Servlet/JSP, (2000)
Centré serveur
Code source libre
Patron MVC (Modèle-Vue-Contrôleur), à base d'actions
Concept de la servlet contrôleur frontal (gère des événements et
déclenche des actions), les vues étant des pages JSP, le Modèle
une BD
Pas de composants
Encore très populaire
Support Ajax passe par DWR ou une bibliothèque d'étiquettes
comme Struts-Layout
On « enveloppe » un bout de code JavaScript/Ajax pour en faire
une étiquette (tag) JSP
http://struts.apache.org/
GTI-780 / MTI-780 ETS - Montréal - 2009

11. JavaServer Faces (JSF) et Ajax
JSF est une technologie du standard JEE (Java Enterprise Edition)
s'appuyant sur JSP* et une bibliothèque de composants
d'interface (étiquettes ou tags JSF), (2004)
Centré serveur, gère l'état des composants sur le serveur
Patron MVC
Code source libre
JSR 127, JSR 252, JSR 314
Composants Ajax intégrées à JSF
En général, on « enveloppe » un composant JavaScript pour en
faire une étiquette (tag) JSF
Par exemple, une étiquette JSF placera dans la page HTML un
menu déroulant et un code JavaScript qui appellera le serveur de
façon asynchrone pour une mise à jour dynamique.
http://java.sun.com/javaee/javaserverfaces/
GTI-780 / MTI-780 * Note : aussi Facelet ETS - Montréal - 2009

12. JSF et Ajax – Différents fournisseurs
JBoss RichFaces (anciennement ajax4jsf)
http://www.jboss.org/jbossrichfaces/
ICEFaces
http://www.icefaces.org/main/home/index.jsp
Oracle ADF
http://www.oracle.com/technology/products/adf/adffaces/index.html
Comparaison : http://www.jsfmatrix.net/
GTI-780 / MTI-780 Source : Jboss http://www.jboss.org/jbossrichfaces/ ETS - Montréal - 2009

13. JSF et Ajax – JBoss RichFaces
Exemple d'intégration d'une composante Ajax avec RichFaces
JBoss Seam est un canevas d'applications Web qui intègre Ajax,
JSF, EJB3 (Enterprise Java Beans) et les Portlets
http://www.jboss.com/products/seam
GTI-780 / MTI-780 Source : Jboss http://www.jboss.org/jbossrichfaces/ ETS - Montréal - 2009

14. Tapestry
Canevas d'applications Web en Java avec des
extensions Ajax, (2001)
Inspiré de WebObjects d'Apple
Centré serveur, Tapestry gère l'état des
composants sur le serveur (~JSF)
Patron MVC
Code source libre
Langage ONGL (Object-Graph Navigation Language)
Support Ajax via composants qui enveloppent
du JavaScript Prototype & Scriptaculous
http://tapestry.apache.org/
GTI-780 / MTI-780 ETS - Montréal - 2009

15. Wicket
Canevas d'applications Web en Java avec des
extensions Ajax (~ JSF et Tapestry), (2005)
Centré serveur, Wicket gère l'état des composants
sur le serveur
Patron MVC
Code source libre
API semblable à SWING (~GWT)
Bonne séparation de la présentation (pages en
XHTML) et de la logique (requête POST
Une page XHTML est liée à un composant Java et
à un modèle POJO (Plain Old Java Object)
http://wicket.apache.org/
GTI-780 / MTI-780 Source : http://wicketstuff.org ETS - Montréal - 2009

16. Wicket
// Un exemple de champ de texte avec suggestions
AutoCompleteTextField monChamp = new AutoCompleteTextField("Tapez", new Model(""))
{
protected Iterator getChoices(String entree) {
return monService.getPossibleChoices(entree);
}
};
GTI-780 / MTI-780 Source : http://wicketstuff.org ETS - Montréal - 2009

17. Wicket
// Ici, deux menus déroulants qui sont dépendants
private static void linkDropDownChoices(DropDownChoice menu1, final DropDownChoice menu2)
{ // s'assurer que le menu déroulant menu2 affichera son attribut Id
menu2.setOutputMarkupId(true);
// attribuer une fonction Callback réagissant à l'événement onchange sur le menu déroulant menu1
menu1.add(new AjaxFormComponentUpdatingBehavior("onchange") {
protected void onUpdate(AjaxRequestTarget cible) {
// lorsque l'événement onchange est déclenché pour menu1, actualiser le contenu de menu2
cible.addComponent(menu2);
}
});
}
GTI-780 / MTI-780 Source : http://wicketstuff.org ETS - Montréal - 2009

18. Echo 2
Canevas d'applications Web en Java (2005)
Centré serveur mais comporte un terminal graphique
relativement passif du côté client
Code source libre
Inspiré de SWING
Ajax sans écrire de JavaScript
Echo2 génère une application Java dont le code est délivré
par des Servlets sur le client
Le client contient un exécutable JavaScript chargé par le
fureteur. L'exécutable communique (HTTP et Ajax) avec le
serveur J2EE qui exécute une application Java.
Application riche en une seule page
http://echo.nextapp.com/site/
GTI-780 / MTI-780 Source: http://echo.nextapp.com/site/ ETS - Montréal - 2009

19. ZK
ZK est un canevas d'applications Ajax en Java
Ajax sans écrire de JavaScript
Code source libre, licence GPL 2
Bibliothèque de composants ~ SWING
Moins de programmation car il propose un
langage déclaratif de description des interfaces
basé sur XML (en fait XUL)
Centré serveur
http://www.zkoss.org/
GTI-780 / MTI-780 ETS - Montréal - 2009

20. Java Applet & JavaFX
Java Applet
Lourde, exige JVM
Nouvelle applet Java 6 version, plus légère et rapide
Réputation de lourdeur et de lenteur difficile à contrer
JavaFX
Trop tôt pour se prononcer (2008)
Exige JVM, langage à script
http://www.javafx.com/
GTI-780 / MTI-780 ETS - Montréal - 2009

21. OpenLaszlo
Canevas d'applications Web en Java (2002)
En code source libre, licence GPL
Langage déclaratif LZX de description des
interfaces basé sur XML
Serveur OpenLaszlo basé sur une servlet Java
qui compile l'application écrite en LZX vers un
exécutable
Client basé sur le plugiciel Flash d'Adobe
http://www.openlaszlo.org/
GTI-780 / MTI-780 Source: http://www.openlaszlo.org ETS - Montréal - 2009

22. jMaki
jMaki « enveloppe » un composant JavaScript
pour en faire une balise (tag) JSP ou JSF
Compatible avec Dojo, Scriptaculous, YUI
http://jmaki.com/
GTI-780 / MTI-780 * Source image: http://jmaki.com ETS - Montréal - 2009

23. DWR (Direct Web Remoting)
Boîte à outils : client (JavaScript) & serveur
(servlet Java DWRServlet), (2004)
Code source libre
Communication RMI (Remote Method Invocation),
entre des classes Java et des classes JavaScript
miroirs qui sont générées et ajout de Callbacks
Petit fichier de configuration dwr.xml
Capable de remplacer plusieurs servlets (i.e.
plusieurs URLs) en utilisant une structure de liste
pour des échanges groupés
http://directwebremoting.org/
GTI-780 / MTI-780 ETS - Montréal - 2009

24. GWT (Google Web Toolkit)
Création d'applications Ajax sans écrire de
JavaScript, (2006)
Centré client
Code source libre
Réalisé en Java le code client est compilé en
JavaScript
L'application cliente peut être déployée sur
n’importe quel serveur Web comme Apache
Le serveur peut être basé sur des servlets Java
ou tout autre technologie (PHP, Rails, Perl, .Net, …)
http://code.google.com/webtoolkit/
GTI-780 / MTI-780 ETS - Montréal - 2009

25. Java – Avantages & inconvénients
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009

26. Java - Avantages
“Write Once, Run Anywhere” (Windows, Linux, Mac OS X, Unix)
Maintenant en code source libre
Le langage du génie logiciel
Le royaume des patrons de conception
Le plus grand nombre de bibliothèques dans tous les domaines
Le plus grand nombre de canevas d'applications
Le plus grand nombre d'outils de toute sorte
Véritable langage de POO, langage à typage statique
Langage mature, sécuritaire et performant
Utilise de puissants EDI* comme Eclipse, Netbeans ou IntelliJ
La plus importante communauté de développeurs
Un nombre impressionnant de livres et une abondante
documentation sur le Web
GTI-780 / MTI-780 ETS - Montréal - 2009

27. Java - Inconvénients
Réputation de technologie compliquée et difficile à mettre en oeuvre.
Tendance à surcomplexifier, surdimensionner, à faire des « usines à
gaz », « disproportionnées », à concevoir pour résoudre tous les
problèmes. En anglais : over-sized, over-kill, over-featured, over-
engineered, over-complicated.
Par exemple, JEE (Java Enterprise Edition) conçu pour de très
grosses applications distribuées sur plusieurs machines a souffert de
cette tendance (EJB 2, SOAP)
Or une bonne ingénierie aboutit à une conception simple, élégante et
adaptable aux besoins. Il faut savoir se limiter, rester modeste.
C'est ce qui explique le succès de PHP, RoR et des outils logiciels
Google et l'inspiration qu'ils apportent à EJB3 et JEE 6
« Pourquoi faire simple quand on peut faire compliqué! »
GTI-780 / MTI-780 * Autres exemples : X Window, Corba ETS - Montréal - 2009

28. Choix des technologies Ajax en Java
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009

29. Autres critères
 Technologies centrées serveur versus centrées client
 (server-centric vs client-centric)
 Code source libre versus technologie propriétaire
 Licence libre : Apache, GPL, MIT, etc.
 100 % Java versus mixte, i.e. nécessitant de la programmation
en JavaScript
 Richesse de la bibliothèque
 Disponibilités d'outils, d'EDIs
 Facilité de programmation, productivité
 Endossement par des joueurs importants
 Support technique
 Documentation
 Taille et dynamisme de la communauté
GTI-780 / MTI-780 ETS - Montréal - 2009

30. Struts et Ajax - Conclusion
Struts 1.3
GTI-780 / MTI-780 ETS - Montréal - 2009

31. JSF et Ajax – Conclusion
Technologie complexe (ci-dessous le cycle de vie d'une composant JSF)
Difficultés si on mélange des composants de différents fournisseurs
Difficiles de créer de nouveaux composants « sur mesure »
Centré serveur
La bibliothèque de composants de base est insuffisante pour réaliser des
applications d'entreprise. Il faut se procurer des bibliothèques chez
différents fournisseurs.
À mon avis le meilleur choix d'outils pour combiner JSF et Ajax est JBoss
Seam avec RichFaces
GTI-780 / MTI-780 Source image : Sun http://java.sun.com/javaee/5/docs/tutorial/doc/bnaqq.html ETS - Montréal - 2009

32. Canevas d'applications Java & Ajax - Conclusion
Les canevas d'applications Web basé sur JSP ont
l’inconvénient majeur de nécessiter une bonne
connaissance de JavaScript pour pouvoir développer
en Ajax.
Normal, ils sont apparus avant Ajax (2005) et l'ajout
de fonctionalités Ajax est souvent une rustine (patch)
Si vous utilisez déjà un canevas d'applications et qu'il
possède une extension Ajax alors continuez avec ces
outils.
SVP, évitez de « réinventer la roue »* en créant votre
propre canevas d'application!
GTI-780 / MTI-780 * Note : en anglais NIH : pour Not Invented Here , le cancer du développement logiciel ETS - Montréal - 2009

33. GWT – « Le prochain gros truc! »
GWT
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009

34. Ressources - Livres
Ajax on Java
par Steven Olson, Steve Oualline
228 pages
O'Reilly Media, Inc.
(22 février, 2007)
www.oreilly.com/catalog/9780596101879/#top
GTI-780 / MTI-780 ETS - Montréal - 2009