GWT - Google Web Toolkit

Transcription

1 GWT - Google Web Toolkit Sponsors : 9 Septembre 2009 Guillaume SOLDERA

2 Plan 1 Introduction 2 Construction d une application 3 Lancement de l application 4 Extensions 5 Conclusion

3 Plan 1 Introduction Présentation Mise en place de l environnement Structure d un projet GWT 2 Construction d une application 3 Lancement de l application 4 Extensions 5 Conclusion

4 Présentation Définition et historique Définition Google Web Toolkit (GWT) est un ensemble d outils open source qui permet de développer des applications web dynamiques à partir de code Java Créé par Bruce Johnson Utilisé pour les développements internes de Google Open source la version 1.2, fin 2006 (licence Apache 2.0) Version actuelle : 1.7

5 Présentation Pourquoi GWT? Problèmes liés aux développements AJAX Difficulté d écriture et du débogage JavaScript Gestion des appels asynchrones Compatibilité des différents navigateurs Compétences rares sur le marché Solution : générer du code JavaScript à partir de code Java Java très utilisé en entreprise Outils et IDE existants pour coder/débugger/tester en Java Fonctionnement Compilateur Java JavaScript Code généré et optimisé pour chaque navigateur HTML dynamique et manipulation du DOM pour les aspects dynamiques de l interface

6 Présentation Pourquoi GWT? Problèmes liés aux développements AJAX Difficulté d écriture et du débogage JavaScript Gestion des appels asynchrones Compatibilité des différents navigateurs Compétences rares sur le marché Solution : générer du code JavaScript à partir de code Java Java très utilisé en entreprise Outils et IDE existants pour coder/débugger/tester en Java Fonctionnement Compilateur Java JavaScript Code généré et optimisé pour chaque navigateur HTML dynamique et manipulation du DOM pour les aspects dynamiques de l interface

7 Présentation Pourquoi GWT? Problèmes liés aux développements AJAX Difficulté d écriture et du débogage JavaScript Gestion des appels asynchrones Compatibilité des différents navigateurs Compétences rares sur le marché Solution : générer du code JavaScript à partir de code Java Java très utilisé en entreprise Outils et IDE existants pour coder/débugger/tester en Java Fonctionnement Compilateur Java JavaScript Code généré et optimisé pour chaque navigateur HTML dynamique et manipulation du DOM pour les aspects dynamiques de l interface

8 Mise en place de l environnement Eléments requis Java SDK Windows, Linux ou Mac Télécharger GWT http ://code.google.com/intl/fr/webtoolkit/versions.html Obtention d un.zip,.tar.bz2 ou.tar.gz selon la plateforme à désarchiver Commandes disponibles Commandes disponibles webappcreator : création d un projet i18ncreator : aide pour l internationalisation junitcreator : aide pour la création de tests unitaires

9 Structure d un projet GWT Arborescence et fichiers créés

10 Structure d un projet GWT Répertoires créés Création des packages client et server client : contient les classes qui seront traduites en JavaScript lors de la compilation classes concernant l IHM server : contient les classes spécifiques au côté serveur. Pas de traduction JavaScript pour ces classes. Les classes côté client ne doivent pas référencer les classes côté serveur. Mais l inverse est possible. Création du répertoire war Contient les ressources statiques de l application : images, fichiers CSS, fichiers HTML Sous répertoire WEB-INF qui contient le web.xml et les bibliothèques nécessaires

11 Structure d un projet GWT Fichiers créés Fichier gwt.xml Fichier de description de notre module GWT Indique de quels modules notre application a besoin Indique le point d entrée de notre application

12 Structure d un projet GWT Fichiers créés La classe principale de l application Classe Java héritant de EntryPoint Doit implémenter la méthode onmoduleload() Méthode qui contient les instructions pour construire l IHM Ajout de l IHM construite au RootPanel Fichier CSS Décrit les différents styles définis pour l application Fichier HTML Page hôte de l application Référence le chemin du fichier JavaScript qui sera généré Référence le fichier CSS

13 Plan 1 Introduction 2 Construction d une application Construction de l interface Remote Procedure Call I18N 3 Lancement de l application 4 Extensions 5 Conclusion

