86
Formation GWT Version 0.1.0 ANDRE François 21/22 juillet 2014 ANDRE François Formation GWT 21/22 juillet 2014 1 / 86

Formation gwt

Embed Size (px)

DESCRIPTION

Cours GWT présentant certains aspects avancés : - Bus d'évènement - Activities & Places - MVP - ClientFactory - RCP

Citation preview

Page 1: Formation gwt

Formation GWTVersion 0.1.0

ANDRE François

21/22 juillet 2014

ANDRE François Formation GWT 21/22 juillet 2014 1 / 86

Page 2: Formation gwt

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

Page 3: Formation gwt

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

Page 4: Formation gwt

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

Page 5: Formation gwt

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

Page 6: Formation gwt

Fiablilité de la cible CSS+HTML5+Javascript

Page 7: Formation gwt

Une réponse possible

GWT

Page 8: Formation gwt

Une idée simple

Coder la partie cliente en JavaLa compiler en JavaScript

Page 9: Formation gwt

Avantages principaux

Intégré dans l’écosystème JEERelié à l’écosystème HTML/Javascript

Page 10: Formation gwt

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

Page 11: Formation gwt

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

Page 12: Formation gwt

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

Page 13: Formation gwt

Architecture

Eléments mis en œuvre

ANDRE François Formation GWT 21/22 juillet 2014 13 / 86

Page 14: Formation gwt

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

Page 15: Formation gwt

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

Page 16: Formation gwt

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

Page 17: Formation gwt

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

Page 18: Formation gwt

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

Page 19: Formation gwt

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

Page 20: Formation gwt

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

Page 21: Formation gwt

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

Page 22: Formation gwt

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

Page 23: Formation gwt

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

Page 24: Formation gwt

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

Page 25: Formation gwt

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

Page 26: Formation gwt

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

Page 27: Formation gwt

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

Page 28: Formation gwt

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

Page 29: Formation gwt

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

Page 30: Formation gwt

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

Page 31: Formation gwt

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

Page 32: Formation gwt

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

Page 33: Formation gwt

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

Page 34: Formation gwt

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

Page 35: Formation gwt

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

Page 36: Formation gwt

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

Page 37: Formation gwt

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

Page 38: Formation gwt

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

Page 39: Formation gwt

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

Page 40: Formation gwt

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

Page 41: Formation gwt

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

Page 42: Formation gwt

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

Page 43: Formation gwt

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

Page 44: Formation gwt

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

Page 45: Formation gwt

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

Page 46: Formation gwt

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

Page 47: Formation gwt

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

Page 48: Formation gwt

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

Page 49: Formation gwt

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

Page 50: Formation gwt

Création de l’interface graphique UiBinder

UIBinder : Exemple

I Classe : MetadataSearchViewImpl.java

ANDRE François Formation GWT 21/22 juillet 2014 50 / 86

Page 51: Formation gwt

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

Page 52: Formation gwt

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

Page 53: Formation gwt

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

Page 54: Formation gwt

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

Page 55: Formation gwt

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

Page 56: Formation gwt

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

Page 57: Formation gwt

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

Page 58: Formation gwt

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

Page 59: Formation gwt

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

Page 60: Formation gwt

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

Page 61: Formation gwt

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

Page 62: Formation gwt

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

Page 63: Formation gwt

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

Page 64: Formation gwt

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

Page 65: Formation gwt

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

Page 66: Formation gwt

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

Page 67: Formation gwt

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

Page 68: Formation gwt

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

Page 69: Formation gwt

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

Page 70: Formation gwt

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

Page 71: Formation gwt

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

Page 72: Formation gwt

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

Page 73: Formation gwt

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

Page 74: Formation gwt

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

Page 75: Formation gwt

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

Page 76: Formation gwt

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

Page 77: Formation gwt

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

Page 78: Formation gwt

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

Page 79: Formation gwt

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

Page 80: Formation gwt

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

Page 81: Formation gwt

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

Page 82: Formation gwt

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

Page 83: Formation gwt

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

Page 84: Formation gwt

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

Page 85: Formation gwt

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

Page 86: Formation gwt

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