GWT : Google Widget Toolkit

Transcription

Article : Méthodologie de développement
Xavier MEHAUT est un consultant senior
d'EDIS Consulting. Il assume aussi
depuis peu le leadership du Centre de
Compétences Interne en Génie Logiciel.
Méthodologie de développement
GWT : Google Widget Toolkit

Son expérience et sa curiosité l’amènent
régulièrement à identifier, très tôt, les
vrais sujets de demain. Il nous livre dans
cet article un très riche retour
d’expérience.
Introduction
Août est là ; il fait chaud dehors, les esprits fondent, les idées s’évaporent. Voici la douche fraîche tant
attendue : GWT. Kesako ? Google Widget Toolkit, le framework RIA open source de Google. RIA ? Encore un
gros mot pour Rich Internet Application, le pendant Web du RCP (Rich Client Platform) cher à l’écosystème
Eclipse.
En d’autres termes, GWT est un framework de développement dont le but est de permettre la création
d’applications Web dont la richesse fonctionnelle et graphique n'a rien à envier à celle des applications de type
« desktop » et que l’on nomme traditionnellement client lourd voire riche.
GWT existe depuis mai 2006 et a été développé par Google. Pour ma part, j’ai commencé à l’utiliser dès sa
sortie pour le maquettage d’une application chez mon client d’alors. J’avais pour contrainte de ne pas utiliser de
serveur, et je devais donc m’orienter vers une approche tout Visio / PowerPoint, ou tout JavaScript pour pouvoir
maquetter l’application.
Ces contraintes n’étaient pas compatibles avec le temps que j’avais pour formaliser les exigences de la maîtrise
d’ouvrage et réaliser cette maquette. Je m’apprêtais à utiliser Flash quand GWT est apparu ; c’était le genre de
paradigme de développement que je cherchais depuis longtemps. J’ai aussitôt téléchargé la première bêta pour
l’évaluer. Quelques pages de démos plus tard, je décidai de réaliser ma maquette avec GWT. Un an après, je
ne regrette rien ; la technologie, encore perfectible, est au rendez-vous des attentes que je mettais en elle.

La technologie
Au lieu de paraphraser, voici ce que Google dit de son poulain :
« Google Web Toolkit (GWT) is an open source Java software development
framework that makes writing AJAX applications like Google Maps and Gmail easy for
developers who don't speak browser quirks as a second language. Writing dynamic
web applications today is a tedious and error-prone process; you spend 90% of your
time working around subtle incompatibilities between web browsers and platforms, and
JavaScript's lack of modularity makes sharing, testing, and reusing AJAX components
difficult and fragile.
GWT lets you avoid many of these headaches while offering your users the same
dynamic, standards-compliant experience. You write your front end in the Java
programming language, and the GWT compiler converts your Java classes to
browser-compliant JavaScript and HTML »
Ce qui est à retenir, c’est qu’il n’est point besoin d’écrire ses pages Web en HTML et JavaScript pour obtenir un
comportement riche voire de l’AJAX (appel asynchrone à des services distants types webservices ou XMLRPC,
par exemple).
L’idée est de développer son IHM en Java sous Eclipse ou Netbeans comme on le ferait avec Swing ou SWT,
de tester l’application avec son debugger préféré et enfin de générer le code HTML / JavaScript pour mettre
celui-ci en production. Le schéma ci-dessous décrit les principales étapes de développement avec GWT :
© EDIS Consulting
www.edis-consulting.com
ISI - Article - Présentation GWT -gwt_1.6.doc
1/14
Figure 1 : Workflow d’un développement avec GWT.
Expliquons plus précisément ce schéma :

on écrit le code coté client en Java ; l’IHM est un assemblage de panels dans lesquels vont être placés
des widgets graphiques. Ces panels et widgets abstraient des composants HTML/DOM sont
manipulables comme des objets classiques auxquels on adjoint des listeners pour capturer et traiter les
évènements issus du navigateur.

si l’application a pour vocation de communiquer avec un serveur, on écrit dans un deuxième temps, en
Java, les GWT servlets qui seront appelés par l’application coté client.

une fois l’application testée en mode émulé, appelé « hosted », on peut générer le code HTML/
JavaScript final grâce au compilateur fourni par Google. On obtient alors un fichier .war qu’il est possible
de déployer dans son Tomcat ou Jetty ou JBoss preféré.

