Ajax en Java - GTI780 & MTI780 - ETS - A08

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Java – Avantages & inconvénients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008

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

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

Choix des technologies Ajax en Java GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008

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

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é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

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

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

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

Ajax en Java - GTI780 & MTI780 - ETS - A08

by Claude Coulombe on Nov 24, 2008

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 9

Statistics

Ajax en Java - GTI780 & MTI780 - ETS - A08 Presentation Transcript