Upload
francoisandreprof
View
148
Download
2
Embed Size (px)
DESCRIPTION
Cours GWT présentant certains aspects avancés : - Bus d'évènement - Activities & Places - MVP - ClientFactory - RCP
Citation preview
Formation GWTVersion 0.1.0
ANDRE François
21/22 juillet 2014
ANDRE François Formation GWT 21/22 juillet 2014 1 / 86
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 desconditions de la licence (creativecommons.org/licenses/by/4.0/).
ANDRE François Formation GWT 21/22 juillet 2014 2 / 86
1. Introduction
2. Architecture
3. Première application
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 3 / 86
Introduction
1. Introduction
2. Architecture
3. Première application
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 4 / 86
Introduction
Quelques questions...
I Où doit se situer un traitement ?
I Android ou iOS ?
I Des gens utilisent-ils encore IE6 ?
I Comment économiser les ressources ?
I Comment faire une boucle en Javascript ?
I Comment déboguer en Javascript ?
I Pourquoi ne puis-je pas faire du Swing ?
I Pourquoi mon application n’est-elle toujours pas finie ?
I Google n’a-t-il pas arrêté GWT ?
ANDRE François Formation GWT 21/22 juillet 2014 5 / 86
Fiablilité de la cible CSS+HTML5+Javascript
Une réponse possible
GWT
Une idée simple
Coder la partie cliente en JavaLa compiler en JavaScript
Avantages principaux
Intégré dans l’écosystème JEERelié à l’écosystème HTML/Javascript
Introduction
Repère historiques
Chronologie succincte :
I 2006 v1.0
I ...
I 2009 v2.0
I ...
I Janvier 2014 v2.6.0
Futur
I Évolutions WEB : HTML5, W3C Web Components ...
I Évolutions Java : Support Java 8 ...
I Évolutions GWT : Integration Javascript ...
ANDRE François Formation GWT 21/22 juillet 2014 10 / 86
Introduction
Plus d’informations
I Site officiel : http://www.gwtproject.org/
I Démonstration officielle :http://samples.gwtproject.org/samples/Showcase/Showcase.html
I Conférences en ligne :GWT Create (http://gwtcreate.com/)Google I/O (chaîne Youtube)
I Blogs :Gwt Daily (http://www.gwtdaily.com/)Sami Jabber (http://www.samijaber.com/)
I Tutoriels :http://courses.coreservlets.com/Course-Materials/gwt.html
ANDRE François Formation GWT 21/22 juillet 2014 11 / 86
Architecture
1. Introduction
2. ArchitectureTwitter BootstrapSpring FrameworkJPA : Java Persistence APIMavenEclipse
3. Première application
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 12 / 86
Architecture
Eléments mis en œuvre
ANDRE François Formation GWT 21/22 juillet 2014 13 / 86
Architecture Twitter Bootstrap
1. Introduction
2. ArchitectureTwitter BootstrapSpring FrameworkJPA : Java Persistence APIMavenEclipse
3. Première application
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 14 / 86
Architecture Twitter Bootstrap
Twitter Bootstrap
Description : Collection d’outils HTML/CSS/JavascriptObjectif : Compenser l’aspect brut des composants GWT
I Rendu moderne
I Site webadaptatif (RWD)
I GrandePopularité
ANDRE François Formation GWT 21/22 juillet 2014 15 / 86
Architecture Spring Framework
1. Introduction
2. ArchitectureTwitter BootstrapSpring FrameworkJPA : Java Persistence APIMavenEclipse
3. Première application
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 16 / 86
Architecture Spring Framework
Spring Framework
Description : Framework Java permettant la mise en place d’un conteneurlégerObjectif : Simplification de l’architecture et fiabilisation du code
I Inversion decontrôle (IoC)
I Bibliothèquescomplémentaires(accès auxdonnées, ...)
ANDRE François Formation GWT 21/22 juillet 2014 17 / 86
Architecture JPA : Java Persistence API
1. Introduction
2. ArchitectureTwitter BootstrapSpring FrameworkJPA : Java Persistence APIMavenEclipse
3. Première application
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 18 / 86
Architecture JPA : Java Persistence API
JPA : Java Persistence API
Description : API officielle de Mapping Objet-SGBDObjectif : Simplifier la mise en œuvre de la persistance
I Définition du mapping via annotation
I Interrogation via JPQL
ANDRE François Formation GWT 21/22 juillet 2014 19 / 86
Architecture Maven
1. Introduction
2. ArchitectureTwitter BootstrapSpring FrameworkJPA : Java Persistence APIMavenEclipse
3. Première application
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 20 / 86
Architecture Maven
Maven
Description : Moteur de productionObjectif : Fiabilise les étapes clés du développement (compilation, test,génération, livraison,...)
I Le fichier pom.xml : configuration globale du projet
I 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)
ANDRE François Formation GWT 21/22 juillet 2014 21 / 86
Architecture Eclipse
1. Introduction
2. ArchitectureTwitter BootstrapSpring FrameworkJPA : Java Persistence APIMavenEclipse
3. Première application
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 22 / 86
Architecture Eclipse
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 certainesfonctionnalités utiles :
I GénérationI ValidationI ...
Remarques:I le plugin M2E est déconseillé pour les projets GWTI Distribution privilégiée : Eclipse IDE for Java EE Developers
ANDRE François Formation GWT 21/22 juillet 2014 23 / 86
Architecture Eclipse
Plugin GWT (Navigateur)
Traditionnellement le développement GWT - Dev Mode - repose sur unmodule installé sur le navigateur (Chrome, Firefox, IE, Safari).
Ce mode est contraignant pour les développeur de GWT pour les raisonssuivantes :
I Le nombre de navigateurs
I Les API propriétaires sous jacentes
Il est remplacé par le Super Dev Mode
ANDRE François Formation GWT 21/22 juillet 2014 24 / 86
Première application
1. Introduction
2. Architecture
3. Première applicationGénération d’un squeletteapplicatifExploration du squelette
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 25 / 86
Première application Génération d’un squelette applicatif
1. Introduction
2. Architecture
3. Première applicationGénération d’un squeletteapplicatifExploration du squelette
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 26 / 86
Première application Génération d’un squelette applicatif
Génération squelette applicatif
Utilisation de l’archetype GWT du SEDOO Prérequis:
I JVM
I Maven / Ant
I Eclipse
Etape 1 : Génération archetype
mvn archetype:generate -DarchetypeGroupId=fr.sedoo.archetype -DarchetypeArtifactId=archetype-gwt
-DarchetypeVersion=1.0-SNAPSHOT -DgroupId=org.mondomaine -DartifactId=testgwt
-DarchetypeRepository=http://
Etape 2 : Mise en place configuration eclipse
ant eclipse -DM2_HOME=$M2_HOME
Etape 3 : Import dans eclipse
Import... > Existing Projects into Workspace
ANDRE François Formation GWT 21/22 juillet 2014 27 / 86
Première application Exploration du squelette
1. Introduction
2. Architecture
3. Première applicationGénération d’un squeletteapplicatifExploration du squelette
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 28 / 86
Première application Exploration du squelette
Exploration du squelette
Architecture Maven classiqueI /src/main/java
I /src/main/resources
I /src/main/webapp
I ...
Architecture GWT classiquePackage client Classes de la partie cliente (⇒ Javascript)
Package sharedClasses communes client & serveur(⇒ Javascript & Java)
Package serverClasses de la partie serveur(⇒ Application JEE standard)
ANDRE François Formation GWT 21/22 juillet 2014 29 / 86
Première application Exploration du squelette
Contraintes package client & shared
I 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), ...
I 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
ANDRE François Formation GWT 21/22 juillet 2014 30 / 86
Première application Exploration du squelette
Descripteur du module: module.gwt.xml
I RôlePilotage de l’application
I Positionau dessus du package client
I ContenuNom du module <module>Point d’entrée<entry-point class=’fr.sedoo.sssdata.client.SssData’ />
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>
ANDRE François Formation GWT 21/22 juillet 2014 31 / 86
Première application Exploration du squelette
Conteneur HTML
I RôleChargement de l’application
I PositionDans le répertoire webapp
I ContenuPage HTML classique (js, css, balises HTML...)Chargement du module
<script type="text/javascript" language="javascript"src="sssdata/sssdata.nocache.js"></script>
Remarque: le script nocache.js charge la compilation adéquate dumodule :
La plus récenteCorrespondant au navigateur du client et à sa langue
ANDRE François Formation GWT 21/22 juillet 2014 32 / 86
Première application Exploration du squelette
Compilation et Permutations
Lors de la compilation Javascript, GWT génère une tradution pour chaquecouple
I moteur de navigateur supporté (6)
I langue indiquée dans le descripteur de module
Les permutations sont une des nombreuses optimisations fournies par GWT.
ANDRE François Formation GWT 21/22 juillet 2014 33 / 86
Première application Exploration du squelette
Entry Point
I RôleÉquivalent de main dans les application Java
I PositionDans le package clientConformément au fichier gwt.xml
I ContenuImplé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
RootPanel loadingMessage = RootPanel.get("loadingMessage");DOM.setInnerHTML(loadingMessage.getElement(), "");
• Ajoute l’interface utilisateur dans le conteneur HTML ;skeleton = new TopSideMenuSkeleton(clientFactory.getEventBus());RootLayoutPanel.get().add(skeleton)
ANDRE François Formation GWT 21/22 juillet 2014 34 / 86
Première application Exploration du squelette
Autres fichiers remarquables
I Configuration Maven/pom.xml
I Alias Maven/build.xmlCibles principales:
• /eclipse: Reconstitution de la configuration Eclipse en fonction du pom.xml.A utiliser à chaque modification du pom.xml ou du répertoire/src/main/webapp
• /package: Génération du war.
I Launch Eclipse/gui.launch : Lancement de l’application en Mode dev
I Configuration Spring/src/main/webapp/WEB-INF/BeanLocations.xml
I Configuration JPA/src/main/resources/META-INF/persistence.xml
ANDRE François Formation GWT 21/22 juillet 2014 35 / 86
Création de l’interface graphique
1. Introduction
2. Architecture
3. Première application
4. Création de l’interface graphiqueComposants de basesLibrairies complémentaires
UiBinderClientFactory
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 36 / 86
Création de l’interface graphique Composants de bases
1. Introduction
2. Architecture
3. Première application
4. Création de l’interface graphiqueComposants de basesLibrairies complémentaires
UiBinderClientFactory
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 37 / 86
Création de l’interface graphique Composants de bases
Composants de base
GWT propose un certain nombre de composants de base pour construire lesinterfaces:
I Widgets élémentaires: boutons, zones de texte, cases à cocher...
I Panneaux de positionnement (similaires à Swing): panneauxhorizontaux, verticaux, à onglets...
Comme en Swing, ces éléments sont des classes Java et se combinent afinde créer l’interface souhaitée.
ANDRE François Formation GWT 21/22 juillet 2014 38 / 86
Création de l’interface graphique Composants de bases
Widgets élémentaires
I Étendent com.google.gwt.user.client.ui.Widget
Exemples :
TextBox
TextArea
Button
RadioButtonCheckBox
DatePicker, CellList...
ANDRE François Formation GWT 21/22 juillet 2014 39 / 86
Création de l’interface graphique Composants de bases
Panneaux de positionnement
I Panneaux classiques(étendent com.google.gwt.user.client.ui.Panel)
Exemples :
HorizontalPanel
VerticalPanel
FlowPanel
HTMLPanelPermet de mixer des balises HTML et des com-posants GWT
Remarque: les panneaux héritent aussi de Widget
ANDRE François Formation GWT 21/22 juillet 2014 40 / 86
Création de l’interface graphique Composants de bases
Panneaux de positionnement
I Panneaux dynamiques(implémentent com.google.gwt.user.client.ui.ProvidesResizeet com.google.gwt.user.client.ui.RequiresResize )
Exemples :
DockLayoutPanel
SplitLayoutPanel
TabLayoutPanel
ANDRE François Formation GWT 21/22 juillet 2014 41 / 86
Création de l’interface graphique Librairies complémentaires
1. Introduction
2. Architecture
3. Première application
4. Création de l’interface graphiqueComposants de basesLibrairies complémentaires
UiBinderClientFactory
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 42 / 86
Création de l’interface graphique Librairies complémentaires
Librairies complémentaires
I Solutions spécifiques en GWT :
Sencha GXT (http://www.sencha.com/products/gxt/)Vaadin (https://vaadin.com/home)
Sencha GXT
ANDRE François Formation GWT 21/22 juillet 2014 43 / 86
Création de l’interface graphique Librairies complémentaires
Librairies complémentaires
I 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ébogageplus difficile.
ANDRE François Formation GWT 21/22 juillet 2014 44 / 86
Création de l’interface graphique Librairies complémentaires
Création de composants
I 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 :
ANDRE François Formation GWT 21/22 juillet 2014 45 / 86
Création de l’interface graphique Librairies complémentaires
Création de composants
I Par héritage d’un Composite :Objectif: Permet de créer un composant en combinant plusieursWidgets sans en exposer les méthodes.
Attention : il est nécessaire d’appeler la fonction initWidget sur un descomposants lors du constructeur.
ANDRE François Formation GWT 21/22 juillet 2014 46 / 86
Création de l’interface graphique UiBinder
1. Introduction
2. Architecture
3. Première application
4. Création de l’interface graphiqueComposants de basesLibrairies complémentaires
UiBinderClientFactory
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 47 / 86
Création de l’interface graphique UiBinder
UIBinder : Moteur de templates
I RôleSimplifier la création d’écran complexes avec un moteur de templates
I PrincipeUn fichier de description, monFichier.ui.xml, permet de définir l’écran demanière similaire à une page HTML/JSP...Dans ce fichier les noms des balises importantes sont indiqués via l’attributui:fieldUne classe, monFichier.java permet de définir le comportement dynamiqueassocié à cet écran.Cette classe étend CompositeDans cette classe on retrouve le nom des attributs ui:field indiquésdans le fichier de description
ANDRE François Formation GWT 21/22 juillet 2014 48 / 86
Création de l’interface graphique UiBinder
UIBinder : Exemple
I Descripteur : MetadataSearchViewImpl.ui.xml
ANDRE François Formation GWT 21/22 juillet 2014 49 / 86
Création de l’interface graphique UiBinder
UIBinder : Exemple
I Classe : MetadataSearchViewImpl.java
ANDRE François Formation GWT 21/22 juillet 2014 50 / 86
Création de l’interface graphique UiBinder
UIBinder : Compléments
I Instantication des champs ui:fieldSoit par le fichier de description lors de l’appel à initWidget dans leconstructeur :
initWidget(uiBinder.createAndBindUi(this));Soit manuellement
• En modifiant l’annotation UiField : @UiField(provided = true)• En instanciant les champs avant l’appel à initWidget.
I Ajout ce comportement sur les éléments
Via l’annotation @UiHandlerLa signature de la méthode permet d’indiquer l’évènement géré
@UiHandler("searchButton")void onSearchButtonClicked(ClickEvent event){...}
ANDRE François Formation GWT 21/22 juillet 2014 51 / 86
Création de l’interface graphique UiBinder
UIBinder : Compléments
I Utilisation de Widgets personnelsLa balise <ui:UiBinder> permet de définir via des espaces de nommage lespackages 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.
ANDRE François Formation GWT 21/22 juillet 2014 52 / 86
Création de l’interface graphique ClientFactory
1. Introduction
2. Architecture
3. Première application
4. Création de l’interface graphiqueComposants de basesLibrairies complémentaires
UiBinderClientFactory
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 53 / 86
Création de l’interface graphique ClientFactory
ClientFactory
I Objectif : Optimiser le temps d’instanciation des objets complexes
I Problème : Certains composants clients sont coûteux à instanciernotamment les différents éléments de l’interface graphique.
I Solution : Utiliser une Factory ayant la charge d’instancier de manièreunique - et si nécessaire - ces différents composants et de lestransmettre aux objets voulant les utiliser (Exemple: le Presenter dans lemodè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 instancesuniques de l’application comme par exemple le bus d’évènements (cf.infra).
ANDRE François Formation GWT 21/22 juillet 2014 54 / 86
Bus d’évènements
1. Introduction
2. Architecture
3. Première application
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 55 / 86
Bus d’évènements
Bus d’évènements
I Objectif : Simplifier la communication entre les composantsI Problème : Les interfaces des applications GWT peuvent contenir de
nombreux composants qui doivent dialoguer entre eux. Toutefois, danscertains 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 connusdu composant source.
I Solution : GWT propose un bus permettant l’échange d’évènementsentre 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.
ANDRE François Formation GWT 21/22 juillet 2014 56 / 86
Bus d’évènements
Définition d’un évènement
I Exemple : évènement signalant la connexion d’un utilisateur -UserLoginEventIl est nécessaire de créer deux classes:
Le gestionnaire : UserLoginEventHandlerL’évènement : UserLoginEvent
I Le gestionnaire
Interface qui sera implémentée par les classes écoutant l’évènementDoit étendre com.google.gwt.event.shared.EventHandler
ANDRE François Formation GWT 21/22 juillet 2014 57 / 86
Bus d’évènements
Définition d’un évènement
I L’évènement
La classe doit étendre com.google.gwt.event.shared.GwtEventElle définit un attribut statique - traditionnellement nommé TYPE - qui vaidentifier l’évènement et permettre de s’y abonner auprès du bus.
ANDRE François Formation GWT 21/22 juillet 2014 58 / 86
Bus d’évènements
Abonnement et Publication
I Abonnement à un évènementL’abonnement auprès du bus s’effectue via la méthode addHandler enpassant 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);
I Publication d’un évènement La diffusion d’un évènement sur le buss’effectue de la manière suivante :
UserLoginEvent monEvenement = new UserLoginEvent();// Valorisation de l’objet monEvenement ...EVENT_BUS.fireEvent(monEvenement);
ANDRE François Formation GWT 21/22 juillet 2014 59 / 86
Cinématique de l’application
1. Introduction
2. Architecture
3. Première application
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’applicationGestion de l’historiqueActivities and PlacesPatron Model-View-Presenter
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 60 / 86
Cinématique de l’application
Trois composants structurants
I La cinématique d’une application Ajax diffère d’une application Webtraditionnelle où le serveur joue un rôle de chef d’orchestre.
I Les versions récentes de GWT ont introduit un certain nombre de bonnespratiques permettant la construction rigoureuse d’une telle cinématique:
Gestion de l’historiqueActivities and PlacesPatron Model-View-Presenter
ANDRE François Formation GWT 21/22 juillet 2014 61 / 86
Cinématique de l’application
Gestion de l’historique
I Objectif : Permettre une gestion complète de l’historique, notamment lanavigation via les boutons Précédent /Suivant
I 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.
ANDRE François Formation GWT 21/22 juillet 2014 62 / 86
Cinématique de l’application Gestion de l’historique
1. Introduction
2. Architecture
3. Première application
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’applicationGestion de l’historiqueActivities and PlacesPatron Model-View-Presenter
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 63 / 86
Cinématique de l’application Gestion de l’historique
Gestion de l’historique
I 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 appelantHistory.newItem(token)Chaque objet voulant réagir aux évènement de l’historique s’abonne auxHistory.addValueChangeHandler(). Chaque abonné devra déterminer
• si l’évènement le concerne• comment reconstruire l’état correspondant au token.
ANDRE François Formation GWT 21/22 juillet 2014 64 / 86
Cinématique de l’application Activities and Places
1. Introduction
2. Architecture
3. Première application
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’applicationGestion de l’historiqueActivities and PlacesPatron Model-View-Presenter
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 65 / 86
Cinématique de l’application Activities and Places
Activities
I Activity : Une activité est une fonctionnalité de l’application effectuée parun utilisateur.Exemples : LoginActivity, SearchActivity...Une activité étendcom.google.gwt.activity.shared.AbstractActivity
I Cycle de vie : La gestionnaire d’activité(com.google.gwt.activity.shared.ActivityManager) active etdésactive les activités via les méthodes suivantes :
startInvoquée lors du démarage de l’activité. A son is-sue, l’activité doit fournir la vue lui correspondant.
mayStopInvoquée pour savoir si l’activité en cours peuts’arrêter.
onStop Invoquée lors de l’arrêt de l’activité.
onCancelInvoquée lorsque le démarrage n’est pas termn-iné mais que l’utilisateur a demandé le début d’uneautre activité.
ANDRE François Formation GWT 21/22 juillet 2014 66 / 86
Cinématique de l’application Activities and Places
Places
I Place : Une place représente un état d’utilisation d’une activité. Il doitpouvoir être sérialisé sous forme de token conformément au mécanismede gestion de l’historique.
I Mise en œuvre :
Une place hérite de com.google.gwt.place.shared.Place.Le tokenizer associé à la place hérite decom.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.
ANDRE François Formation GWT 21/22 juillet 2014 67 / 86
Cinématique de l’application Activities and Places
Navigation via les places
I Les places sont le meilleur moyen de naviguer au sein d’une applicationGWT.Le mécanisme est le suivant:
1 Instanciation et valoriastion de la place souhaitée2 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 del’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
ANDRE François Formation GWT 21/22 juillet 2014 68 / 86
Cinématique de l’application Activities and Places
Navigation via les places
I La correspondance entre Place et Activity est effectuée de la manièresuivante:
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éthodeActivity getActivity(Place place);
La classe ActivityMapper est donc le composant central dumécanisme.Exemplepublic Activity getActivity(Place place) {if (place instanceof WelcomePlace){return new WelcomeActivity((WelcomePlace) place, clientFactory);}...}
ANDRE François Formation GWT 21/22 juillet 2014 69 / 86
Cinématique de l’application Patron Model-View-Presenter
1. Introduction
2. Architecture
3. Première application
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’applicationGestion de l’historiqueActivities and PlacesPatron Model-View-Presenter
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 70 / 86
Cinématique de l’application Patron Model-View-Presenter
Patron Model-View-Presenter
GWT étend le traditionnel modèle MVC avec le patron MVP dans lequel lePresenter tient le rôle central.
Nom Situation RôleModel Côté serveur Récupère les données (via les DAO).
View Côté clientAffichage des données transmises par le Presenter.
Transmet au Presenter les évènements importants
(exemple: click sur des boutons,...)
Presenter Côté clientMobilise 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
I L’objectif est de postionner un maximum d’intelligence au niveau du Presenter afin que celui-cipuisse 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...).
I La View est donc dépourvue de traitements outre ceux spécifiques à son implémentation. Cecipermet de l’exclure plus ou moins de la chaine de test.
ANDRE François Formation GWT 21/22 juillet 2014 71 / 86
Cinématique de l’application Patron Model-View-Presenter
Intégration avec le modèle Activities and Places
L’activity joue le rôle du Presenter
ANDRE François Formation GWT 21/22 juillet 2014 72 / 86
Cinématique de l’application Patron Model-View-Presenter
Mise en place d’une View
I Une View doit être définie sous forme d’une Interface qui étendcom.google.gwt.user.client.ui.IsWidget.
I Le Presenter ne doit connaître que cette Interface.I 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. Dansce cas:
La View doit définir une methode setPresenter correspondante.L’Activity doit implémenter le Presenter.
ANDRE François Formation GWT 21/22 juillet 2014 73 / 86
Cinématique de l’application Patron Model-View-Presenter
Récupération de la View par le Presenter
I Le lien entre une View et l’implémentation à utiliser dans le contextecourant est fait par la ClientFactory.Ceci permet d’envisager la mise en place de plusieurs implémentationsde ClientFactory :
pour les mobilespour les tests...
ANDRE François Formation GWT 21/22 juillet 2014 74 / 86
Cinématique de l’application Patron Model-View-Presenter
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écessaires5 L’Activity les transmet à la vue qui les positionne.6 L’Activity affiche la vue via la commande
containerWidget.setWidget(view.asWidget());
ANDRE François Formation GWT 21/22 juillet 2014 75 / 86
Cinématique de l’application Patron Model-View-Presenter
Communication Presenter - Model
La communication entre le Presenter et le Model s’effectue via lemécanisme GWT-RPC décrit dans la section suivante.
ANDRE François Formation GWT 21/22 juillet 2014 76 / 86
Communication client-serveur
1. Introduction
2. Architecture
3. Première application
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 77 / 86
Communication client-serveur
GWT-RPC
GWT-RPC (Remote Procedure Call) est un mécanisme simple decommunication client/serveur.La mise en place d’un service RPC - par exemple MonService - passe par lacréation de trois classes:
I Côté clientMonService : Définit l’interface du serviceMonServiceAsync : Équivalent asynchrone de l’interface MonService
I Côté serveurMonServiceImpl : Servlet implémentant le service (accès aux DAO...)
Rappel
Les objets pouvant transiter entre le serveur et le client doivent
I être situés dans le package shared
I être des beans sérialisables
ANDRE François Formation GWT 21/22 juillet 2014 78 / 86
Communication client-serveur
Mise en place côté client
I Interface MonService
L’interface doit étendre com.google.gwt.user.client.rpc.RemoteService.L’annotation @RemoteServiceRelativePath va permettre d’associer lapartie cliente à la servlet correspondante.
ANDRE François Formation GWT 21/22 juillet 2014 79 / 86
Communication client-serveur
Mise en place côté client
I Interface MonServiceAsyncCette classe reprend les méthodes de MonService en leur rajoutant unaspect asynchrone (via les AsyncCallback ).Elle peut être générée automatiquement à partir de MonService (Eclipsepropose cette possibilité via le QuickFix Create asynchronousRemoteService ... )Elle permet une communication asynchrone afin de ne pas bloquer lenavigateur. C’est uniquement cette classe qui sera utilisée concrètement.
ANDRE François Formation GWT 21/22 juillet 2014 80 / 86
Communication client-serveur
Mise en place côté serveur
I Classe MonServiceImplElle étend com.google.gwt.user.server.rpc.RemoteServiceServlet.Elle implémente MonService.
I Fichier web.xmlLa classe MonServiceImpl est une servlet. Elle doit être déclarée etmappée correctement dans le fichier web.xml. Ce mapping doitcorrespondre à la valeur indiquée pour l’annotation@RemoteServiceRelativePath
ANDRE François Formation GWT 21/22 juillet 2014 81 / 86
Communication client-serveur
Utilisation du service
Typiquement, un service RPC doit être utilisé par le Presenter.
I InstanciationElle utilise le mécanisme GWT.create afin de créer la classeMonServiceAsync:private final MonServiceAsync MON_SERVICE = GWT.create(MonService.class);
I UtilisationLes 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.
ANDRE François Formation GWT 21/22 juillet 2014 82 / 86
Communication client-serveur
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 etonFailure) et non à la suite de l’appel.
ANDRE François Formation GWT 21/22 juillet 2014 83 / 86
Communication client-serveur
Limitations de GWT-RPC
I RPC est un mécanisme assez simple qui contient certaines limitations.La principale est l’utilisation d’interfaces de type List ou Set pour lestypes d’échanges.
I Celle-ci est totalement possible. Toutefois, lors de la compilation enJavascript, une traduction pour chaque implémentation concrète présentedans l’émulation du JRE (ArrayList, Vector... )va être ajoutée,alourdissant ainsi le code généré.
I Ainsi, les types concrets doivent être privilégiés à ce niveau.
I Le mécanisme RequestFactory propose par rapport à RPC un certainnombre d’améliorations permettant d’avoir des échanges plus optimisésentre le client et le serveur.
ANDRE François Formation GWT 21/22 juillet 2014 84 / 86
Conclusion
1. Introduction
2. Architecture
3. Première application
4. Création de l’interface graphique
5. Bus d’évènements
6. Cinématique de l’application
7. Communication client-serveur
8. Conclusion
ANDRE François Formation GWT 21/22 juillet 2014 85 / 86
Conclusion
Conclusion
I Le framework GWT est extrêmement riche, d’autres fonctionnalitésrestent à aborder :
Mise en place du multilinguisme (I18n)Optimisation des ressources Image et StyleOptimisation des échanges Client/Serveur (RequestFactory )Inversion de contrôle côté client (GIN)Chargement du code client par tranche (Code spliting)Déboggage via le navigateur (Super dev mode)...
I De plus la mise en œuvre d’un projet GWT peut également nécessiter laconnaissance de technologies complémentaires :
Architecture REST (SOAP)Responsive DesignGit & Gitflow...
ANDRE François Formation GWT 21/22 juillet 2014 86 / 86