Avantages de la technologie
Comme je le disais en préambule, GWT inaugure un nouveau paradigme de développement d’applications
Web (si on excepte celui proposé par les applets Java, Flash et maintenant SilverLight) : désormais une
application Web n’a plus besoin d’appeler le serveur à chaque mise à jour d’un composant graphique.
L’idée est de ne faire appel au serveur que pour mettre à jour certaines données de l’application au moment où
l’on en a besoin. Le serveur ne s’occupe plus de construire un page Web qui est affichée dans le navigateur,
mais se focalise uniquement sur la partie métier et renvoie les informations nécessaires à l’application coté
client.
Je vous laisse le soin d’aller sur le site de Google (cf. sections Liens) pour découvrir en détail les
caractéristiques de GWT dont voici, en résumé, les principales :

tout est Java et css en mode développement ; les codes HTML et JavaScript sont obtenus une fois la
compilation réalisée

très efficace (il est couramment admis que développer avec GWT permet d’être 5 fois plus efficace),
optimisation du code JavaScript produit, portabilité du code sur tout type de navigateur (Cross-browsing)
© EDIS Consulting
2/14

communications avancées avec le serveur via XMLRPC voire JSON ; on peut par exemple transmettre
de vrais objets Java sérialisés entre le navigateur web et le serveur !

vrai debugging en mode émulé « Hosted »

développement plus simple, homogène (pas de mélange XML, HTML, JavaScript, taglibs, etc.)

permet le MDI (fenêtres imbriquées)

réduit les coûts de développement
fonctionne en mode déconnecté, d’autant plus si connecté avec Google gears


utilisation d’Ajax possible ; il n’est pas nécessaire de rafraîchir toute la page pour avoir des données
actualisées

suppression des fuites mémoire des librairies classiques JavaScript, ou de la lourdeur du chargement ;
le JavaScript est optimisé durant la compilation. Seuls le code et l’API nécessaire sont téléchargés par
le navigateur pour la plate forme cible.

meilleure sécurité

plus d'effet page blanche (transition entres pages chargées)

composants graphiques évolués

programmation modulaire

serveur sans état, états sur le client, meilleurs scalabilité

internationalisation, support de I18N/L10N

support d’IDE multiples : Eclipse, NetBeans, IntelliJ IDEA, Jdeveloper, etc. ; debugging, refactoring,
typage fort, etc.
the last but not the least : GWT est sous licence open source Apache depuis la version 1.3 (12/2006)


Inconvénients
Aucune technologie n'est parfaite, et le choix de telle ou telle technologie est la résultante d'une équation dont
les paramètres varient à l'envie.
Après quelques mois passés avec GWT, je n'ai personnellement pas rencontré de problèmes bloquants ou
rédhibitoires. GWT est très jeune, mais déjà très mature pour son âge : pas de gros bugs, des améliorations
régulières de l'outil, etc. Depuis la version 1.4RC, on peut considérer, je pense, que GWT est suffisamment
stable et abouti pour une exploitation industrielle.
Néanmoins les inconvénients de GWT sont les suivants (à pondérer selon l'équation initiale) :
 cela reste du JavaScript au final ; point positif pour certains, négatif pour d’autres…

du côté client le codage se fait en Java 1.4.2, et non 5 ou 6. Cela signifie qu’il n’y a pas d'annotations,
d'auto-boxing, de boucles de nouvelle génération... En pratique cela n'est pas vraiment gênant car il
faut répéter que le code côté client est un code de présentation et non métier et normalement
l'algorithmique associée n’est pas compliquée. De plus, il faut toujours avoir en tête que le code généré
est du JavaScript...langage non typé par excellence : à quoi peut servir une liste typée dans ce cas,
excepté pour des raisons de génie logiciel.

pour de grosses applications, le cycle émulation/compilation peut être pénible... Mais déjà Google a fait
de gros efforts d'optimisation de la compilation et les résultats sont probants.

il manque encore certains panels, ou certains widgets de base ... mais à n’en pas douter, cela va
venir :-)

quasiment tout panel est traduit en DIV une fois compilé...et on retrouve certains problèmes des DIV...
normal !
© EDIS Consulting
3/14

Exemple
Un petit exemple vaut bien des discours. Nous allons construire une petite application d’authentification qui ne
fait pas appel à un formulaire HTML, mais qui exécute un service distant pour la validation implémenté sous
forme de servlet.
Notre application va donc comporter deux parties, une côté client et une côté serveur. Nous utilisons Eclipse
(GWT peut générer un projet Eclipse) pour notre développement. GWT est livré avec un certain nombre de
commandes (sous forme de fichiers .bat) listées ci-dessous :
Ces commandes permettent par exemple de créer un canevas d’application entière.
Nous utilisons le script projectCreator pour créer le projet NewsletterExample ; ce dernier est ensuite chargé
sous Eclipse :

