Formation gwt

  • Published on
    28-Nov-2014

  • View
    120

  • Download
    2

Embed Size (px)

DESCRIPTION

Cours GWT prsentant certains aspects avancs : - Bus d'vnement - Activities & Places - MVP - ClientFactory - RCP

Transcript

  • 1. Formation GWT Version 0.1.0 ANDRE Franois 21/22 juillet 2014 ANDRE Franois Formation GWT 21/22 juillet 2014 1 / 86
  • 2. Licence Le contenu de cette prsentation est publi sous la licence : Creative Commons Attribution 4.0 International License La copie de cette prsentation est autorise sous rserve du respect des conditions de la licence (creativecommons.org/licenses/by/4.0/). ANDRE Franois Formation GWT 21/22 juillet 2014 2 / 86
  • 3. 1. Introduction 2. Architecture 3. Premire application 4. Cration de linterface graphique 5. Bus dvnements 6. Cinmatique de lapplication 7. Communication client-serveur 8. Conclusion ANDRE Franois Formation GWT 21/22 juillet 2014 3 / 86
  • 4. Introduction 1. Introduction 2. Architecture 3. Premire application 4. Cration de linterface graphique 5. Bus dvnements 6. Cinmatique de lapplication 7. Communication client-serveur 8. Conclusion ANDRE Franois Formation GWT 21/22 juillet 2014 4 / 86
  • 5. Introduction Quelques questions... O doit se situer un traitement ? Android ou iOS ? Des gens utilisent-ils encore IE6 ? Comment conomiser les ressources ? Comment faire une boucle en Javascript ? Comment dboguer en Javascript ? Pourquoi ne puis-je pas faire du Swing ? Pourquoi mon application nest-elle toujours pas nie ? Google na-t-il pas arrt GWT ? ANDRE Franois Formation GWT 21/22 juillet 2014 5 / 86
  • 6. Fiablilit de la cible CSS+HTML5+Javascript
  • 7. Une rponse possible GWT
  • 8. Une ide simple Coder la partie cliente en Java La compiler en JavaScript
  • 9. Avantages principaux Intgr dans lcosystme JEE Reli lcosystme HTML/Javascript
  • 10. Introduction Repre historiques Chronologie succincte : 2006 v1.0 ... 2009 v2.0 ... Janvier 2014 v2.6.0 Futur volutions WEB : HTML5, W3C Web Components ... volutions Java : Support Java 8 ... volutions GWT : Integration Javascript ... ANDRE Franois Formation GWT 21/22 juillet 2014 10 / 86
  • 11. Introduction Plus dinformations Site ofciel : http://www.gwtproject.org/ Dmonstration ofcielle : http://samples.gwtproject.org/samples/Showcase/Showcase.html Confrences en ligne : GWT Create (http://gwtcreate.com/) Google I/O (chane Youtube) Blogs : Gwt Daily (http://www.gwtdaily.com/) Sami Jabber (http://www.samijaber.com/) Tutoriels : http://courses.coreservlets.com/Course-Materials/gwt.html ANDRE Franois Formation GWT 21/22 juillet 2014 11 / 86
  • 12. Architecture 1. Introduction 2. Architecture Twitter Bootstrap Spring Framework JPA : Java Persistence API Maven Eclipse 3. Premire application 4. Cration de linterface graphique 5. Bus dvnements 6. Cinmatique de lapplication 7. Communication client-serveur 8. Conclusion ANDRE Franois Formation GWT 21/22 juillet 2014 12 / 86
  • 13. Architecture Elments mis en uvre ANDRE Franois Formation GWT 21/22 juillet 2014 13 / 86
  • 14. Architecture Twitter Bootstrap 1. Introduction 2. Architecture Twitter Bootstrap Spring Framework JPA : Java Persistence API Maven Eclipse 3. Premire application 4. Cration de linterface graphique 5. Bus dvnements 6. Cinmatique de lapplication 7. Communication client-serveur 8. Conclusion ANDRE Franois Formation GWT 21/22 juillet 2014 14 / 86
  • 15. Architecture Twitter Bootstrap Twitter Bootstrap Description : Collection doutils HTML/CSS/Javascript Objectif : Compenser laspect brut des composants GWT Rendu moderne Site web adaptatif (RWD) Grande Popularit ANDRE Franois Formation GWT 21/22 juillet 2014 15 / 86
  • 16. Architecture Spring Framework 1. Introduction 2. Architecture Twitter Bootstrap Spring Framework JPA : Java Persistence API Maven Eclipse 3. Premire application 4. Cration de linterface graphique 5. Bus dvnements 6. Cinmatique de lapplication 7. Communication client-serveur 8. Conclusion ANDRE Franois Formation GWT 21/22 juillet 2014 16 / 86
  • 17. Architecture Spring Framework Spring Framework Description : Framework Java permettant la mise en place dun conteneur lger Objectif : Simplication de larchitecture et abilisation du code Inversion de contrle (IoC) Bibliothques complmentaires (accs aux donnes, ...) ANDRE Franois Formation GWT 21/22 juillet 2014 17 / 86
  • 18. Architecture JPA : Java Persistence API 1. Introduction 2. Architecture Twitter Bootstrap Spring Framework JPA : Java Persistence API Maven Eclipse 3. Premire application 4. Cration de linterface graphique 5. Bus dvnements 6. Cinmatique de lapplication 7. Communication client-serveur 8. Conclusion ANDRE Franois Formation GWT 21/22 juillet 2014 18 / 86
  • 19. Architecture JPA : Java Persistence API JPA : Java Persistence API Description : API ofcielle de Mapping Objet-SGBD Objectif : Simplier la mise en uvre de la persistance Dnition du mapping via annotation Interrogation via JPQL ANDRE Franois Formation GWT 21/22 juillet 2014 19 / 86
  • 20. Architecture Maven 1. Introduction 2. Architecture Twitter Bootstrap Spring Framework JPA : Java Persistence API Maven Eclipse 3. Premire application 4. Cration de linterface graphique 5. Bus dvnements 6. Cinmatique de lapplication 7. Communication client-serveur 8. Conclusion ANDRE Franois Formation GWT 21/22 juillet 2014 20 / 86
  • 21. Architecture Maven Maven Description : Moteur de production Objectif : Fiabilise les tapes cls du dveloppement (compilation, test, gnration, livraison,...) Le chier pom.xml : conguration globale du projet Arborescence /src Sources du projet /src/main Partie principale /src/main/java Code source /src/main/resources Fichier de ressources (images, cong, ...) /src/main/webapp Webapp du projet /src/test Partie test /src/test/java Code source des tests /src/test/resources Fichiers de ressources des tests /target Fichiers produits (classes, .war, .jar) ANDRE Franois Formation GWT 21/22 juillet 2014 21 / 86
  • 22. Architecture Eclipse 1. Introduction 2. Architecture Twitter Bootstrap Spring Framework JPA : Java Persistence API Maven Eclipse 3. Premire application 4. Cration de linterface graphique 5. Bus dvnements 6. Cinmatique de lapplication 7. Communication client-serveur 8. Conclusion ANDRE Franois Formation GWT 21/22 juillet 2014 22 / 86
  • 23. Architecture Eclipse Eclipse Description : Environnement de dveloppement intgr (EDI) Objectif : dition des sources, lien avec le SCM, dbogage GWT ne ncessite pas dEDI particulier. Dautres EDI (IntelliJ, Netbeans, vi) peuvent tre utiliss. Lquipe Google fournit un module (plugin) pour Eclipse proposant certaines fonctionnalits utiles : Gnration Validation ... Remarques: le plugin M2E est dconseill pour les projets GWT Distribution privilgie : Eclipse IDE for Java EE Developers ANDRE Franois Formation GWT 21/22 juillet 2014 23 / 86
  • 24. Architecture Eclipse Plugin GWT (Navigateur) Traditionnellement le dveloppement GWT - Dev Mode - repose sur un module install sur le navigateur (Chrome, Firefox, IE, Safari). Ce mode est contraignant pour les dveloppeur de GWT pour les raisons suivantes : Le nombre de navigateurs Les API propritaires sous jacentes Il est remplac par le Super Dev Mode ANDRE Franois Formation GWT 21/22 juillet 2014 24 / 86
  • 25. Premire application 1. Introduction 2. Architecture 3. Premire application Gnration dun squelette applicatif Exploration du squelette 4. Cration de linterface graphique 5. Bus dvnements 6. Cinmatique de lapplication 7. Communication client-serveur 8. Conclusion ANDRE Franois Formation GWT 21/22 juillet 2014 25 / 86
  • 26. Premire application Gnration dun squelette applicatif 1. Introduction 2. Architecture 3. Premire application Gnration dun squelette applicatif Exploration du squelette 4. Cration de linterface graphique 5. Bus dvnements 6. Cinmatique de lapplication 7. Communication client-serveur 8. Conclusion ANDRE Franois Formation GWT 21/22 juillet 2014 26 / 86
  • 27. Premire application Gnration dun squelette applicatif Gnration squelette applicatif Utilisation de larchetype GWT du SEDOO Prrequis: JVM Maven / Ant Eclipse Etape 1 : Gnration archetype mvn archetype:generate -DarchetypeGroupId=fr.sedoo.archetype -DarchetypeArtifactId=archetype-gwt -DarchetypeVersion=1.0-SNAPSHOT -DgroupId=org.mondomaine -DartifactId=testgwt -DarchetypeRepository=http:// Etape 2 : Mise en place conguration eclipse ant eclipse -DM2_HOME=$M2_HOME Etape 3 : Import dans eclipse Import... > Existing Projects into Workspace ANDRE Franois Formation GWT 21/22 juillet 2014 27 / 86
  • 28. Premire application Exploration du squelette 1. Introduction 2. Architecture 3. Premire application Gnration dun squelette applicatif Exploration du squelette 4. Cration de linterface graphique 5. Bus dvnements 6. Cinmatique de lapplication 7. Communication client-serveur 8. Conclusion ANDRE Franois Formation GWT 21/22 juillet 2014 28 / 86
  • 29. Premire application Exploration du squelette Exploration du squelette Architecture Maven classique /src/main/java /src/main/resources /src/main/webapp ... Architecture GWT classique Package client Classes de la partie cliente ( Javascript) Package shared Classes communes client & serveur ( Javascript & Java) Package server Classes de la partie serveur ( Application JEE standard) ANDRE Franois Formation GWT 21/22 juillet 2014 29 / 86
  • 30. Premire application Exploration du squelette Contraintes package client & shared Les classes doivent utiliser/tendre le JDK mul par GWT (http://www.gwtproject.org/doc/latest/RefJreEmulation.html) Exemples : Autoris: Object, HashMap, ArrayList, com.google.common.base.Strings (Guava)... Interdit : File, StringUtils (commons-lang), ... Les classes transitant entre client et serveur doivent tre srialisables: implmenter java.io.Serializable implmenter com.google.gwt.user.client.rpc.IsSerializable des beans: Constructeur vide Getters et Setters ANDRE Franois Formation GWT 21/22 juillet 2014 30 / 86
  • 31. Premire application Exploration du squelette Descripteur du module: module.gwt.xml Rle Pilotage de lapplication Position au dessus du package client Contenu Nom du module Point dentre Autres modules importer : Rpertoires : Paramtres divers: langues... Remplacement dynamique des classes ANDRE Franois Formation GWT 21/22 juillet 2014 31 / 86
  • 32. Premire application Exploration du squelette Conteneur HTML Rle Chargement de lapplication Position Dans le rpertoire webapp Contenu Page HTML classique (js, css, balises HTML...) Chargement du module Remarque: le script nocache.js charge la compilation adquate du module : La plus rcente Correspondant au navigateur du client et sa langue ANDRE Franois Formation GWT 21/22 juillet 2014 32 / 86
  • 33. Premire application Exploration du sq...