T7.A02
JDEV 2015
François ANDRE
Guillaume BRISSEBRAT
Alexandre JOURNAUX
OMP, INRA
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
INTRODUCTION
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
ARCHITECTURE
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
TWITTER BOOTSTRAP
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
SPRING FRAMEWORK
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
JPA : JAVA PERSISTENCE API
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
MAVEN
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
ECLIPSE
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
PREMIÈRE APPLICATION
EXERCICE 1 : GÉNÉRATION D'UN
SQUELETTE APPLICATIF
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
EXPLORATION DU SQUELETTE
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
EXERCICE 2 : EXÉCUTION ET
DÉBOGAGE
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
CRÉATION DE L'INTERFACE
GRAPHIQUE
COMPOSANTS DE BASES
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
EXERCICE 3 : YET ANOTHER TODO
LIST - UNE PREMIERE IHM
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
LIBRAIRIES COMPLÉMENTAIRES
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
EXERCICE 3 : YET ANOTHER TODO
LIST - UNE IHM BOOTSTRAP
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
EXERCICE 3 : YET ANOTHER TODO
LIST - CRÉATION DE COMPOSANTS
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
UIBINDER
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
EXERCICE 3 : YET ANOTHER TODO
LIST - UTILISATION UIBINDER
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
CLIENTFACTORY
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
BUS D'ÉVÈNEMENTS
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
EXERCICE 4 : AJOUT D'UN
ÉVÈNEMENT
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
CINÉMATIQUE DE L'APPLICATION
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
GESTION DE L'HISTORIQUE
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
ACTIVITIES AND PLACES
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
PATRON MODEL-VIEW-PRESENTER
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
EXERCICE 5 : MISE EN PLACE MVP
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
COMMUNICATION CLIENT-SERVEUR
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
EXERCICE 6 : MISE EN PLACE
GWT-RPC
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
CONCLUSION
Introduction Architecture Premi`ere application
Cr´eation de l’interface
graphique Bus d’´ev`enements
Cin´ematique de l’ap...
Prochain SlideShare
Chargement dans…5
×

TP GWT JDEV 2015

577 vues

Publié le

TP GWT (avec code des exercices) pour les Jdev 2015.

Sujets abordés: GWT, Bootstrap, Maven, Activités, Places, MVP, RCP, UiBinder

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
577
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
26
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