com.ubiside.newsletter.public
: répertoire où sont stockés le fichier HTML d’entrée
(Example.html dans notre exemple) ainsi que le .css et les images de l’application. Le fichier
Example.gwt.xml est le fichier de description XML de l’application utilisé par le compilateur GWT pour
générer le code final.

com.ubiside.newsletter.client
: par convention, le package se terminant par client
contient le code côté client

com.ubiside.newsletter.server
: le package se terminant par server contient le code
côté serveur.
© EDIS Consulting
4/14
Côté client
Commençons par la définition de la classe Example, point d’entrée de l’application.
public class Example implements EntryPoint {
// la méthode onModuleLoad est appelée au chargement de la page HTML
// Example.html
public void onModuleLoad() {
// On récupère le point d'entrée du DOM à partir duquel on va créer notre application
RootPanel rootPanel = RootPanel.get();
// Top panel
final VerticalPanel verticalPanel = new VerticalPanel();
rootPanel.add(verticalPanel);
verticalPanel.setSize("100%", "100%");
verticalPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
verticalPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
// Table dans laquelle on place les éléments
final FlexTable flexTable = new FlexTable();
verticalPanel.add(flexTable);
flexTable.setStyleName("example-verticalpanel");
// Bouton de validation
final Button validateButton = new Button();
flexTable.setWidget(2, 2, validateButton);
validateButton.setText("Validate");
// Login label + text box
final Label loginLabel = new Label("Login");
© EDIS Consulting
5/14
flexTable.setWidget(0, 0, loginLabel);
final TextBox login = new TextBox();
flexTable.setWidget(0, 1, login);
login.setWidth("200px");
// Password label + text box
final Label passwordLabel = new Label("Password");
flexTable.setWidget(1, 0, passwordLabel);
final TextBox password = new TextBox();
flexTable.setWidget(1, 1, password);
password.setWidth("200px");
// On intercepte les évènements sur le bouton afin de lancer la validation sur le serveur
validateButton.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
// on crée une instance de notre validateur de
// login/password
ValidatorAsync validator = Validator.Util.getInstance();
// on définit la callback utilisée pour récupérer de manière asynchrone
// les infos venant sur serveur
AsyncCallback callback = new AsyncCallback() {
public void onSuccess(Object result) {
// méthode exécutée en cas de succès
String str = (String) (result);
Window.alert(str);
}
public void onFailure(Throwable caught) {
// méthode exécutée en cas d'erreur
Window.alert("erreur de communication avec le serveur");
}
};
// On execute la commande de validation, ie on appelle le servlet
// correspondant sur le serveur.
// Ce dernier renvoie le résultat via le callback ci-dessus
validator.validate(login.getText(), password.getText(), callback);
}
});
}}
© EDIS Consulting
6/14
Définition de l’interface Java ValidatorAsync décrivant le service distant à appeler.
public interface ValidatorAsync {
public void validate(String login,String password,AsyncCallback callback);
}
Côté serveur
Du côté serveur, on définit la classe Servlet implémentant le service décrit ci-dessus :
public class ValidatorImpl extends RemoteServiceServlet implements Validator {
private static final long serialVersionUID = 1L;
public String validate(String login, String password) {
if(login.length()==0) return "NOK";
if(password.length()==0) return "NOK";
return "OK";
}
}
Fichier de configuration XML
La configuration de GWT s’effectue au moyen de fichiers XML simples appelés Modules. Une application GWT
est composée d’un ou plusieurs modules ; pour simplifier, on peut comparer un module à une librairie Java du
type .jar. Un Module regroupe tous les paramètres de configuration dont le projet GWT a besoin, c'est-à-dire :
 Les autres modules hérités

un nom de classe de point d’entrée

les différents chemins d’accès (public et source) dont ceux pour la localisation des Servlets côté serveur

les règles de liaisons différées, incluant les fournisseurs de propriétés et les générateurs de classes
Exemple :
<module>
<inherits name="com.google.gwt.user.User"/> // Module par défaut ; on peut en ajouter d’autres
<entry-point class="com.ubiside.newsletter.client.Example"/> // Classe point d’entrée de l’appli
<servlet
appelé
path="/Validator"
class="com.ubiside.newsletter.server.ValidatorImpl"/>
//servlet
</module>
Nous n’avons plus qu’à lancer le script GWT de compilation de l’application en JavaScript et nous obtenons un
fichier .war que l’on peut déployer, par exemple sous Tomcat.
© EDIS Consulting
7/14