14 Construction de l interface Les Widgets De nombreux widgets classiques disponibles Widgets classiques : Button, RadioButton, TextArea, TextBox, ListBox... Widgets plus complexes : Menu, Tree, SuggestBox, DatePicker, Table... http ://gwt.google.com/samples/showcase/showcase.html

15 Construction de l interface Les Panels - Les Listeners Agencement similaire à SWING, SWT... Différents panels : HorizontalPanel, VerticalPanel, DockPanel... Ecouteurs d évènements sur les widgets Possibilité de créer de nouveaux widgets : les Composite Ajout de l IHM construite au RootPanel

16 Construction de l interface Style de l application Utilisation de thèmes et de CSS Association des CSS et des thèmes par.gwt.xml ou.html Fichier.gwt.xml Fichier.html Appliquer un style Surcharger le thème par défaut de cet élément (exemple :.gwt-button) Définir un nouveau style Ajouter un style à un élément : addstylename( nomstyle ) Changer le style de l élément : setstylename( nomstyle )

17 Construction de l interface Style de l application Utilisation de thèmes et de CSS Association des CSS et des thèmes par.gwt.xml ou.html Fichier.gwt.xml Fichier.html Appliquer un style Surcharger le thème par défaut de cet élément (exemple :.gwt-button) Définir un nouveau style Ajouter un style à un élément : addstylename( nomstyle ) Changer le style de l élément : setstylename( nomstyle )

18 Construction de l interface Style de l application Utilisation de thèmes et de CSS Association des CSS et des thèmes par.gwt.xml ou.html Fichier.gwt.xml Fichier.html Appliquer un style Surcharger le thème par défaut de cet élément (exemple :.gwt-button) Définir un nouveau style Ajouter un style à un élément : addstylename( nomstyle ) Changer le style de l élément : setstylename( nomstyle )

19 Remote Procedure Call Fonctionnement Communication client-serveur par appels asynchrones Interface côté client StockPriceService : émission de requêtes Implémentation côté serveur StockPriceServiceImpl : servlet pour recevoir et répondre à la demande Autre interface côté client StockPriceServiceAsync : permet de recevoir la réponse du serveur

20 Remote Procedure Call Fonctionnement Source : google

21 Remote Procedure Call StockPriceService Etend l interface RemoteService Définition des méthodes à obtenir du serveur Présence d un serviceendpoint

22 Remote Procedure Call StockPriceServiceImpl Etend l interface RemoteServiceServlet Nom de la servlet = NomInterfaceImpl Implémentation des méthodes définies dans l interface de service

23 Remote Procedure Call StockPriceServiceAsync Nom de l interface = NomInterfaceAsync Doit être placée dans le même package que l interface de service Doit avoir les mêmes méthodes que l interface de service, MAIS Toutes les méthodes sont de types void Toutes les méthodes ont un paramètre supplémentaire : objet AsyncCallback

24 Remote Procedure Call Lien client-serveur Lien entre la servlet et le client fichier web.xml Mapping entre la classe de la servlet et une URL via un nom

25 Remote Procedure Call Appel du service Les appels sont asynchrones Les objets transférés doivent être sérialisables

26 I18N Internationalisation Constantes : interface ApplicationConstants héritant de Constants Messages paramétrés : interface ApplicationMessages héritant de Messages Traduction dans des fichiers.properties Doit être encodé en UTF-8 Doit se trouver au même endroit que l interface Un fichier.properties par langue Doit porter le même nom que l interface + suffixe représentant la langue ApplicationConstants_fr_FR.properties pour les constantes traduites en français ApplicationConstants.properties pour les constantes traduites dans la langue par défaut

27 I18N Exemple d utilisation Fichier.java Fichier.properties

28 I18N Internationalisation Déclaration du module I18N dans le.gwt.xml Déclarations des langues dans.gwt.xml et la langue par défaut dans le.html Utilisé aussi pour les formats de la date, de l heure, des nombres, des mesures... Changement de la langue grâce au paramètre locale passé dans l URL

29 I18N Exemple d utilisation Fichier.gwt.xml Fichier.html

30 Plan 1 Introduction 2 Construction d une application 3 Lancement de l application Debug Compilation 4 Extensions 5 Conclusion

