Tutoriel GWT N°1 : Installation & Analyse
Maîtrisez l’installation de GWT. Déployez et analysez l’application Hello livrée avec GWT. Découvrez l’architecture et les points clés de ce framework
Ce tutoriel est un extrait de séances pratiques de la formation GWT dispensée par Objis.
Les + objis
70% de travaux pratiques
Clé USB avec tous les outils utilisés + Corrigés TPs
Bilan pédagogique individuel + conseils
Liens utiles
Tutoriel et formation GWT Objis
Site de GWT
Javadoc GWT 1.6 et Javadoc GWT 2
Téléchargement : GWT 1.5.3, GWT 1.6.4, GWT 1.7.0, GWT 2.0.4
Options de la commande webAppCreator
Prérequis, outils et versions
JDK 5+ (http://java.sun.com )
Objectifs
Maîtriser l’installation de GWT
Identifier les éléments et modules clés du framework
Comprendre l’exemple Hello livrée par GWT
Partie 1 : Rappels, questions
Présentation de GWT
Lancé en 2006 lors de la conférence annuelle JavaOne, GWT propose une approche innovante de la création d’applications Riches. Avec GWT vous développez en Java et laissez au compilateur Java->Javascript de GWT le soin de générer du Javascript optimisé multi-navigateurs.
INFO : La version 1.6 modifie de façon significative la structure d’un projet GWT avec l’intagration de l’arborescence d’un WAR jee.
développement GWT
Développer en GWT = créer un ou plusieurs modules GWT
1 module GWT = code java GWT + 1 fichier XML
code java GWT = 1 classe d’entrée (Entrypoint) obligatoire+ autres classes (Listeners, métier,...)
Architecture GWT
Rappels Composantes clés
Le compilateur Java vers Javascript est l’atout clé de GWT. Il permet de générer du code Javascript sophistiqué, optimisé pour des paramêtres comme le navigateur (ie, firefox, opera, safari) ou la langue de l’utilisateur (fr, en...). Le client ne charge que ce qui lui concerne. Donc application plus rapide.
JavaScript Native Interface (JSNI) est une interface permettant d’écrire un programme mélant Java et javascript (mot clé native).
L’émulation JRE permet de simuler dans Javascript des objets des packages java.lang et java.util
API GWT
Une interface utilisateur GWT = Widget(s) + Panel(s) + Evènement(s) ...comme dans SWING
GWT gère l’internationalisation à travers des interfaces à créer.
GWT permet des communications avec le serveur via RPC (Module GWT-RPC) ?
GWT peut utiliser JSON pour données client/serveur.
GWT fournit l’API pour manipuler du XML
GWT gère le problème de l’historique navigateur d’applications Ajax.
GWT permet d’automatiser le création de tests unitaires.
Echo Système GWT
GWT possède un compilateur puissant mais souffre de quelques lacunes que comblent des projets et librairie périphériques
GWT-EXT et EXT-GWT fournissent des composants graphiques (Widgets). Voir démo de Ext GWT (dit GXT) et voir démo GWT Ext
GWT-SL (GWT Server Librairie) répond à l’intégration de GWT avec Spring coté serveur. Vous transformez vos beans Spring en services RPC
Gwittir répond à la problématique de binding (dualité champs formulaire / propriétés d’un POJO).
GWT Designer pour la création WISIWIG d’écrans GWT]
Selenium pour tests interfaces utilisateurs GWT (compatibilité navigateurs , tests fonctionnels), le JUnitTest de GWT étant + pour tests unitaires non-visuels.
Partie 2 : Installation du Toolkit
2 façons d’installer le kit : via zip ou via plugin eclipse
Installation via Zip
Téléchargez la version de GWT qui vous interesse (ici GWT 1.6.4 et GWT 2.0.4)
Dézippez la version de GWT que vous avez (par exemple gwt-windows-1.6.4.zip ) dans le répertoire c :\formationgwt .
Vous obtenez un répertoire avec le contenu similaire au suivant pour la version 1.6.4
Et ceci pour GWT 2.0.4 :
Le kit GWT est installé.
Installation via plugin eclipse
Le plugin eclipse google permet d’installer le SDK GWT. Voir notre tutoriel dédié.
La partie suivante contribue à une comprehension des éléments du kit
Partie 3 : analyse du kit
Dans cette partie, vous analysez les éléments suivants :
La documentation
Les outils
Les exemples
La documentation
Ouvrez le fichier index.html du répertoire doc\javadoc
Questions :
A partir de la documentation Java du kit GWT 1.6.4
Expliquer le rôle de l’interface com.google.gwt.core.client.EntryPoint
Expliquerle contenu du package com.google.gwt.user.client.ui
Expliquer le rôle de l’interface com.google.gwt.i18n.client.Constants
Expliquer le rôle de la classe com.google.gwt.junit.client.GWTTestCase
Expliquer le rôle de la classe com.google.gwt.http.client.RequestBuilder
Expliquer le rôle de la classe com.google.gwt.json.client.JSonArray
Expliquer le rôle de l’interface com.google.gwt.user.client.Command
Expliquer le rôle de l’interface com.google.gwt.user.client.rpc.AsyncCallBack
Expliquer le rôle de la classe com.google.gwt.client.GWT
Expliquez le fonctionnement de la classe com.google.gwt.user.client.ui.Button
Les exemples d’applications
Ouvrez le répertoire samples
L’exemple ’Hello’
Analysez le contenu des répertoires src , war .
Dans le répertoire ’Hello’, lancez en ligne de commande : ant
Que s’est t’il passé ?
Explication
En regardant le fichier build.xml de ANT (cible gwtc), voici ce que GWT lance :
javac com.google.gwt.dev.Compiler -Xmx256M com.google.gwt.sample.hello.Hello
avec comme CLASSPATH :
— les classes de /WEB-INF/classes/ ,
— les jar de /WEB-INF/lib/
— les jars gwt-servlet.jar et gwt-user.jar du sdk gwt
le fichier XML du module Hello.gwt.xml est ainsi passé en paramètre au compilateur GWT (com.google.gwt.dev.Compiler)
Remarquez que le fichier xml indique la classe point d’entrée.
Dans le répertoire ’Hello’, lancez en ligne de commande : ant hosted
Que s’est t’il passé ? Eh bien , cette commande lance le ’mode hébergé’ de GWT.
Explication
GWT vous permet de créer rapidement votre interface en évitant la phase de compilation du programme. Vous éditez simplement votre code Java, vous sauvez votre fichier.
Un rechargement dans l’outil GWT (Bouton Refresh) et votre modification apparaît à l’écran.
Dans le répertoire ’Hello’, lancez en ligne de commande : ant war
— Qu’est t’il passé ? Eh bien , cette commande compile et package l’application sous forme de war.
Ou a été déposé le war généré ?
Déployez ce war dans Tomcat.
Le répertoire ’client’
Analysez le code du fichier Hello.java .
La classe ’cliente’ Hello va être traitée par le compilateur Java->Javascript pour produire du code source javascript optimisé.
Exemple de point d’entrée d’une application GWT
Analysez le code suivant, correspondant à un classe java qui sera le point d’entrée d’une application GWT 1.6 . Cette classe sera compilée par le compilateur GWT qui va produire à partir de cette classe du code source javascript optimisé. :
Expliquez l’interface EntryPoint (1)
Expliquez la méthode onModuleLoad() (2)
Expliquez la création de Widgets (3)
Expliquez la gestion d’évènement (ici appui sur le bouton) des widgets (4)
Expliquez l’ajout de widgets dans la page (5)
Le répertoire ’war’
Analysez le code du fichier Hello.html
Expliquez le rôle du fichier hello/hello.nocache.js
Expliquez le rôle des autres fichiers :
En particulier, quel fichier sera chargé par IE, Firefox ? pourquoi ?
Les outils
Remarquez à la racine du répertoire d’installation la présence des éléments suivants :
Outil de création d’applications GWT : WebappCreator
— crée squelette application web GWT
Outil de création de tests unitaire Junit : juitCreator
Outil pour création fichiers de propriétés : I18nCreator
Visualisateur de benchmark : benchmarkViewer
Création d’une application
Ici nous créons une application HelloObjis à partir de l’outil webAppCreator
A partir du répertoire d’installation de GWT, lancez via Invide de commande :
webAppCreator -out HelloObjis com.objis.demogwt
voici ce que vous obtenez :
Voici l’arborescence que GWT créé :
Vous avez créé votre squelette de projet GWT.
Chargement du projet dans Eclipse
remarquez la création de fichiers projet eclipse.Afin d’augmenter votre productivité, importez votre projet dans Eclipse.
Permutations GWT
QUESTION : Expliquez ce que sont les ’5 permutations’ que le compilateur a géré (voir dans messages MS DOS).
ÉLÉMENTS de réponses : Etant donné qu’il n’y a qu’un ’locale’ (fr) et 5 navigateurs pris en compte par défaut (ie6,gecko,gecko1_8,safari,opera), GWT génère 5*1 = 5 permutations.
INFO : pour limiter le nombre de permutations (ex : en phase de développement afin de limiter le temps de compilation) il est possible créer votre version ’plus rapide’ de GWT
Limiter les permutations
Récupérér les sources de GWT
Modifiez les fichiers suivants :
— UserAgent.gwt.xml (user/src/com/google/gwt/user/UserAgent.gwt.xml) .Limitez juste à votre ’locale’ . Ex : ’fr_FR’ au lieu de ’default’
— I18N.gwt.xml (user/src/com/google/gwt/i18n/I18N.gwt.xml) en imposant 1 User-Agent (Ex : gecko pour firefox) si votre navigateur est firefox en phase de dév.
La durée de compilation pourra être divisée par 10 !
Pour aller plus loin
Si vous appréciez notre sens du partage, devenez membre ’classic’ du Club Objis.
Accélérez significativement votre maîtrise d’AJAX avec un coach Objis : devenez membre Silver / Gold du Club Objis.