La maquette / prototype
Contexte
Dans le cadre de la mission prise en charge chez mon client (une filiale de Natixis spécialisée dans l'information
d'entreprise), nous avons développé un prototype fonctionnel à partir du cahier d’exigences discuté avec la
maîtrise d’ouvrage. Le but de ce prototype était de valider, très en amont dans le cycle de vie du logiciel, les
fonctionnalités à implémenter d’une part, et les grands choix ergonomiques d’autre part. Le look & feel, quant à
lui, s’il respecte la charte graphique de l’entreprise, n’était pas prioritaire.
Le but du projet est une application d’information d’entreprises :

de l’identification d’entreprise, i.e. obtenir des informations de type bilan sur une entreprise déjà
identifiée

du ciblage d’entreprises, i.e. récupérer toutes les entreprises satisfaisant un certains nombres de
critères de type pays, nombre d’employés dans l’entreprise, liens financiers (actionnaires, filiales),
structurels (sièges sociaux, établissements secondaires), etc.
J’ai fait le choix d’utiliser GWT pour réaliser cette maquette devenue prototype pour les raisons suivantes :
 la nécessité d’avoir un comportement le plus réaliste possible, en l’absence d’un accès à un serveur
Tomcat ou équivalent ; la logique devait donc être totalement déportée sur le poste client

la réalisation du prototype ne devait pas se faire au détriment de la formalisation des exigences avec la
MOA ; GWT permet un gain de temps de développement suffisamment significatif pour que ce soit le
cas

faire une application de type Web 2.0
Ci-dessous une copie d’écran d’une partie de l’application dédiée à la construction d’une liste de critères de
sélection d’entreprises :
© EDIS Consulting
8/14
Figure 2 : Perspective construction d’une stratégie de recherche.
© EDIS Consulting
9/14
Architecture et composants développés
Dans le cadre de la réalisation de ce prototype, outre l’implémentation effective des exigences utilisateurs, le
travail s’est articulé autour de la réalisation :
 d’une architecture inspirée d’Eclipse pour faciliter et systématiser le développement ; implémentation de
notions de Thème, Perspective, View, Inversion de contrôle, etc. Cette implémentation premier niveau
aurait besoin maintenant d'être refactorée pour la rendre plus générique.

développement de composants génériques abondamment réutilisés au cours du développement
Je ne rentrerai pas dans tous les détails dans le cadre de cet article, mais vous trouverez ci-dessous des
exemples de composants développés pour les besoins de l’application.
TreeSelection Widget avec filtre ou non
Permet la sélection d’items dans un arbre, avec possibilité ou non de filtrer les contenu de l’arbre gauche à partir
d’une chaîne de caractère entrée dans le champ texte “Choices”.
Figure 3 : Treeselection et dérivés.
Ce composant a été ensuite sous-classé pour obtenir des sélections de type arbre vers liste, arbre vers champ
texte, arbre avec entrée pour chaque sélection de valeurs associées, etc.
StateDialog
Ce composant Boîte de dialogue à états permet de composer des wizards séquentiels similaires à ceux
d’Eclipse, implémenté sous forme de div déplaçable et non de popup window.
© EDIS Consulting
10/14
Figure 4 : State dialog.
GroupBox
Comme son nom l’indique, ce composant permet de grouper des widgets graphiques d’une part, mais aussi de
les occulter en une seule opération (voir ci-dessous) :
Figure 5 : Groupbox.
InfoComponent
Permet d’afficher un commentaire repliable avec une bulle d’info, ou un raccourci vers une page d’aide externe.
Figure 6 : Info component.
ValueChoosers
Il s’agit d’une hiérarchie de composants dont le but est l’entrée de valeurs discrètes de type entier, date,
sélection dans une combo-box, .etc.
Figure 7 : Date value chooser.
Figure 8 : Integer value chooser in two modes : single or range.
© EDIS Consulting
11/14
Cerfa sheet component
L’idée derrière ce composant est de reproduire une feuille Cerfa de bilan d’entreprise (actif, passif, grandes
masses, etc.). Ce composant affiche les données de manière complétement automatique.
Figure 9 : Cerfa component.
© EDIS Consulting
12/14

La concurrence
Avec GWT, nous sommes confrontés, comme indiqué précédemment, à un nouveau paradigme de
développement qui demande de repenser la façon dont on conçoit une application client léger. Jusqu’à présent,
le navigateur n’était qu’un vecteur d’affichage des informations compilées et présentées du côté serveur. Les
technologies utilisées vous les connaissez ; ce sont les JSP, ASPx, PHP, JSF, Struts, Wickets, OpenLaszlo, ...
Au fil des années, toutes ces technologies ont essayé de combler les lacunes de ce genre de développement,
mais sans changer la façon de voir les choses.
Aujourd’hui un nouveau paradigme est proposé aux concepteurs et développeurs d’applications Web : le client
devient partie intégrante de l’application et on y déporte une partie de l’intelligence de cette dernière. Le but n’est
évidemment pas d’y déporter la partie métier comme on pourrait être tenté de le faire, mais de laisser cette
tâche à la partie serveur. Le client léger devenu riche va s’appliquer à gérer les interactions de la manière la plus
souple possible avec l’utilisateur, voire à effectuer des contrôles de premier niveau, laissant le soin au serveur
de faire ceux de second degrés.
Les acteurs aujourd’hui de ce nouveau paradigme sont, en résumé, les suivants :
 Flash, Flex, Appollo (Adobe)


GWT (Google)

SilverLight (Microsoft), MoonLight (Mono)

JavaScript à la mimine ou à partir de libraries du type dojo, ui-ext, ...

XUL dans le monde Mozilla

...
Conclusions
GWT vient de fêter sa première année d’existence ; beaucoup ont eu des doutes sur cette nouvelle technologie,
mais il semble que désormais nombre de ceux-ci sont levés. Bien entendu, GWT n’est pas le Graal du
développement d’application riches pour navigateur Web. Il offre toutefois une nouvelle perspective, ce dont
nous avions besoin. Cette technologie ou celles qui lui succéderont ont pour but de réconcilier les applications
riches sur le desktop et celles sur navigateur.
Tout un spectre de possibilités s’ouvre désormais. Voici quelques pointeurs pour les mois et années à venir :
 Connexion GWT et Google Gear : persistance locale de informations

GWT+Spring, et/ou GWT/Struts2


GWT+Seam
GWT + Google Guice (http://glaforge.free.fr/weblog/index.php?itemid=208)

GWT sur Iphone (safari est le vecteur privilégier pour les applications sur l’Iphone)

GWT for Flash (prospectif, mais d’ores et déjà séduisant)
Le retour de X-Window dans un navigateur et du mainframe côté serveur ? (du poil à gratter en
perspective !)

Je ne jouerai pas les prosélytes de GWT ; les technologies viennent et partent. Les pythagoriciens l'avaient bien
compris, eux qui refusaient d'écrire leurs théories car fixer sur un support une connaissance la rendait déjà
obsolète. Ils préféraient la transmission orale à celle écrite. Je ne ferai donc que souffler à votre oreille qu'une
© EDIS Consulting
13/14
technologie pertinente, bien pensée et réalisée (allez voir le code source de GWT !) est désormais à votre
disposition à côté d'autres tout aussi intéressantes... Laissez-vous séduire !

Liens
Vous trouverez ci-dessous quelques liens parmi d’autres vous permettant d’aller plus loin dans la
compréhension du phénomène GWT :

Le site officiel GWT, assez aride mais suffisant :
http://code.google.com/webtoolkit/

Le blog de Didier Girard sur GWT :
http://www.ongwt.com/

Un outil payant (pas cher) pour développer sous eclipse avec GWT :
http://www.instantiations.com/windowbuilderpro/gwt/

Bouquin GWT in Action :
http://www.amazon.fr/Gwt-Action-Easy-Google-Toolkit/dp/1933988231

Petit tutorial :
http://engr.smu.edu/~dharmend/cse7392/GWT%20Project%20Setup.pdf

Le MDI sous GWT GWT Window Manager :
http://www.gwtwindowmanager.org/

Article Developing ajaxified Web Applications with Ease :
http://jax.prodyna.de/jaxdocs/jaxgwt.ppt

Un premier projet en GWT expliqué pas à pas :
http://moritan.developpez.com/tutoriels/Java/gwt/premier/projet/

Et comme la pertinence émerge de la confrontation des analyses, un article présentant un avis
divergent :
http://www.dotnetguru2.org/bmarchesson/index.php?title=les_limites_du_miracle_gwt
Xavier MEHAUT, EDIS Consulting
© EDIS Consulting
14/14

GWT : Google Widget Toolkit

Transcription

Documents pareils

Développer une application avec Google Web Toolkit Présentation

GOOGLE WEB TOOLKIT - développement

NIMBUS TRAINING - Développer avec Google Web Toolkit 3 jours

Ingénieur Informaticien - Alexandre Guiavarc`h

GWT Google Web Toolkit

Formation Google Web Toolkit (GWT)

Google Web Toolkit (GWT), Qu`est ce que c`est ? Réalisation Outils

Google Web Toolkit : Création d`applications riches

PRENOM NOM

développer une application web 2.0 /gwt