Ajax en Java

                         Sujets spéciaux en TI
                          Concepts et outils
                ...
Applications Web en Java - rappel




      3 tiers : présentation, application, base de données

GTI-780 / MTI-780   * So...
Applications Web en Java - rappel
     On peut construire des applications web
     simples en Java sans JEE
     Servlets...
Ajax – Une véritable percée!




                    AJAX
                                                                ...
Ajax – Une véritable percée!
  Ajax (Asynchronous JavaScript & XML)
  Fini le pénible rechargement de pages!
  Réalise des...
Ajax – Diagramme de collaboration
                                                                                        ...
Ajax – Diagramme de séquence - Web traditionnel

 En mode synchrone, le fureteur est gelé en attendant la réponse du serve...
Ajax – Diagramme de séquence – Application Web Ajax

En mode asynchrone, l'exécution dans le fureteur sur le poste client ...
Canevas* d'applications Java & extensions Ajax

  Echo Cocoon Millstone OXF                  Spring
  Struts SOFIA    Tape...
Struts et Ajax
  Canevas d'applications Web de 1ère génération, à base de
  Servlet/JSP, (2000)
  Centré serveur
  Code so...
JavaServer Faces (JSF) et Ajax
  JSF est une technologie du standard JEE (Java Enterprise Edition)
  s'appuyant sur JSP* e...
JSF et Ajax – Différents fournisseurs
  JBoss RichFaces (anciennement ajax4jsf)
  http://www.jboss.org/jbossrichfaces/

  ...
JSF et Ajax – JBoss RichFaces
Exemple d'intégration d'une composante Ajax avec RichFaces




  JBoss Seam est un canevas d...
Tapestry
  Canevas d'applications Web en Java avec des
  extensions Ajax, (2001)
  Inspiré de WebObjects d'Apple
  Centré ...
Wicket
  Canevas d'applications Web en Java avec des
  extensions Ajax (~ JSF et Tapestry), (2005)
  Centré serveur, Wicke...
Wicket




// Un exemple de champ de texte avec suggestions
AutoCompleteTextField monChamp = new AutoCompleteTextField(quo...
Wicket




// Ici, deux menus déroulants qui sont dépendants
private static void linkDropDownChoices(DropDownChoice menu1,...
Echo 2
  Canevas d'applications Web en Java (2005)
  Centré serveur mais comporte un terminal graphique
  relativement pas...
ZK
  ZK est un canevas d'applications Ajax en Java
  Ajax sans écrire de JavaScript
  Code source libre, licence GPL 2
  B...
Java Applet & JavaFX

  Java Applet
                    Lourde, exige JVM
                    Nouvelle applet Java 6 versi...
OpenLaszlo
  Canevas d'applications Web en Java (2002)
  En code source libre, licence GPL
  Langage déclaratif LZX de des...
jMaki
  jMaki « enveloppe » un composant JavaScript
  pour en faire une balise (tag) JSP ou JSF
  Compatible avec Dojo, Sc...
DWR (Direct Web Remoting)
  Boîte à outils : client (JavaScript) & serveur
  (servlet Java DWRServlet), (2004)
  Code sour...
GWT (Google Web Toolkit)
  Création d'applications Ajax sans écrire de
  JavaScript, (2006)
  Centré client
  Code source ...
Java – Avantages & inconvénients




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, novembre 20...
Java - Avantages
  “Write Once, Run Anywhere” (Windows, Linux, Mac OS X, Unix)
  Maintenant en code source libre
  Le lang...
Java - Inconvénients
 Réputation de technologie compliquée et difficile à mettre en oeuvre.
 Tendance à surcomplexifier, s...
Choix des technologies Ajax en Java




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, novembre...
Autres critères
   Technologies centrées serveur versus centrées client
    (server-centric vs client-centric)
   Code s...
Struts et Ajax - Conclusion




                    Struts 1.3

GTI-780 / MTI-780                Montréal, novembre 2008
JSF et Ajax – Conclusion
  Technologie complexe (ci-dessous le cycle de vie d'une composant JSF)




  Difficultés si on m...
Canevas d'applications Java & Ajax - Conclusion

  Les canevas d'applications Web basé sur JSP ont
  l’inconvénient majeur...
GWT – « Le prochain gros truc! »




                                      GWT

GTI-780 / MTI-780   * Source Clipart : htt...
Ressources - Livres
Ajax on Java
par Steven Olson, Steve Oualline
228 pages
O'Reilly Media, Inc.
(22 février, 2007)
www.or...
Prochain SlideShare
Chargement dans…5
×

Ajax en Java - GTI780 & MTI780 - ETS - A08

2 764 vues

Publié le

Présentation sur Ajax en Java dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l\'Ecole de technologie supérieure, Montréal, Automne 2008

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 764
Sur SlideShare
0
Issues des intégrations
0
Intégrations
12
Actions
Partages
0
Téléchargements
144
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Ajax en Java - GTI780 & MTI780 - ETS - A08

  1. 1. Ajax en Java Sujets spéciaux en TI Concepts et outils École de technologie supérieure par Claude Coulombe GTI-780 / MTI-780 Montréal, novembre 2008
  2. 2. Applications Web en Java - rappel 3 tiers : présentation, application, base de données GTI-780 / MTI-780 * Source : Sun http://java.sun.com/javaee/5/docs/tutorial/doc/bnall.html Montréal, novembre 2008
  3. 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 Montréal, novembre 2008
  4. 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 Montréal, novembre 2008
  5. 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 Montréal, novembre 2008
  6. 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 Montréal, novembre 2008
  7. 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 Montréal, novembre 2008
  8. 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 Montréal, novembre 2008
  9. 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 Montréal, novembre 2008
  10. 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 Montréal, novembre 2008
  11. 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 Montréal, novembre 2008
  12. 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/ Montréal, novembre 2008
  13. 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/ Montréal, novembre 2008
  14. 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 Montréal, novembre 2008
  15. 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 Montréal, novembre 2008
  16. 16. Wicket // Un exemple de champ de texte avec suggestions AutoCompleteTextField monChamp = new AutoCompleteTextField(quot;Tapezquot;, new Model(quot;quot;)) { protected Iterator getChoices(String entree) { return monService.getPossibleChoices(entree); } }; GTI-780 / MTI-780 Source : http://wicketstuff.org Montréal, novembre 2008
  17. 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(quot;onchangequot;) { 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 Montréal, novembre 2008
  18. 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/ Montréal, novembre 2008
  19. 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 Montréal, novembre 2008
  20. 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 Montréal, novembre 2008
  21. 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 Montréal, novembre 2008
  22. 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 Montréal, novembre 2008
  23. 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 Montréal, novembre 2008
  24. 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 Montréal, novembre 2008
  25. 25. Java – Avantages & inconvénients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008
  26. 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 Montréal, novembre 2008
  27. 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 Montréal, novembre 2008
  28. 28. Choix des technologies Ajax en Java GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008
  29. 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 Montréal, novembre 2008
  30. 30. Struts et Ajax - Conclusion Struts 1.3 GTI-780 / MTI-780 Montréal, novembre 2008
  31. 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 Montréal, novembre 2008
  32. 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 Montréal, novembre 2008
  33. 33. GWT – « Le prochain gros truc! » GWT GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008
  34. 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 Montréal, novembre 2008

×