Gwt final
- 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
- 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
- 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
- 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
- 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
- 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