1. GWT
Google Web Toolkit
Bouchon Julien
Faugere Matthieu

2. Plan
• Introduction
• Avantages et inconvénients
• Concurrents
• Structure d’un ‘Hello World’
• UI Binders
• Le design pattern MVP
• Conclusion

3. Historique
•
Création en 2006 par Bruce Johnson et Joel Webber
•
2006 : Rachat de la start-up par Google → Version 1.0
•
Aujourd’hui : Version 2.5
•
OpenSource depuis la version 1.0

4. Présentation
• Exemples : gmail, google app, google map
• Framework
–
–
Ecrit en Java
Compilé par GWT en Javascript
• Utilisation de widgets
–
i.e. composants graphiques
• Portabilité
–
Une application développée avec GWT est automatiquement supportées
par tous les navigateurs

5. Avantages
• Développement en Java
• Portabilité ‘automatique’
• Optimisation
–
–
Le Javascript produit est compacté au maximum
Seul la version du .js correspondant au navigateur du client est envoyé (pas de ‘if’
pour assurer la portabilité)
• Deux modes
–
–
Un mode développement , où l’application est exécuté en Java, ce qui permet
d’utiliser le débogage natif de java
Un mode déploiement, où le code est compilé en Javascript

6. Inconvénients
• Code Javascript généré illisible
• Phase de compilation lente dans les deux modes
• Prise en main difficile
• Lacunes des widgets de base
→ nécessité d’utiliser des bibliothèques extérieures

7. Technologies concurrentes FLEX
• Adobe
• Flash
• Avantage
•
•
Richesse des composants graphiques
Possibilité de faire du développement mobile
• Inconvénient
•
Nécessite de connaître Flash

8. Technologies concurrentes Silverlight
• Microsoft
• C#
• Avantages
•
•
bonne gestion du multimedia(photo, video)
prise en main facile si on connait le c#
• Inconvénients
•
obligation d'installer un plugin
•
n'est plus soutenu par microsoft

9. Installer GWT sous Eclipse
 Sous Eclipse
> Help
> Install new
software
 http://dl.google.com
/eclipse/plugin/3.7

10. Module GWT : Structure
•
Src:
–
–
–
•
Package contenant le xml de
configuration du module
Package contenant les fichiers
sources coté client
Package contenant les fichiers
sources coté serveur
War : C’est l’ ‘image’ du déploiement
de l’application. Respecte le standard
war et est compatible avec la plupart
des serveurs applicatifs (tomcat,
jetty…)
–
–
–
Le contenu statique : l’hôte html
Les .jar pour le code coté serveur
Un fichier web.xml pour
configurer d’éventuelles servlets

11. Descripteur du module

12. Point d’entrée

13. Html hôte

14. Css

15. Rendu

16. Rendu

17. UIBinder
Créer une interface en GWT
–
Une première méthode consiste à une implémentation similaire à la construction
d’un écran en SWING (comme dans l’exemple précédent)
–
Cette méthode présente des inconvénients:
•
•
–
Relecture et maintenance difficile à cause de la densité de code généré
Illisible pour un designer qui veut travailler sur du html ou du xml
L’alternative, plus évoluée, est UIBinder qui va séparer la partie statique de la
partie dynamique respectivement dans un fichier xml et un fichier java

18. Structure
• Un fichier xml pour la
partie statique
• Un fichier Java pour la
partie dynamique

19. Exemple 1

20. Exemple 2 - xml

21. Exemple 2 - java

22. Point d’entrée

23. Rendu des exemples 1 et 2

24. Design Pattern MVP
MVC
MVP

25. Design Pattern MVP
Le Model regroupe les données métier qui vont être
affichées et/ou gérées par l'écran. Il est identique au
Model du MVC.
La View est l'interface graphique de l'écran (cadres,
composants, style, etc...).
Le Presenter gère le comportement des
événements utilisateur (clics, sélections, saisies de
texte, ...) ou encore les liens avec les autres écrans

26. Exemple Gestion Contacts
Affichage de la liste
Affichage d’un contact

27. Architecture du code

28. Arborescence de fichiers

29. Client
•Création du service RPC
•Création du gestionnaire d’événements
•Création de l’AppController
•On passe le rootPanel à l’AppController

30. Model
Model Contact
Model ContactDetails

31. Presenter
On a 1 presenter pour 1 view
Le presenter doit gérer les événements liés aux
éléments de l’interface utilisateur de sa view.

32. Presenter Contact
Ce Presenter doit :
Répondre au clic boutton
Remplir la liste
Répondre au clic sur un
contact

33. Display
• Lien entre view et presenter
• Sera implémenter dans la view

34. Remplir la liste
Répondre au clic

35. View
La vue crée les
composants graphiques
Concrétise les fonctions
de l’interface display de
son présenter

36. Event
• 1 event et 1 eventHandler
par événement de notre
application
• Chaque event
implémente
getAssociatedType et
dispatch

37. AppControler
Gère l’affichage des pages
Gère l’historique et l’état du système
Se sert des événements pour définir l’état du système

38. Le Presenter crée
l’événement
L’AppControler le
récupère

39. Changement de status

40. Conclusion
• Outil permettant de développer de grosses
applications
• Projets structurés
• Mise en œuvre de MVP
• Permet également de développer des applications
avec mgwt

41. Sources
•
Documentation officielle de GWT
http://www.gwtproject.org/
•
Présentation de Celinio Fernandes sur GWT
http://fr.slideshare.net/longbeach757/presentation-of-gwt-24
•
Tutoriels de Lars Vogel (HelloWorld, UIBinders…)
http://www.vogella.com/articles/GWT/article.html
 Blog de Mikael krok
http://mikaelkrok.net/le-design-pattern-mvp-et-gwt-1-introduction/
 Tutoriel ui binder et mvp
https://code.google.com/p/niiuzu/wiki/TutoUiBinderMVP