GWT - Google Web Toolkit

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

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

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

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

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

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

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

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

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

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

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

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

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

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 )

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

Remote Procedure Call Fonctionnement Source : google

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

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

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

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

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

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

I18N Exemple d utilisation Fichier.java Fichier.properties

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

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

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

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

Debug Mode hosted

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

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

Compilation Deferred Binding Source : google

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

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>

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

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

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

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

Résumé

Résumé Source : objis

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

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 ://www.ongwt.com Showcase : http ://gwt.google.com/samples/showcase/showcase.html

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

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