31 Debug Debug - Mode hosted Mode hosted Intéraction avec l application GWT sans avoir à faire le transcodage en JavaScript L application tourne sur un serveur Jetty Lancement par le menu Run d Eclipse Lancement par Ant Lancement par la classe com.google.gwt.dev.hostedmode 2 fenêtres Un navigateur Une fenêtre de debug affichant les logs et les exceptions provenant du navigateur

32 Debug Mode hosted

33 Debug Debug - Mode hosted Refresh Rechargement du code côté client Restart server Rechargement du code côté serveur Debug du côté client possible si on utilise un IDE Pose d un point d arrêt Parcourt du code pas à pas Valeurs des variables disponibles Compile/Browse Compilation du code en JavaScript et lancement de l application dans un navigateur (mode WEB) Permet de voir le comportement de l application sur différents navigateurs

34 Compilation Compilation Lancement Compile/Browse Ant Classe com.google.gwt.dev.compiler Traduit le code Java présent côté client en JavaScript Parse le code Java Crée un Abstract Syntax Tree et optimise le code Transformation en JavaScript et optimise le JavaScript Pour tous les navigateurs, dans toutes les langues déclarées Effectue toutes les combinaisons possibles 4 navigateurs + 3 langues 12 permutations Le bon choix sera fait au chargement de l application (DefferedBinding) Possibilité de réduire le temps de compilation en choisissant le navigateur cible dans le.gwt.xml

35 Compilation Deferred Binding Source : google

36 Compilation Fichiers générés par la compilation Création dans le dossier WAR d un répertoire par module.nocache.js Fichier JavaScript chargé dans la page HTML de l application et dans lequel le Deffered Binding opère.cache.html Fichiers HTML contenant la logique de l application.gwt.rpc Indique quels types sont sérialisables et peuvent être transférés entre le client et le serveur

37 Compilation Démarrage de l application en mode WEB 1 Le navigateur charge la page HTML de l application 2 Le navigateur charge le fichier.nocache.js 3 Le fichier.nocache.js effectue le Deferred Binding Résoud les différentes liaisons (navigateur, langue...) Récupère le bon fichier.cache.html correspondant à la bonne configuration 4 Le fichier.cache.html est chargé au sein d une <iframe>

38 Plan 1 Introduction 2 Construction d une application 3 Lancement de l application 4 Extensions Autres fonctionnalités Intégration de GWT 5 Conclusion

39 Autres fonctionnalités Autres Utilisation de JavaScriptNativeInterface : définition de méthode en JavaScript Deffered Binding Production des différentes cibles possibles à la compilation Choix de la bonne cible au chargement de l application Emulation d une partie de la JRE (java.lang, java.util...) Accessibilité Support de l historique, du glisser/déposer Authentification par formulaire Système de logs Test JUnit

40 Intégration de GWT Intégration de composants Google GoogleMaps GoogleGears GoogleVisualization Autres librairies GWT-SL : intégration de GWT avec Spring côté serveur Gwittir : dualité champs formulaires / propriétés d un POJO GWT-EXT et EXT-GWT : autres composants graphiques Intégration avec les outils du développeur IDE : Eclipse, NetBeans, IntelliJ IDEA Outils de build : Ant, plugins Maven Tests avec Selenium Framework MVC existant (PureMVC) GWT Designer : outil WYSIWYG

41 Plan 1 Introduction 2 Construction d une application 3 Lancement de l application 4 Extensions 5 Conclusion Résumé Avantages - Inconvénients Adresses utiles

42 Résumé

43 Résumé Source : objis

44 Avantages - Inconvénients Avantages - Inconvénients Avantages Forte communauté, documentation Gratuité Bonne intégration avec les outils existants Richesse des composants Mode hosted Développement homogène et uniquement en Java Développement rapide d interfaces riches Programmation modulaire Inconvénients Temps de compilation relativement long JavaScript généré difficilement lisible

45 Adresses utiles Liens Site de GWT : http ://code.google.com/intl/fr/webtoolkit/ Forum GWT : http ://groups.google.com/group/google-web-toolkit OnGWT : http :// Showcase : http ://gwt.google.com/samples/showcase/showcase.html

46 Démo - Questions Démonstration - Questions Guillaume SOLDERA

47 Et maintenant... buffet!! Merci au Tours JUG et à ses sponsors