TP GWT JDEV 2015

  1. 1. T7.A02 JDEV 2015 François ANDRE Guillaume BRISSEBRAT Alexandre JOURNAUX OMP, INRA
  2. 2. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion LICENCE Le contenu de cette présentation est publié sous la licence : Creative Commons Attribution 4.0 International License La copie de cette présentation est autorisée sous réserve du respect des conditions de la licence (creativecommons.org/licenses/by/4.0/). 2
  3. 3. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion CODE SOURCE Le code source du TP est disponible à l’adresse suivante: https://github.com/francoisandre/gwtjdev2015 Afin de pouvoir repartir sur une situation propre sur un exercice plusieurs branches correspondant à chaque fin d’exercice sont mise à disposition. Elles sont signalées en fin chaque branche correspond à la fin d’un exercice. Cela permet de pouvoir passer à un nouvel exercice. Les branches sont signalées de la manière suivante: NomDeLaBranche 3
  4. 4. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MACHINE VIRTUELLE Une machine virtuelle de type VirtualBox comportant les outils nécessaires et le code source du TP est disponible à l’adresse suivante: http://jdev2015.sedoo.fr/Stagiaire%20GWT-c.ova Afin de récuperer le code du TP effectuez la procédure suivante : Ouvrir Eclipse Sélectionner File > Import... Dans la liste des types de projets, séléctionner Git > Projects from Git et appuyer sur Next Séléctionner Existing local repository et appuyer sur Next Dans la liste des dépots Git, séléctionner git /home/user/git/.git et appuyer sur Next Dans l’étape relative au Wizard appuyer directement sur Next Appuyer sur Finish 4
  5. 5. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion SOMMAIRE 1. Introduction 2. Architecture 3. Premi`ere application 4. Cr´eation de l’interface graphique 5. Bus d’´ev`enements 6. Cin´ematique de l’application 7. Communication client-serveur 8. Conclusion 5
  6. 6. INTRODUCTION
  7. 7. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion QUELQUES QUESTIONS... Comment faire une Single Page Application ? 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 déboguer ou lister les appels d’une fonction en Javascript ? Pourquoi ne puis-je pas faire du Swing ? Le client-serveur, ça avait son charme, non ? Pourquoi mon application n’est-elle toujours pas finie ? C’est pas plus rapide en PHP ? Google n’a-t-il pas arrêté GWT ? 7
  8. 8. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion FIABLILITÉ DE LA CIBLE CSS+HTML5+JAVASCRIPT 8
  9. 9. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UNE RÉPONSE POSSIBLE GWT 9
  10. 10. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UNE IDÉE SIMPLE Coder la partie cliente en Java La compiler en JavaScript 10
  11. 11. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion AVANTAGES PRINCIPAUX Intégré dans l’écosystème JEE Relié à l’écosystème HTML/Javascript 11
  12. 12. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion REPÈRE HISTORIQUES Chronologie succincte : 2006 v1.0 ... 2009 v2.0 ... Janvier 2014 v2.6.0 Novembre 2014 v2.7.0 Futur Évolutions WEB : HTML5, W3C Web Components ... Évolutions Java : Support Java 8 ... Évolutions GWT : Integration Javascript ... 12
  13. 13. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion PLUS D'INFORMATIONS Site officiel : http://www.gwtproject.org/ Démonstration officielle : http://samples.gwtproject.org/samples/Showcase/Showcase.html Communauté https://groups.google.com/forum/#!forum/google-web-toolkit https://plus.google.com/communities/116543000751323604177 Conférences en ligne : GWT Create (http://gwtcreate.com/) Google I/O (chaîne Youtube) Blogs : Gwt Daily (http://www.gwtdaily.com/) Sami Jabber (http://www.samijaber.com/) Tutoriels : http://courses.coreservlets.com/Course-Materials/gwt.html 13
  14. 14. ARCHITECTURE
  15. 15. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion ELÉMENTS MIS EN ŒUVRE 15
  16. 16. TWITTER BOOTSTRAP
  17. 17. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion TWITTER BOOTSTRAP Description : Collection d’outils HTML/CSS/Javascript Objectif : Compenser l’aspect brut des composants GWT Rendu moderne Site web adaptatif (RWD) Grande Popularité 17
  18. 18. SPRING FRAMEWORK
  19. 19. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion SPRING FRAMEWORK Description : Framework Java permettant la mise en place d’un conteneur léger Objectif : Simplification de l’architecture et fiabilisation du code Inversion de contrôle (IoC) Bibliothèques complémentaires (accès aux données, ...) 19
  20. 20. JPA : JAVA PERSISTENCE API
  21. 21. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion JPA : JAVA PERSISTENCE API Description : API officielle de Mapping Objet-SGBD Objectif : Simplifier la mise en œuvre de la persistance Définition du mapping via annotation Interrogation via JPQL 21
  22. 22. MAVEN
  23. 23. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MAVEN Description : Moteur de production Objectif : Fiabilise les étapes clés du développement (compilation, test, génération, livraison,...) Le fichier pom.xml : configuration globale du projet Arborescence /src Sources du projet /src/main Partie principale /src/main/java Code source /src/main/resources Fichier de ressources (images, config, ...) /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) Compatibilité avec les outils d’intégration continue (Jenkins...) 23
  24. 24. ECLIPSE
  25. 25. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion ECLIPSE Description : Environnement de développement intégré (EDI) Objectif : Édition des sources, lien avec le SCM, débogage GWT ne nécessite pas d’EDI particulier. D’autres EDI (IntelliJ, Netbeans, vi) peuvent être utilisés. L’équipe Google fournit un module (plugin) pour Eclipse proposant certaines fonctionnalités utiles : Génération Validation ... Remarque: Distribution privilégiée : Eclipse IDE for Java EE Developers 25
  26. 26. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion PLUGIN GWT (NAVIGATEUR) Classical dev mode Jusqu’à la version 2.6.0, le développement GWT - Dev Mode - repose sur un module installé sur le navigateur (Chrome, Firefox, IE, Safari). Ce mode est contraignant pour les développeur de GWT pour les raisons suivantes : Le nombre de navigateurs Les API propriétaires sous jacentes De plus, lorsque la taille de l’application augmente le temps de rafraichissement devient bloquant. Super dev mode Depuis la version 2.4.0 il est progressivement remplacé par le Super Dev Mode qui permet de débugger dans les navigateurs supportant le standard SourceMaps (Chrome, Firefox). Le plugin SDBG permet de conserver un débuggage dans Eclipse. 26
  27. 27. PREMIÈRE APPLICATION
  28. 28. EXERCICE 1 : GÉNÉRATION D'UN SQUELETTE APPLICATIF
  29. 29. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion PRÉREQUIS LOGICIEL Prérequis: JVM (1.7 conseillée) Maven / Ant Eclipse avec les plugins Egit M2E Plugin GWT (via Eclipse Market Place) SDBG (update site: http://sdbg.github.io/p2) StartExplorer (via Eclipse Market Place) SDK GWT (2.7.0) Chrome (avec SourceMap enabled) 29
  30. 30. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion GÉNÉRATION D'UN SQUELETTE APPLICATIF Utilisation de webAppCreator (utilitaire fourni dans le SDK) Etape 1 : Génération squelette /home/user/Développement/gwt-2.7.0/webAppCreator -noant -maven -XnoEclipse fr.jdev.atelier.MonApplication Etape 2 : Import dans Eclipse Import... > Maven > Existing Maven Projects Etape 3 : Modification fichier pom.xml Ajouter la version <version>$gwtVersion</version> dans les dépendances <groupId>com.google.gwt</groupId> <dependency> : ... <dependency> <groupId>com.google.gwt</groupId> <artifactId>gwt-servlet</artifactId> <version>$gwtVersion</version> <scope>runtime</scope> </dependency> ... 30
  31. 31. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion GÉNÉRATION D'UN SQUELETTE APPLICATIF Etape 4 : Modifications des propriétés du projet Google > Web toolkit : cocher Use Google Web Toolkit Google > Web application : Cocher This project has a WAR directory Dans la zone de saisie WAR directory indiquer src/main/webapp Décocher Launch and deploy... si nécessaire FinExercice1 31
  32. 32. EXPLORATION DU SQUELETTE
  33. 33. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion 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) 33
  34. 34. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion 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 sérialisables: • implémenter java.io.Serializable • implémenter com.google.gwt.user.client.rpc.IsSerializable des beans: • Constructeur vide • Getters et Setters 34
  35. 35. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion DESCRIPTEUR DU MODULE: MONAPPLICATION.GWT.XML Rôle Pilotage de l’application Position au dessus du package client Contenu Nom du module <module> Point d’entrée <entry-point class=’fr.jdev.atelier.client.MonApplication’ /> Autres modules à importer : <inherits> Répertoires : <source> Paramètres divers: langues... Remplacement dynamique des classes <replace-with class="fr.sedoo.sssdata.client.ClientFactoryImpl"> <when-type-is class="fr.sedoo.sssdata.client.ClientFactory"/> </replace-with> 35
  36. 36. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion CONTENEUR HTML MONAPPLICATION.HTML Rôle Chargement de l’application Position Dans le répertoire webapp Contenu Page HTML classique (js, css, balises HTML...) Chargement du module <script type="text/javascript" language="javascript" src="monapplication/monapplication.nocache.js"></script> Remarque: le script nocache.js charge la compilation adéquate du module : La plus récente Correspondant au navigateur du client et à sa langue 36
  37. 37. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion COMPILATION ET PERMUTATIONS Lors de la compilation Javascript, GWT génère une tradution pour chaque couple moteur de navigateur supporté (6) langue indiquée dans le descripteur de module Les permutations sont une des nombreuses optimisations fournies par GWT. 37
  38. 38. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion ENTRY POINT Rôle Équivalent de main dans les application Java Position Dans le package client Conformément au fichier gwt.xml Contenu Implémente com.google.gwt.core.client.EntryPoint → public void onModuleLoad(); • Construit les éléments de l’interface utilisateur • Optionnellement, supprime certains éléments du conteneur HTML Exemple : suppression du contenu de l’élément d’identifiant loadingMessage RootPanel loadingMessage = RootPanel.get("loadingMessage"); DOM.setInnerHTML(loadingMessage.getElement(), ""); • Ajoute l’interface utilisateur dans le conteneur HTML Exemple : En vidant completement le conteneur HTML Label myLabel = new Label("Hello JDEV"); RootPanel.get().clear(); RootPanel.get().add(myLabel); 38
  39. 39. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion AUTRES FICHIERS REMARQUABLES Configuration Maven /pom.xml Configuration application web /src/main/webapp/WEB-INF/web.xml 39
  40. 40. EXERCICE 2 : EXÉCUTION ET DÉBOGAGE
  41. 41. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion LANCEMENT DE L'APPLICATION Le lancement de l’application se fait classiquement via les menus Debug As ou Run As Le moteur de lancement à utiliser est Web Application ou Web Application (GWT Super Dev Mode) 41
  42. 42. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion LANCEMENT DE L'APPLICATION Lors du lancement, deux applications sont exécutées dans l’ordre suivant : Le serveur de complitation Java →Javascript ... The code server is ready at http://127.0.0.1:9876 ... L’application proprement dite. Celle-ci est utilisable lors que son URL s’affiche dans l’onglet Development 42
  43. 43. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion TEST DE L'APPLICATION Le lancement de l’URL déclenche la compilation Java →Javascript. Une fois compilée l’application apparait normalement 43
  44. 44. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion TEST DE L'APPLICATION Remarques La première compilation suivant un démarrage de l’application est longue Les autres compilations sont plus rapides car incrémentales (ne portent que sur les fichiers modifiés entre temps) Le code java peut être vu via Chrome (via la technologie SourceMaps) 44
  45. 45. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion DEBOGAGE AVEC LE PLUGIN ECLIPSE SDBG SDBG permet d’intercepter de piloter le débogage SourceMaps dans Eclipse Etape 1 : Création d'un lanceur chrome Ouvrir la fenêtres des lanceurs de débogage (Debug configurations...) Sélectionner Launch Chrome Cliquer sur le bouton droit et sélectionner New Dans la fenêtre qui s’ouvre indiquer les valeurs suivantes : Name : Mon Application SDBG URL : http://127.0.0.1:8888/MonApplication.html Project : sélectionner le projet MonApplication Remarque : Dans l’onglet Common on peut cocher l’option Debug du bloc Display in favorites menu Cliquer sur Apply puis sur Debug L’application doit être lancée auparavant 45
  46. 46. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion DEBOGAGE AVEC LE PLUGIN ECLIPSE SDBG Etape 2 : Mise en place d'un point d'arrêt Dans la classe FieldVerifier positionner un point d’arrêt en début de la méthode isValidName Dans l’application cliquer sur Send Le point d’arrêt va se déclencher deux fois Côté client : suite à l’appel de sendNameToServer Côté serveur : suite à l’appel de greetServer Remarques : le plugin SDBG est en amélioration permanente • Pour la gestion du rechargement à chaud • Pour l’affichage des contenus des variables le plugin SDBG est désactivé lorsque l’inspecteur Chrome est activé. 46
  47. 47. CRÉATION DE L'INTERFACE GRAPHIQUE
  48. 48. COMPOSANTS DE BASES
  49. 49. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion COMPOSANTS DE BASE GWT propose un certain nombre de composants de base pour construire les interfaces: Widgets élémentaires: boutons, zones de texte, cases à cocher... Panneaux de positionnement (similaires à Swing): panneaux horizontaux, verticaux, à onglets... Comme en Swing, ces éléments sont des classes Java et se combinent afin de créer l’interface souhaitée. 49
  50. 50. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion WIDGETS ÉLÉMENTAIRES Étendent com.google.gwt.user.client.ui.Widget Exemples : TextBox TextArea Button RadioButton CheckBox DatePicker, CellList... 50
  51. 51. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion PANNEAUX DE POSITIONNEMENT Panneaux classiques (étendent com.google.gwt.user.client.ui.Panel) Exemples : HorizontalPanel VerticalPanel FlowPanel HTMLPanel Permet de mixer des balises HTML et des com- posants GWT Remarque: les panneaux héritent aussi de Widget 51
  52. 52. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion PANNEAUX DE POSITIONNEMENT Panneaux dynamiques (implémentent com.google.gwt.user.client.ui.ProvidesResize et com.google.gwt.user.client.ui.RequiresResize ) Exemples : DockLayoutPanel SplitLayoutPanel TabLayoutPanel 52
  53. 53. EXERCICE 3 : YET ANOTHER TODO LIST - UNE PREMIERE IHM
  54. 54. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UNE PREMIÈRE IHM Etape 1 : Suppression du contenu du contenur HTML Dans le fichier MonApplication.html vider le contenu de la balise <body> à l’exception de la balise <noscript> (et de son cotenu). Etape 2 : Modification de la fonction onModuleLoad Modifier le fichier suivant MonApplication.java de la manière suivante: public class MonApplication implements EntryPoint { public void onModuleLoad() { DockLayoutPanel mainContent = new DockLayoutPanel(Unit.PX); mainContent.getElement().getStyle().setMargin(5, Unit.PX); mainContent.addNorth(new Label("Ma Todo List"), 25); VerticalPanel taskForm = new VerticalPanel(); taskForm.setSpacing(5); taskForm.add(new Label("Ma tâche")); TextBox description = new TextBox(); description.setTitle("Description"); TextBox responsible = new TextBox(); responsible.setTitle("Responsible"); DateBox deadLine = new DateBox(); taskForm.add(description); taskForm.add(responsible); taskForm.add(deadLine); mainContent.add(taskForm); RootLayoutPanel.get().add(mainContent); } } 54
  55. 55. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UNE PREMIÈRE IHM FinExercice3a 55
  56. 56. LIBRAIRIES COMPLÉMENTAIRES
  57. 57. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion LIBRAIRIES COMPLÉMENTAIRES Solutions spécifiques en GWT : Sencha GXT (http://www.sencha.com/products/gxt/) Vaadin (https://vaadin.com/home) Sencha GXT 57
  58. 58. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion LIBRAIRIES COMPLÉMENTAIRES Portage de libraries Javascript : GWTBootstrap3 (https://github.com/gwtbootstrap3) Gwt-Openlayers (http://www.gwt-openlayers.org/) Exemple GWTBootstrap3 : Alert loginFirst = new Alert("You must connect to access to this page"); Remarque: un portage Javascript (Wrapping) peut occasionner un débogage plus difficile. 58
  59. 59. EXERCICE 3 : YET ANOTHER TODO LIST - UNE IHM BOOTSTRAP
  60. 60. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UNE IHM BOOTSTRAP Etape 1 : Ajout dépendance Maven Dans le fichier pom.xml ajouter les dépendances suivantes ... <dependency> <artifactId>gwtbootstrap3</artifactId> <groupId>org.gwtbootstrap3</groupId> <version>0.9</version> </dependency> <dependency> <groupId>org.gwtbootstrap3</groupId> <artifactId>gwtbootstrap3-extras</artifactId> <version>0.9</version> </dependency> ... Etape 2 : Modification du fichier MonApplication.gwt.xml Modifier le fichier suivant MonApplication.gwt.xml ajouter la ligne suivantes <inherits name="org.gwtbootstrap3.GwtBootstrap3"/> Etape 3 : Redémarrage de l'application Une fois les modifications faites, redémarrer l’application. 60
  61. 61. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UNE IHM BOOTSTRAP Etape 4 : Modification de la fonction onModuleLoad Modifier le fichier suivant MonApplication.java de la manière suivante: package fr.jdev.atelier.client; import org.gwtbootstrap3.client.ui.Container; import org.gwtbootstrap3.client.ui.Heading; import org.gwtbootstrap3.client.ui.Jumbotron; import org.gwtbootstrap3.client.ui.TextBox; import org.gwtbootstrap3.client.ui.constants.HeadingSize; ... public class MonApplication implements EntryPoint { public void onModuleLoad() { Jumbotron jumbotron = new Jumbotron(); Container container = new Container(); Heading heading = new Heading(HeadingSize.H1); heading.setText("Ma Todo List"); container.add(heading); jumbotron.add(container); VerticalPanel mainContent = new VerticalPanel(); mainContent.setWidth("100%"); VerticalPanel taskForm = new VerticalPanel(); taskForm.setSpacing(5); taskForm.add(new Label("Ma tâche")); TextBox description = new TextBox(); description.setPlaceholder("Description"); TextBox responsible = new TextBox(); responsible.setPlaceholder("Responsible"); DateBox deadLine = new DateBox(); taskForm.add(description); taskForm.add(responsible); taskForm.add(deadLine); mainContent.add(jumbotron); mainContent.add(taskForm); RootPanel.get().add(mainContent); } } 61
  62. 62. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UNE IHM BOOTSTRAP FinExercice3b 62
  63. 63. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion CRÉATION DE COMPOSANTS Par héritage d’un Widget : Exemple: création d’une infobulle d’aide Classe : Utilisation : HelpTooltip aide = new HelpTooltip("mon texte d’aide"); monPanneau.add(aide); Résultat : 63
  64. 64. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion CRÉATION DE COMPOSANTS Par héritage d’un Composite : Objectif: Permet de créer un composant en combinant plusieurs Widgets sans en exposer les méthodes. Attention : il est nécessaire d’appeler la fonction initWidget sur un des composants lors du constructeur. 64
  65. 65. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion CRÉATION DE COMPOSANTS Par implémentation de l’interface IsWidget : Le Widget est retourné par la méthode asWidget(). 65
  66. 66. EXERCICE 3 : YET ANOTHER TODO LIST - CRÉATION DE COMPOSANTS
  67. 67. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion CRÉATION DE COMPOSANTS Etape 1 : Création du composant HelpTooltip Créer la classe HelpTooltip suivante : public class HelpTooltip extends Popover { @UiConstructor public HelpTooltip(String text) { super(); Icon helpIcon = new Icon(IconType.QUESTION_CIRCLE); helpIcon.setSize(IconSize.LARGE); add(helpIcon); setTitle(""); setContent(text); } public HelpTooltip(String text, Placement placement) { this(text); setPlacement(placement); } public void setText(String text) { setContent(text); } } 67
  68. 68. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UNE IHM BOOTSTRAP Etape 2 : Création du composant TaskCreationPanel Créer la classe TaskCreationPanel suivante : public class TaskCreationPanel implements IsWidget { private VerticalPanel mainContainer; private TextBox description; private TextBox responsible; private DateBox deadLine; public TaskCreationPanel() { mainContainer = new VerticalPanel(); mainContainer.setSpacing(5); mainContainer.add(new Label("Ma tâche")); description = new TextBox(); HorizontalPanel descriptionPanel = new HorizontalPanel(); descriptionPanel.add(description); descriptionPanel.add(new HelpTooltip("Indiquez ici la description")); description.setPlaceholder("Description"); responsible = new TextBox(); responsible.setPlaceholder("Responsible"); deadLine = new DateBox(); mainContainer.add(descriptionPanel); mainContainer.add(responsible); mainContainer.add(deadLine); } @Override public Widget asWidget() { return mainContainer; } } 68
  69. 69. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UNE IHM BOOTSTRAP Etape 3 : Modificiation de MonApplication Modifier la classe MonApplication de la manière suivante : ... public void onModuleLoad() { Jumbotron jumbotron = new Jumbotron(); Container container = new Container(); Heading heading = new Heading(HeadingSize.H1); heading.setText("Ma Todo List"); container.add(heading); jumbotron.add(container); VerticalPanel mainContent = new VerticalPanel(); mainContent.setWidth("100%"); mainContent.add(jumbotron); TaskCreationPanel taskCreationPanel = new TaskCreationPanel(); mainContent.add(taskCreationPanel); RootPanel.get().add(mainContent); } ... FinExercice3c 69
  70. 70. UIBINDER
  71. 71. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UIBINDER : MOTEUR DE TEMPLATES Rôle Simplifier la création d’écran complexes avec un moteur de templates Principe Un fichier de description, monFichier.ui.xml, permet de définir l’écran de manière similaire à une page HTML/JSP... Dans ce fichier les noms des balises importantes sont indiqués via l’attribut ui:field Une classe, monFichier.java permet de définir le comportement dynamique associé à cet écran. Cette classe étend Composite Dans cette classe on retrouve le nom des attributs ui:field indiqués dans le fichier de description 71
  72. 72. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UIBINDER : EXEMPLE Descripteur : MetadataSearchViewImpl.ui.xml 72
  73. 73. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UIBINDER : EXEMPLE Classe : MetadataSearchViewImpl.java 73
  74. 74. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UIBINDER : COMPLÉMENTS Instantication des champs ui:field Soit par le fichier de description lors de l’appel à initWidget dans le constructeur : initWidget(uiBinder.createAndBindUi(this)); Soit manuellement • En modifiant l’annotation UiField : @UiField(provided = true) • En instanciant les champs avant l’appel à initWidget. Ajout de comportement sur les éléments Via l’annotation @UiHandler La signature de la méthode permet d’indiquer l’évènement géré @UiHandler("searchButton") void onSearchButtonClicked(ClickEvent event) { ... } 74
  75. 75. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UIBINDER : COMPLÉMENTS Utilisation de Widgets personnels La balise <ui:UiBinder> permet de définir via des espaces de nommage les packages utilisables dans la page: <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:l="urn:import:fr.sedoo.metadata.client.ui.widget.date"> ... <l:Iso19115DateBox ui:field="startDate" /> Des paramètres peuvent être transmis dans les attributs. Si le Widget possède plusieurs constructeurs, l’annotation @UiConstructeur permet d’indiquer celui que UiBinder va utiliser. 75
  76. 76. EXERCICE 3 : YET ANOTHER TODO LIST - UTILISATION UIBINDER
  77. 77. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UTILISATION UIBINDER Etape 1 : Ajouter la classe Task Dans le package shared ajouter la classe suivante : public class Task implements IsSerializable { private String description; private String responsible; private Date deadLine; public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public String getResponsible() { return responsible; } public void setResponsible(String responsible) { this.responsible = responsible; } public Date getDeadLine() { return deadLine; } public void setDeadLine(Date deadLine) { this.deadLine = deadLine; } } 77
  78. 78. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UTILISATION UIBINDER Etape 2 : Ajouter la classe NewTaskCreationPanel Dans le package client ajouter la classe suivante : public class NewTaskCreationPanel extends Composite { @UiField TextBox description; @UiField TextBox responsible; @UiField DateTimePicker deadLine; private static LocalUiBinder uiBinder = GWT.create(LocalUiBinder.class); interface LocalUiBinder extends UiBinder<Widget, NewTaskCreationPanel> { } public NewTaskCreationPanel() { super(); initWidget(uiBinder.createAndBindUi(this)); } public void reset() { description.setText(""); responsible.setText(""); deadLine.setValue(null); } public Task flush() { Task result = new Task(); result.setResponsible(responsible.getText()); result.setDescription(description.getText()); result.setDeadLine(deadLine.getValue()); return result; } } 78
  79. 79. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UTILISATION UIBINDER Etape 3 : Ajouter le fichier NewTaskCreationPanel.ui.xml Dans le package client ajouter le fichier NewTaskCreationPanel.ui.xml avec le contenu suivant : <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:org.gwtbootstrap3.client.ui" xmlns:b2="urn:import:org.gwtbootstrap3.extras.datetimepicker.client.ui" > <g:HTMLPanel width="90%"> <h2>Enter a new task</h2> <form class="form-horizontal" > <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Description</label> <div class="col-sm-10"> <b:TextBox placeholder="Enter description" ui:field="description" /> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Responsible</label> <div class="col-sm-10"> <b:TextBox placeholder="Enter responsible" ui:field="responsible"/> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Dead line</label> <div class="col-sm-10"> <b2:DateTimePicker ui:field="deadLine"/> </div> </div> </form> </g:HTMLPanel> </ui:UiBinder> 79
  80. 80. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UTILISATION UIBINDER Etape 4 : Modification du fichier MonApplication.gwt.xml Dans le fichier MonApplication.gwt.xml ajouter la ligne suivantes <inherits name="org.gwtbootstrap3.extras.datetimepicker.DateTimePicker"/> Etape 5 : Modification de la fonction onModuleLoad Dans le fichier MonApplication.java modifier la fonction onModuleLoad public void onModuleLoad() { Jumbotron jumbotron = new Jumbotron(); Container container = new Container(); Heading heading = new Heading(HeadingSize.H1); heading.setText("Ma Todo List"); container.add(heading); jumbotron.add(container); VerticalPanel mainContent = new VerticalPanel(); mainContent.setWidth("100%"); mainContent.add(jumbotron); NewTaskCreationPanel taskCreationPanel = new NewTaskCreationPanel(); mainContent.add(taskCreationPanel); RootPanel.get().add(mainContent); } 80
  81. 81. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UTILISATION UIBINDER FinExercice3d 81
  82. 82. CLIENTFACTORY
  83. 83. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion CLIENTFACTORY Objectif : Optimiser le temps d’instanciation des objets complexes Problème : Certains composants clients sont coûteux à instancier notamment les différents éléments de l’interface graphique. Solution : Utiliser une Factory ayant la charge d’instancier de manière unique - et si nécessaire - ces différents composants et de les transmettre aux objets voulant les utiliser (Exemple: le Presenter dans le modèle MVP) . Remarque Par ce mécanisme, les écrans graphiques ne sont créés qu’une seule fois. Ils sont par contre remis à zéro (exemple : vidage des champs de saisie) lors de chaque utilisation. Ce concept de Singleton est aussi étendu pour gérer les autres instances uniques de l’application comme par exemple le bus d’évènements (cf. infra). 83
  84. 84. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE La mise en place de la ClientFactory et Activity est effectuée de la manière suivante: 1. Création de l’interface (ClientFactory) et d’une ou plusieurs de ses implémentations (ex ClientFactoryImpl, ClientFactoryMobileImpl...) dans le package client. 2. Déclaration dans le descripteur de module <replace-with class="fr.jdev.atelier.client.ClientFactoryImpl"> <when-type-is class="fr.jdev.atelier.client.ClientFactory" /> </replace-with> Dans cet exemple la classe, au moment de la compilation Java vers Javascript, ClientFactory sera remplacée par ClientFactoryImpl lorsqu’elle est appellée via GWT.create(). On peut imaginer des statégies plus fines (en fonction du périphérique client, ...) 3. Instanciation du singleton, normalement dans le onModuleLoad. clientFactory = GWT.create(ClientFactory.class); 84
  85. 85. BUS D'ÉVÈNEMENTS
  86. 86. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion BUS D'ÉVÈNEMENTS Objectif : Simplifier la communication entre les composants Problème : Les interfaces des applications GWT peuvent contenir de nombreux composants qui doivent dialoguer entre eux. Toutefois, dans certains cas ce dialogue ne peux pas se faire directement Pour éviter un trop fort couplage entre les classes. Parce que les composants cibles du dialogue ne peuvent pas être connus du composant source. Solution : GWT propose un bus permettant l’échange d’évènements entre composants reposant sur un mécanisme d’abonnement: 1. Un type d’évènement spécifique est défini. 2. Les composants cibles s’abonnent à ce type d’évènement auprès du bus. 3. Lorsque nécessaire, le composant source instancie un évènement et demande sa propagation sur le bus. 86
  87. 87. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion DÉFINITION D'UN ÉVÈNEMENT Exemple : évènement signalant la connexion d’un utilisateur - UserLoginEvent Il est nécessaire de créer deux classes: Le gestionnaire : UserLoginEventHandler L’évènement : UserLoginEvent Le gestionnaire Interface qui sera implémentée par les classes écoutant l’évènement Doit étendre com.google.gwt.event.shared.EventHandler 87
  88. 88. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion DÉFINITION D'UN ÉVÈNEMENT L’évènement La classe doit étendre com.google.gwt.event.shared.GwtEvent Elle définit un attribut statique - traditionnellement nommé TYPE - qui va identifier l’évènement et permettre de s’y abonner auprès du bus. 88
  89. 89. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion ABONNEMENT ET PUBLICATION Abonnement à un évènement L’abonnement auprès du bus s’effectue via la méthode addHandler en passant en paramètres le type de l’évènement et le composant cible. Celui-ci doit implémenter le Handler correspondant à l’évènement : EVENT_BUS.addHandler(UserLoginEvent.TYPE, monComposantCible); Publication d’un évènement La diffusion d’un évènement sur le bus s’effectue de la manière suivante : UserLoginEvent monEvenement = new UserLoginEvent(); // Valorisation de l’objet monEvenement ... EVENT_BUS.fireEvent(monEvenement); 89
  90. 90. EXERCICE 4 : AJOUT D'UN ÉVÈNEMENT
  91. 91. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion AJOUT D'UN ÉVÈNEMENT Etape 1 : Ajouter la classe NotificationEvent Dans le package client.event ajouter la classe suivante : public class NotificationEvent extends GwtEvent<NotificationEventHandler> { public static final Type<NotificationEventHandler> TYPE = new Type<NotificationEventHandler>(); private String message; public NotificationEvent(String message) { this.setMessage(message); } @Override protected void dispatch(NotificationEventHandler handler) { handler.onNotification(this); } @Override public com.google.gwt.event.shared.GwtEvent.Type<NotificationEventHandler> getAssociatedType() { return TYPE; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } } 91
  92. 92. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion AJOUT D'UN ÉVÈNEMENT Etape 2 : Ajouter l'interface NotificationEventHandler Dans le package client.event ajouter l’interface suivante : public interface NotificationEventHandler extends EventHandler { void onNotification(NotificationEvent event); } Etape 3 : Ajouter l'interface ClientFactory Dans le package client ajouter l’interface suivante : public interface ClientFactory extends NotificationEventHandler { EventBus getEventBus(); } 92
  93. 93. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion AJOUT D'UN ÉVÈNEMENT Etape 4 : Ajouter la classe ClientFactoryImpl Dans le package client ajouter la classe suivante : public class ClientFactoryImpl implements ClientFactory { private static final EventBus EVENT_BUS = new SimpleEventBus(); public ClientFactoryImpl() { getEventBus().addHandler(NotificationEvent.TYPE, this); } @Override public EventBus getEventBus() { return EVENT_BUS; } @Override public void onNotification(NotificationEvent event) { Growl.growl(event.getMessage()); } 93
  94. 94. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion AJOUT D'UN ÉVÈNEMENT Etape 5 : Modification du fichier MonApplication.gwt.xml Modifier le fichier MonApplication.gwt.xml en ajoutant les lignes : <inherits name="org.gwtbootstrap3.extras.growl.Growl"/> <replace-with class="fr.jdev.atelier.client.ClientFactoryImpl"> <when-type-is class="fr.jdev.atelier.client.ClientFactory" /> </replace-with> 94
  95. 95. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion AJOUT D'UN ÉVÈNEMENT Etape 6 : Modification du fichier MonApplication.java Modifier le fichier MonApplication.java de la manière suivante : public class MonApplication implements EntryPoint { private static ClientFactory clientFactory; public static ClientFactory getClientFactory() { if (clientFactory == null) { clientFactory = GWT.create(ClientFactory.class); } return clientFactory; } public void onModuleLoad() { clientFactory = getClientFactory(); Jumbotron jumbotron = new Jumbotron(); Container container = new Container(); Heading heading = new Heading(HeadingSize.H1); heading.setText("Ma Todo List"); container.add(heading); jumbotron.add(container); VerticalPanel mainContent = new VerticalPanel(); mainContent.getElement().getStyle().setMargin(5, Unit.PX); mainContent.getElement().getStyle().setBorderColor("white"); mainContent.getElement().getStyle().setBorderWidth(2, Unit.PCT); mainContent.getElement().getStyle().setBorderStyle(BorderStyle.SOLID); mainContent.add(jumbotron); NewTaskCreationPanel taskCreationPanel = new NewTaskCreationPanel(); mainContent.add(taskCreationPanel); Button addButton = new Button("Add"); addButton.setIcon(IconType.PLUS); addButton.setType(ButtonType.PRIMARY); addButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { getClientFactory().getEventBus().fireEvent(new NotificationEvent("Task added...")); } }); mainContent.add(addButton); mainContent.setWidth("98%"); RootPanel.get().add(mainContent); } } 95
  96. 96. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UTILISATION UIBINDER FinExercice4 96
  97. 97. CINÉMATIQUE DE L'APPLICATION
  98. 98. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion TROIS COMPOSANTS STRUCTURANTS La cinématique d’une application Ajax diffère d’une application Web traditionnelle où le serveur joue un rôle de chef d’orchestre. Les versions récentes de GWT ont introduit un certain nombre de bonnes pratiques permettant la construction rigoureuse d’une telle cinématique: Gestion de l’historique Activities and Places Patron Model-View-Presenter 98
  99. 99. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion GESTION DE L'HISTORIQUE Objectif : Permettre une gestion complète de l’historique, notamment la navigation via les boutons Précédent/Suivant Principe : Chaque état de l’application est sérialisé sous forme d’une chaine (token) ajoutée à l’URL actuelle sous forme d’un lien nommé (c.a.d séparé par un #). Exemple : http://sedoo.sedoo.fr/portailresif/#WelcomePlace: Un évènement de type navigation (Précédent, Suivant, Rafraichissement) déclenche un évènement de type ValueChangeEvent. 99
  100. 100. GESTION DE L'HISTORIQUE
  101. 101. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion GESTION DE L'HISTORIQUE Mise en œuvre : Activation dans le conteneur HTML <iframe src="javascript:’’" id="__gwt_historyFrame" style="position:absolute;width:0;height:0;border:0"></iframe> Une nouvelle étape dans l’historique est ajoutée en appelant History.newItem(token) Chaque objet voulant réagir aux évènement de l’historique s’abonne aux History.addValueChangeHandler(). Chaque abonné devra déterminer • si l’évènement le concerne • comment reconstruire l’état correspondant au token. 101
  102. 102. ACTIVITIES AND PLACES
  103. 103. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion ACTIVITIES Activity : Une activité est une fonctionnalité de l’application effectuée par un utilisateur. Exemples : LoginActivity, SearchActivity... Une activité étend com.google.gwt.activity.shared.AbstractActivity Cycle de vie : La gestionnaire d’activité (com.google.gwt.activity.shared.ActivityManager) active et désactive les activités via les méthodes suivantes : start Invoquée lors du démarage de l’activité. A son is- sue, l’activité doit fournir la vue lui correspondant. mayStop Invoquée pour savoir si l’activité en cours peut s’ar- rêter. onStop Invoquée lors de l’arrêt de l’activité. onCancel Invoquée lorsque le démarrage n’est pas termn- iné mais que l’utilisateur a demandé le début d’une autre activité. 103
  104. 104. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion PLACES Place : Une place représente un état d’utilisation d’une activité. Il doit pouvoir être sérialisé sous forme de token conformément au mécanisme de gestion de l’historique. Mise en œuvre : Une place hérite de com.google.gwt.place.shared.Place. Le tokenizer associé à la place hérite de com.google.gwt.place.shared.PlaceTokenizer. Il permet la sérialisation/désérialisation de l’état via les méthodes suivantes : getPlace Construit la place à partir du token. getToken Sérialise la place sous forme de token. Bonne pratique A chaque instanciation d’une activité, une place va lui être transmise afin que l’activité recrée son état. 104
  105. 105. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion NAVIGATION VIA LES PLACES Les places sont le meilleur moyen de naviguer au sein d’une application GWT. Le mécanisme est le suivant: 1. Instanciation et valoriastion de la place souhaitée 2. Récupération de l’instance du PlaceController (Cf. ClientFactory) 3. Appel de la méthode PlaceController.goTo(place) 4. Si la place souhaitée n’est pas la place en cours, l’activité correspondante à la place est instanciée (cf. page suivante). 5. La méthode start de l’activité est appelée. Remarques Ce mécanisme est également celui utilisé lors de l’analyse d’une URL pointant sur une place de l’application. Le PlaceController utilise la méthode equals pour comparer place actuelle et destination. Le cas échéant il peut être nécessaire de surcharger cette méthode 105
  106. 106. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion NAVIGATION VIA LES PLACES La correspondance entre Place et Activity est effectuée de la manière suivante: 1. Le PlaceController envoie un évènement de changement de place (PlaceChangeEvent) 2. L’évènement est reçu par le gestionnaire d’activités (ActivityManager) 3. Le gestionnaire d’activités utilise son ActivityMapper qui lui indique l’activité à démarrer via la méthode Activity getActivity(Place place); La classe ActivityMapper est donc le composant central du mécanisme. Exemple public Activity getActivity(Place place) { if (place instanceof WelcomePlace) { return new WelcomeActivity((WelcomePlace) place, clientFactory); } ... } 106
  107. 107. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion NAVIGATION VIA LES PLACES Activité A ActivityManager ActivityMapper Activité B PlaceController EventBus ClientFactory évènement crééPlaceB() getPlaceController() goTo(placeB)() fireEvent(placeChangeRequestEvent(placeB)) onPlaceChangeRequest(PlaceChangeRequestEvent)(placeB) mayStop() fireEvent(placeChangeEvent(placeB)) onPlaceChange(placeB) getActivity(placeB) nouvelle activité B onStop() start() 107
  108. 108. PATRON MODEL-VIEW-PRESENTER
  109. 109. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion PATRON MODEL-VIEW-PRESENTER GWT étend le traditionnel modèle MVC avec le patron MVP dans lequel le Presenter tient le rôle central. Nom Situation Rôle Model Côté serveur Récupère les données (via les DAO). View Côté client Affichage des données transmises par le Presenter. Transmet au Presenter les évènements importants (exemple: click sur des boutons,...) Presenter Côté client Mobilise le Model et transmet les données à la vue. Réagit aux évènements transmis par la vue afin nota- ment de dialoguer avec le Model ou changer de Place Stratégie L’objectif est de postionner un maximum d’intelligence au niveau du Presenter afin que celui-ci puisse fonctionner indifféremment avec plusieurs implémentations de View (exemple: View pour un écran d’ordinateur de grande taille, View pour un mobile, View ficitve pour les tests...). La View est donc dépourvue de traitements outre ceux spécifiques à son implémentation. Ceci permet de l’exclure plus ou moins de la chaine de test. 109
  110. 110. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion DIAGRAMME MVP Presenter ModelView 110
  111. 111. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion INTÉGRATION AVEC LE MODÈLE ACTIVITIES AND PLACES L’activity joue le rôle du Presenter 111
  112. 112. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE D'UNE VIEW Une View doit être définie sous forme d’une Interface qui étend com.google.gwt.user.client.ui.IsWidget. Le Presenter ne doit connaître que cette Interface. Si la View doit pouvoir transmettre des informations au Presenter, l’usage veut que celui-ci soit défini comme une sous-interface de la View. Dans ce cas: La View doit définir une methode setPresenter correspondante. L’Activity doit implémenter le Presenter. 112
  113. 113. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion RÉCUPÉRATION DE LA VIEW PAR LE PRESENTER Le lien entre une View et l’implémentation à utiliser dans le contexte courant est fait par la ClientFactory. Ceci permet d’envisager la mise en place de plusieurs implémentations de ClientFactory: pour les mobiles pour les tests ... 113
  114. 114. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion CINÉMATIQUE D'UTILISATION Classiquement, la cinématique d’utilisation est la suivante: 1. L’Activity récupère l’instance de la View auprès de la ClientFactory (dans sa méthode start) 2. Si nécessaire, utilise la méthode setPresenter de la View pour permettre une communication View ⇒ Presenter. 3. L’Activity remet à zéro l’instance de la View (qui a peut être servi au préalable) 4. L’Activity recherche auprès du Model les informations nécessaires 5. L’Activity les transmet à la vue qui les positionne. 6. L’Activity affiche la vue via la commande containerWidget.setWidget(view.asWidget()); 114
  115. 115. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion CINÉMATIQUE D'UTILISATION ActivityManager MonActivité MaVue MonModèle ClientFactory start() getMaVue() instance de MaVue setPresenter(this) reset() chargeInformations() afficheInformations() affiche la vue 115
  116. 116. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion COMMUNICATION PRESENTER - MODEL La communication entre le Presenter et le Model s’effectue via le mécanisme GWT-RPC décrit dans la section suivante. 116
  117. 117. EXERCICE 5 : MISE EN PLACE MVP
  118. 118. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 1 : Modification du fichier MonApplication.gwt.xml Dans le fichier MonApplication.gwt.xml ajouter les lignes suivantes : <inherits name="com.google.gwt.activity.Activity" /> <inherits name="com.google.gwt.place.Place" /> Etape 2 : Modification du fichier Task.java Dans le fichier Task.java ajouter les lignes suivantes : private String uuid; public String getUuid() { return uuid; } public void setUuid(String uuid) { this.uuid = uuid; } 118
  119. 119. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 3 : Modification du fichier ClientFactory.java Dans le fichier ClientFactory.java ajouter les lignes suivantes : PlaceController getPlaceController(); WelcomeView getWelcomeView(); TaskConsultView getTaskConsultView(); TaskListView getTaskListView(); 119
  120. 120. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 4 : Modification du fichier ClientFactoryImpl.java Modifier le fichier ClientFactoryImpl.java de la manière suivante : public class ClientFactoryImpl implements ClientFactory { private static final EventBus EVENT_BUS = new SimpleEventBus(); private static final PlaceController PLACE_CONTROLLER = new PlaceController(EVENT_BUS); WelcomeView welcomeView = new WelcomeViewImpl(); TaskListView taskListView = new TaskListViewImpl(); public ClientFactoryImpl() { getEventBus().addHandler(NotificationEvent.TYPE, this); } @Override public EventBus getEventBus() { return EVENT_BUS; } @Override public void onNotification(NotificationEvent event) { Growl.growl(event.getMessage()); } @Override public PlaceController getPlaceController() { return PLACE_CONTROLLER; } @Override public WelcomeView getWelcomeView() { return welcomeView; } @Override public TaskConsultView getTaskConsultView() { return null; } @Override public TaskListView getTaskListView() { return taskListView; } } 120
  121. 121. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 5 : Création de la classe WelcomePlace.java Dans le package client.place ajouter la classe suivante : public class WelcomePlace extends Place { public static class Tokenizer implements PlaceTokenizer<WelcomePlace> { public WelcomePlace getPlace(String token) { return new WelcomePlace(); } public String getToken(WelcomePlace place) { return ""; } } } 121
  122. 122. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 6 : Création de la classe TaskListPlace.java Dans le package client.place ajouter la classe suivante : public class TaskListPlace extends Place { public TaskListPlace() { } public static class Tokenizer implements PlaceTokenizer<TaskListPlace> { public TaskListPlace getPlace(String token) { return new TaskListPlace(); } public String getToken(TaskListPlace place) { return ""; } } } 122
  123. 123. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 7 : Création de la classe TaskConsultPlace.java Dans le package client.place ajouter la classe suivante : public class TaskConsultPlace extends Place { private String taskUuid; public TaskConsultPlace() { } public String getTaskUuid() { return taskUuid; } public void setTaskUuid(String taskUuid) { this.taskUuid = taskUuid; } public static class Tokenizer implements PlaceTokenizer<TaskConsultPlace> { public TaskConsultPlace getPlace(String token) { TaskConsultPlace place = new TaskConsultPlace(); place.setTaskUuid(token); return place; } public String getToken(TaskConsultPlace place) { return ""; } } } 123
  124. 124. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 8 : Création de la classe AppActivityMapper.java Dans le package client.mvp ajouter la classe suivante : public class AppActivityMapper implements ActivityMapper { private ClientFactory clientFactory; public AppActivityMapper(ClientFactory clientFactory) { super(); this.clientFactory = clientFactory; } @Override public Activity getActivity(Place place) { if (place instanceof TaskConsultPlace) { return new TaskConsultActivity((TaskConsultPlace) place, clientFactory); } else if (place instanceof TaskListPlace) { return new TaskListActivity((TaskListPlace) place, clientFactory); } else { return new WelcomeActivity(new WelcomePlace(), clientFactory); } } } 124
  125. 125. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 9 : Création de la classe AppPlaceHistoryMapper.java Dans le package client.mvp ajouter la classe suivante : @WithTokenizers({ WelcomePlace.Tokenizer.class, TaskConsultPlace.Tokenizer.class, TaskListPlace.Tokenizer.class }) public interface AppPlaceHistoryMapper extends PlaceHistoryMapper { } 125
  126. 126. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 10 : Création de la classe WelcomeActivity.java Dans le package client.activity ajouter la classe suivante : public class WelcomeActivity extends AbstractActivity implements Presenter { private ClientFactory clientFactory; private WelcomeView welcomeView; public WelcomeActivity(WelcomePlace place, ClientFactory clientFactory) { this.clientFactory = clientFactory; } @Override public void start(AcceptsOneWidget containerWidget, final EventBus eventBus) { welcomeView = clientFactory.getWelcomeView(); welcomeView.setPresenter(this); welcomeView.reset(); containerWidget.setWidget(welcomeView.asWidget()); } @Override public void addTask(Task task) { Window.alert("A coder dans le prochain exercice"); } @Override public void showList() { clientFactory.getPlaceController().goTo(new TaskListPlace()); } } 126
  127. 127. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 11 : Création de la classe TaskListActivity.java Dans le package client.activity ajouter la classe suivante : public class TaskListActivity extends AbstractActivity implements Presenter { private ClientFactory clientFactory; private TaskListView taskListView; public TaskListActivity(TaskListPlace place, ClientFactory clientFactory) { this.clientFactory = clientFactory; } @Override public void start(AcceptsOneWidget containerWidget, final EventBus eventBus) { taskListView = clientFactory.getTaskListView(); taskListView.reset(); containerWidget.setWidget(taskListView.asWidget()); } @Override public void display(String taskUuid) { TaskConsultPlace taskConsultPlace = new TaskConsultPlace(); taskConsultPlace.setTaskUuid(taskUuid); clientFactory.getPlaceController().goTo(taskConsultPlace); } } 127
  128. 128. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 12 : Création de la classe TaskConsultActivity.java Dans le package client.activity ajouter la classe suivante : public class TaskConsultActivity extends AbstractActivity { private ClientFactory clientFactory; private TaskConsultView taskConsultView; private String taskUuid; public TaskConsultActivity(TaskConsultPlace place, ClientFactory clientFactory) { this.clientFactory = clientFactory; taskUuid = place.getTaskUuid(); } @Override public void start(AcceptsOneWidget containerWidget, final EventBus eventBus) { taskConsultView = clientFactory.getTaskConsultView(); taskConsultView.reset(); containerWidget.setWidget(taskConsultView.asWidget()); } } 128
  129. 129. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 13 : Création de la classe WelcomeView.java Dans le package client.view ajouter la classe suivante : public interface WelcomeView extends IsWidget { void reset(); void setRecentTask(ArrayList<Task> tasks); void setPresenter(Presenter presenter); public interface Presenter { void addTask(Task task); void showList(); } } 129
  130. 130. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 14 : Création de la classe TaskListView.java Dans le package client.view ajouter la classe suivante : public interface TaskListView extends IsWidget { void reset(); void displayTasks(ArrayList<Task> tasks); void setPresenter(Presenter presenter); public interface Presenter { void display(String taskUuid); } } 130
  131. 131. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 15 : Création de la classe TaskConsultView.java Dans le package client.view ajouter la classe suivante : public interface TaskConsultView extends IsWidget { void reset(); void display(Task task); } 131
  132. 132. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 16 : Création de la classe WelcomeViewImpl.java Dans le package client.view ajouter la classe suivante : public class WelcomeViewImpl extends VerticalPanel implements WelcomeView { private NewTaskCreationPanel taskCreationPanel; private Presenter presenter; public WelcomeViewImpl() { super(); getElement().getStyle().setMargin(5, Unit.PX); getElement().getStyle().setBorderColor("white"); getElement().getStyle().setBorderWidth(2, Unit.PCT); getElement().getStyle().setBorderStyle(BorderStyle.SOLID); taskCreationPanel = new NewTaskCreationPanel(); add(taskCreationPanel); Button addButton = new Button("Add"); addButton.setIcon(IconType.PLUS); addButton.setType(ButtonType.PRIMARY); addButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { presenter.addTask(taskCreationPanel.flush()); } }); add(addButton); Button taskListButton = new Button("View all"); taskListButton.getElement().getStyle().setMarginTop(5, Unit.PX); taskListButton.setIcon(IconType.LIST); taskListButton.setType(ButtonType.PRIMARY); taskListButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { presenter.showList(); } }); add(taskListButton); setWidth("98%"); } @Override public void reset() { taskCreationPanel.reset(); } @Override public void setRecentTask(ArrayList<Task> tasks) { } @Override public void setPresenter(Presenter presenter) { this.presenter = presenter; } } 132
  133. 133. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 17 : Création de la classe TaskListViewImpl.java Dans le package client.view ajouter la classe suivante : public class TaskListViewImpl extends VerticalPanel implements TaskListView { private Presenter presenter; public TaskListViewImpl() { super(); getElement().getStyle().setMargin(5, Unit.PX); getElement().getStyle().setBorderColor("white"); getElement().getStyle().setBorderWidth(2, Unit.PCT); getElement().getStyle().setBorderStyle(BorderStyle.SOLID); Heading title = new Heading(HeadingSize.H2); title.setText("Task List"); add(title); } @Override public void reset() { } @Override public void setPresenter(Presenter presenter) { this.presenter = presenter; } @Override public void displayTasks(ArrayList<Task> tasks) { } } 133
  134. 134. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE MVP Etape 18 : Modification de la classe MonApplication.java Modifier la classe MonApplication.java de la manière suivante : public class MonApplication implements EntryPoint { private static ClientFactory clientFactory; private ContentPanel dynamicPanel = new ContentPanel(); private Div staticContentPanel; public static ClientFactory getClientFactory() { if (clientFactory == null) { clientFactory = GWT.create(ClientFactory.class); } return clientFactory; } public void onModuleLoad() { clientFactory = getClientFactory(); initGui(); PlaceController placeController = getClientFactory().getPlaceController(); // Start ActivityManager for the main widget with our ActivityMapper ActivityMapper activityMapper = new AppActivityMapper(getClientFactory()); ActivityManager activityManager = new ActivityManager(activityMapper, getClientFactory().getEventBus()); activityManager.setDisplay(dynamicPanel); // Start PlaceHistoryHandler with our PlaceHistoryMapper AppPlaceHistoryMapper historyMapper = GWT.create(AppPlaceHistoryMapper.class); PlaceHistoryHandler historyHandler = new PlaceHistoryHandler(historyMapper); historyHandler.register(placeController, getClientFactory().getEventBus(), new WelcomePlace()); historyHandler.handleCurrentHistory(); } private void initGui() { staticContentPanel = new Div(); Jumbotron jumbotron = new Jumbotron(); Container container = new Container(); Heading heading = new Heading(HeadingSize.H1); heading.setText("Ma Todo List"); container.add(heading); jumbotron.add(container); staticContentPanel.add(jumbotron); staticContentPanel.add(dynamicPanel); RootPanel.get().add(staticContentPanel); } private class ContentPanel extends VerticalPanel implements AcceptsOneWidget { public ContentPanel() { super(); setWidth("100%"); } @Override public void setWidget(IsWidget w) { if (w != null) { clear(); add(w.asWidget()); } } } 134
  135. 135. COMMUNICATION CLIENT-SERVEUR
  136. 136. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion GWT-RPC GWT-RPC (Remote Procedure Call) est un mécanisme simple de communication client/serveur. La mise en place d’un service RPC - par exemple MonService - passe par la création de trois classes: Côté client MonService : Définit l’interface du service MonServiceAsync : Équivalent asynchrone de l’interface MonService Côté serveur MonServiceImpl : Servlet implémentant le service (accès aux DAO...) Rappel Les objets pouvant transiter entre le serveur et le client doivent être situés dans le package shared être des beans sérialisables 136
  137. 137. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion GWT-RPC 137
  138. 138. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE CÔTÉ CLIENT Interface MonService L’interface doit étendre com.google.gwt.user.client.rpc.RemoteService. L’annotation @RemoteServiceRelativePath va permettre d’associer la partie cliente à la servlet correspondante. 138
  139. 139. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE CÔTÉ CLIENT Interface MonServiceAsync Cette classe reprend les méthodes de MonService en leur rajoutant un aspect asynchrone (via les AsyncCallback ). Elle peut être générée automatiquement à partir de MonService (Eclipse propose cette possibilité via le QuickFix Create asynchronous RemoteService ... ) Elle permet une communication asynchrone afin de ne pas bloquer le navigateur. C’est uniquement cette classe qui sera utilisée concrètement. 139
  140. 140. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion MISE EN PLACE CÔTÉ SERVEUR Classe MonServiceImpl Elle étend com.google.gwt.user.server.rpc.RemoteServiceServlet. Elle implémente MonService. Fichier web.xml La classe MonServiceImpl est une servlet. Elle doit être déclarée et mappée correctement dans le fichier web.xml. Ce mapping doit correspondre à la valeur indiquée pour l’annotation @RemoteServiceRelativePath 140
  141. 141. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion UTILISATION DU SERVICE Typiquement, un service RPC doit être utilisé par le Presenter. Instanciation Elle utilise le mécanisme GWT.create afin de créer la classe MonServiceAsync: private final MonServiceAsync MON_SERVICE = GWT.create(MonService.class); Utilisation Les appels asynchrones nécessitent la mise en place - souvent anonyme - de classes de CallBack qui permettent de définir les traitements à effectuer en cas de réussite ou de succès. 141
  142. 142. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion ASPECT ASYNCHRONE DES ÉCHANGES Les appels du client vers le serveur sont asynchrones. Il faut donc bien veiller à faire en sorte que les traitements dépendants du résultat (exemple : mise à jour de l’IHM) soient positionnés dans les fonctions de callBack (onSuccess et onFailure) et non à la suite de l’appel. 142
  143. 143. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion LIMITATIONS DE GWT-RPC RPC est un mécanisme assez simple qui contient certaines limitations. La principale est l’utilisation d’interfaces de type List ou Set pour les types d’échanges. Celle-ci est totalement possible. Toutefois, lors de la compilation en Javascript, une traduction pour chaque implémentation concrète présente dans l’émulation du JRE (ArrayList, Vector... )va être ajoutée, alourdissant ainsi le code généré. Ainsi, les types concrets doivent être privilégiés à ce niveau. Le mécanisme RequestFactory propose par rapport à RPC un certain nombre d’améliorations permettant d’avoir des échanges plus optimisés entre le client et le serveur. 143
  144. 144. EXERCICE 6 : MISE EN PLACE GWT-RPC
  145. 145. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion EXERCICE 6 : MISE EN PLACE GWT-RPC Etape 1 : Ajout/modification de la classe TaskListPanel.java Ajouter/Modifier la classe suivante : public class TaskListPanel extends VerticalPanel { private DetailPresenter presenter; public TaskListPanel() { super(); setWidth("100%"); } public void reset() { clear(); } public void setTasks(ArrayList<Task> tasks) { reset(); int i = 0; Grid grid = new Grid(tasks.size(), 4); grid.setWidth("100%"); for (Task task : tasks) { grid.setWidget(i, 0, new Label(task.getDescription())); grid.setWidget(i, 1, new Label(task.getResponsible())); grid.setWidget(i, 2, new Label(task.getDeadLine().toString())); Button detailButton = new Button("Detail"); detailButton.setType(ButtonType.PRIMARY); detailButton.setSize(ButtonSize.SMALL); final String uuid = task.getUuid(); detailButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { TaskConsultPlace taskConsultPlace = new TaskConsultPlace(); taskConsultPlace.setTaskUuid(uuid); MonApplication.getClientFactory().getPlaceController().goTo(taskConsultPlace); } }); grid.setWidget(i, 3, detailButton); i++; } add(grid); } public void setPresenter(DetailPresenter presenter) { this.presenter = presenter; } } 145
  146. 146. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion EXERCICE 6 : MISE EN PLACE GWT-RPC Etape 2 : Ajout/modification de la classe TaskConsultActivity.java Ajouter/Modifier la classe suivante dans le package client.activity: public class TaskConsultActivity extends AbstractActivity { private ClientFactory clientFactory; private TaskConsultView taskConsultView; private String taskUuid; private static final TaskServiceAsync TASK_SERVICE = GWT.create(TaskService.class); public TaskConsultActivity(TaskConsultPlace place, ClientFactory clientFactory) { this.clientFactory = clientFactory; taskUuid = place.getTaskUuid(); } @Override public void start(AcceptsOneWidget containerWidget, final EventBus eventBus) { taskConsultView = clientFactory.getTaskConsultView(); taskConsultView.reset(); containerWidget.setWidget(taskConsultView.asWidget()); TASK_SERVICE.findByUuid(taskUuid, new AsyncCallback<Task>() { @Override public void onSuccess(Task result) { taskConsultView.display(result); } @Override public void onFailure(Throwable caught) { Window.alert("KO"); } }); } } 146
  147. 147. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion EXERCICE 6 : MISE EN PLACE GWT-RPC Etape 3 : Ajout/modification de la classe TaskListActivity.java Ajouter/Modifier la classe suivante dans le package client.activity: public class TaskListActivity extends AbstractActivity implements Presenter { private ClientFactory clientFactory; private TaskListView taskListView; private static final TaskServiceAsync TASK_SERVICE = GWT.create(TaskService.class); public TaskListActivity(TaskListPlace place, ClientFactory clientFactory) { this.clientFactory = clientFactory; } @Override public void start(AcceptsOneWidget containerWidget, final EventBus eventBus) { taskListView = clientFactory.getTaskListView(); taskListView.setPresenter(this); taskListView.reset(); containerWidget.setWidget(taskListView.asWidget()); findAll(); } private void findAll() { TASK_SERVICE.findAll(new AsyncCallback<ArrayList<Task>>() { @Override public void onSuccess(ArrayList<Task> result) { taskListView.displayTasks(result); } @Override public void onFailure(Throwable caught) { Window.alert("KO"); } }); } @Override public void display(String taskUuid) { TaskConsultPlace taskConsultPlace = new TaskConsultPlace(); taskConsultPlace.setTaskUuid(taskUuid); clientFactory.getPlaceController().goTo(taskConsultPlace); } } 147
  148. 148. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion EXERCICE 6 : MISE EN PLACE GWT-RPC Etape 4 : Ajout/modification de la classe WelcomeActivity.java Ajouter/Modifier la classe suivante dans le package client.activity: public class WelcomeActivity extends AbstractActivity implements Presenter { private ClientFactory clientFactory; private WelcomeView welcomeView; private static final TaskServiceAsync TASK_SERVICE = GWT.create(TaskService.class); public WelcomeActivity(WelcomePlace place, ClientFactory clientFactory) { this.clientFactory = clientFactory; } @Override public void start(AcceptsOneWidget containerWidget, final EventBus eventBus) { welcomeView = clientFactory.getWelcomeView(); welcomeView.setPresenter(this); welcomeView.reset(); containerWidget.setWidget(welcomeView.asWidget()); findLatest(); } private void findLatest() { TASK_SERVICE.findLatest(new AsyncCallback<ArrayList<Task>>() { @Override public void onSuccess(ArrayList<Task> result) { welcomeView.setRecentTask(result); } @Override public void onFailure(Throwable caught) { Window.alert("KO"); } }); } @Override public void addTask(Task task) { TASK_SERVICE.save(task, new AsyncCallback<Task>() { @Override public void onSuccess(Task result) { clientFactory.getEventBus().fireEvent(new NotificationEvent("Saved")); findLatest(); } @Override public void onFailure(Throwable caught) { Window.alert("KO"); } }); } @Override public void showList() { clientFactory.getPlaceController().goTo(new TaskListPlace()); } @Override public void display(String taskUuid) { TaskConsultPlace taskConsultPlace = new TaskConsultPlace(); taskConsultPlace.setTaskUuid(taskUuid); clientFactory.getPlaceController().goTo(taskConsultPlace); } } 148
  149. 149. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion EXERCICE 6 : MISE EN PLACE GWT-RPC Etape 5 : Ajout/modification de la classe TaskConsultPlace.java Ajouter/Modifier la classe suivante dans le package client.place: public class TaskConsultPlace extends Place { private String taskUuid; public TaskConsultPlace() { } public String getTaskUuid() { return taskUuid; } public void setTaskUuid(String taskUuid) { this.taskUuid = taskUuid; } public static class Tokenizer implements PlaceTokenizer<TaskConsultPlace> { public TaskConsultPlace getPlace(String token) { TaskConsultPlace place = new TaskConsultPlace(); place.setTaskUuid(token); return place; } public String getToken(TaskConsultPlace place) { return place.getTaskUuid(); } } } 149
  150. 150. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion EXERCICE 6 : MISE EN PLACE GWT-RPC Etape 6 : Ajout/modification de la classe TaskService.java Ajouter/Modifier la classe suivante dans le package client.service: @RemoteServiceRelativePath("tasks") public interface TaskService extends RemoteService { Task save(Task task); ArrayList<Task> findLatest(); ArrayList<Task> findAll(); Task findByUuid(String uuid); } 150
  151. 151. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion EXERCICE 6 : MISE EN PLACE GWT-RPC Etape 7 : Ajout/modification de la classe TaskServiceAsync.java Ajouter/Modifier la classe suivante dans le package client.service: public interface TaskServiceAsync { void findAll(AsyncCallback<ArrayList<Task>> callback); void findLatest(AsyncCallback<ArrayList<Task>> callback); void save(Task task, AsyncCallback<Task> callback); void findByUuid(String uuid, AsyncCallback<Task> callback); } Etape 8 : Ajout/modification de la classe DetailPresenter.java Ajouter/Modifier la classe suivante dans le package client.view: public interface DetailPresenter { void display(String taskUuid); } 151
  152. 152. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion EXERCICE 6 : MISE EN PLACE GWT-RPC Etape 9 : Ajout/modification de la classe TaskConsultViewImpl.java Ajouter/Modifier la classe suivante dans le package client.view: public class TaskConsultViewImpl extends VerticalPanel implements TaskConsultView { public TaskConsultViewImpl() { } @Override public void reset() { clear(); } @Override public void display(Task task) { add(new Label(task.getDescription())); add(new Label(task.getResponsible())); add(new Label(task.getDeadLine().toString())); } } 152
  153. 153. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion EXERCICE 6 : MISE EN PLACE GWT-RPC Etape 10 : Ajout/modification de la classe TaskListView.java Ajouter/Modifier la classe suivante dans le package client.view: public interface TaskListView extends IsWidget { void reset(); void displayTasks(ArrayList<Task> tasks); void setPresenter(Presenter presenter); public interface Presenter extends DetailPresenter { } } 153
  154. 154. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion EXERCICE 6 : MISE EN PLACE GWT-RPC Etape 11 : Ajout/modification de la classe TaskListViewImpl.java Ajouter/Modifier la classe suivante dans le package client.view: public class TaskListViewImpl extends VerticalPanel implements TaskListView { private Presenter presenter; private TaskListPanel taskListPanel; public TaskListViewImpl() { super(); setWidth("100%"); getElement().getStyle().setMargin(5, Unit.PX); getElement().getStyle().setBorderColor("white"); getElement().getStyle().setBorderWidth(2, Unit.PCT); getElement().getStyle().setBorderStyle(BorderStyle.SOLID); Heading title = new Heading(HeadingSize.H2); title.setText("Task List"); add(title); taskListPanel = new TaskListPanel(); add(taskListPanel); } @Override public void reset() { taskListPanel.reset(); } @Override public void setPresenter(Presenter presenter) { this.presenter = presenter; taskListPanel.setPresenter(presenter); } @Override public void displayTasks(ArrayList<Task> tasks) { taskListPanel.reset(); taskListPanel.setTasks(tasks); } } 154
  155. 155. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion EXERCICE 6 : MISE EN PLACE GWT-RPC Etape 12 : Ajout/modification de la classe WelcomeView.java Ajouter/Modifier la classe suivante dans le package client.view: public interface WelcomeView extends IsWidget { void reset(); void setRecentTask(ArrayList<Task> tasks); void setPresenter(Presenter presenter); public interface Presenter extends DetailPresenter { void addTask(Task task); void showList(); } } 155
  156. 156. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion EXERCICE 6 : MISE EN PLACE GWT-RPC Etape 13 : Ajout/modification de la classe WelcomeViewImpl.java Ajouter/Modifier la classe suivante dans le package client.view: public class WelcomeViewImpl extends VerticalPanel implements WelcomeView { private NewTaskCreationPanel taskCreationPanel; private TaskListPanel taskListPanel; private Presenter presenter; public WelcomeViewImpl() { super(); getElement().getStyle().setMargin(5, Unit.PX); getElement().getStyle().setBorderColor("white"); getElement().getStyle().setBorderWidth(2, Unit.PCT); getElement().getStyle().setBorderStyle(BorderStyle.SOLID); taskCreationPanel = new NewTaskCreationPanel(); add(taskCreationPanel); Button addButton = new Button("Add"); addButton.setIcon(IconType.PLUS); addButton.setType(ButtonType.PRIMARY); addButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { presenter.addTask(taskCreationPanel.flush()); } }); add(addButton); add(new Heading(HeadingSize.H2, "Latest")); taskListPanel = new TaskListPanel(); add(taskListPanel); Button taskListButton = new Button("View all"); taskListButton.getElement().getStyle().setMarginTop(5, Unit.PX); taskListButton.setIcon(IconType.LIST); taskListButton.setType(ButtonType.PRIMARY); taskListButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { presenter.showList(); } }); add(taskListButton); setWidth("98%"); } @Override public void reset() { taskCreationPanel.reset(); taskListPanel.reset(); } @Override public void setRecentTask(ArrayList<Task> tasks) { taskListPanel.setTasks(tasks); } @Override public void setPresenter(Presenter presenter) { this.presenter = presenter; taskListPanel.setPresenter(presenter); } } 156
  157. 157. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion EXERCICE 6 : MISE EN PLACE GWT-RPC Etape 14 : Ajout/modification de la classe TaskServiceImpl.java Ajouter/Modifier la classe suivante dans le package server.service: public class TaskServiceImpl extends RemoteServiceServlet implements TaskService { ArrayList<Task> tasks = new ArrayList<>(); public TaskServiceImpl() { fakeInit(); } private void fakeInit() { for (int i = 0; i < 10; i++) { save(createTask(i)); } } @Override public Task save(Task task) { task.setUuid(UUID.randomUUID().toString()); tasks.add(task); return task; } @Override public ArrayList<Task> findLatest() { int maxElementCount = 5; int taskCount = tasks.size(); if (taskCount < maxElementCount) { maxElementCount = taskCount; } ArrayList<Task> aux = new ArrayList<Task>(tasks.subList(taskCount - maxElementCount, taskCount)); Collections.reverse(aux); return aux; } @Override public ArrayList<Task> findAll() { ArrayList<Task> aux = new ArrayList<Task>(tasks); Collections.reverse(aux); return aux; } public Task createTask(int count) { Task result = new Task(); result.setResponsible("Resp. " + count); result.setDescription("Description. " + count); result.setDeadLine(new Date()); return result; } @Override public Task findByUuid(String uuid) { for (Task task : tasks) { if (task.getUuid().compareTo(uuid) == 0) { return task; } } return null; } } 157
  158. 158. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion EXERCICE 6 : MISE EN PLACE GWT-RPC Etape 15 : Modification du fichier web.xml Modifier le fichier web.xml de la manière suivante: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"> <!-- Servlets --> <servlet> <servlet-name>taskServlet</servlet-name> <servlet-class>fr.jdev.atelier.server.service.TaskServiceImpl</servlet-class> </servlet> <servlet-mapping> <servlet-name>taskServlet</servlet-name> <url-pattern>/monapplication/tasks</url-pattern> </servlet-mapping> <!-- Default page to serve --> <welcome-file-list> <welcome-file>MonApplication.html</welcome-file> </welcome-file-list> </web-app> 158
  159. 159. CONCLUSION
  160. 160. Introduction Architecture Premi`ere application Cr´eation de l’interface graphique Bus d’´ev`enements Cin´ematique de l’appli- cation Communication client-serveur Conclusion CONCLUSION Le framework GWT est extrêmement riche, d’autres fonctionnalités restent à aborder : Mise en place du multilinguisme (I18n) Optimisation des ressources Image et Style Optimisation des échanges Client/Serveur (RequestFactory) Inversion de contrôle côté client (GIN) Chargement du code client par tranche (Code spliting) Data Binding (Framework Editor) ... De plus la mise en œuvre d’un projet GWT peut également nécessiter la connaissance de technologies complémentaires : Architecture REST (SOAP) Responsive Design Git & Gitflow ... 160

×