Gwt final

2 827 vues

Publié le

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

Aucune remarque pour cette diapositive

Gwt final

  1. 1. GWT Google Web Toolkit Bouchon Julien Faugere Matthieu
  2. 2. Plan • Introduction • Avantages et inconvénients • Concurrents • Structure d’un ‘Hello World’ • UI Binders • Le design pattern MVP • Conclusion
  3. 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. 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. 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. 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. 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. 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. 9. Installer GWT sous Eclipse  Sous Eclipse > Help > Install new software  http://dl.google.com /eclipse/plugin/3.7
  10. 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. 11. Descripteur du module
  12. 12. Point d’entrée
  13. 13. Html hôte
  14. 14. Css
  15. 15. Rendu
  16. 16. Rendu
  17. 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. 18. Structure • Un fichier xml pour la partie statique • Un fichier Java pour la partie dynamique
  19. 19. Exemple 1
  20. 20. Exemple 2 - xml
  21. 21. Exemple 2 - java
  22. 22. Point d’entrée
  23. 23. Rendu des exemples 1 et 2
  24. 24. Design Pattern MVP MVC MVP
  25. 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. 26. Exemple Gestion Contacts Affichage de la liste Affichage d’un contact
  27. 27. Architecture du code
  28. 28. Arborescence de fichiers
  29. 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. 30. Model Model Contact Model ContactDetails
  31. 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. 32. Presenter Contact Ce Presenter doit : Répondre au clic boutton Remplir la liste Répondre au clic sur un contact
  33. 33. Display • Lien entre view et presenter • Sera implémenter dans la view
  34. 34. Remplir la liste Répondre au clic
  35. 35. View La vue crée les composants graphiques Concrétise les fonctions de l’interface display de son présenter
  36. 36. Event • 1 event et 1 eventHandler par événement de notre application • Chaque event implémente getAssociatedType et dispatch
  37. 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. 38. Le Presenter crée l’événement L’AppControler le récupère
  39. 39. Changement de status
  40. 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. 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

×