After Work GWT Mercredi 17 Décembre 2008 Anthony Dahanne - Pascal Ognibene...

After Work GWTMercredi 17 Décembre 2008

Anthony Dahanne - Pascal Ognibene anthony.dahanne@valtech.fr, pascal.ognibene@valtech.fr

http://blog.valtech.fr

Sommaire du cours

Présentation de GWT(TP) Mise en place de l’environnement de dév,

écriture d'un premier module GWTPrésentation de widgets (avec démo)Création d’un Widget et gestion des évènements

(+TP)Les appels distants via RPC (+TP)Plus loin dans GWT : cycle de vie du compilateur,

tests unitaires, les librairies additionnelles, etc...

Présentation (1/5) : Pourquoi GWT ?

Il est difficile d’écriture du code JavaScriptOutillage (IDE) encore immature, debug compliqué (alert !)Interprétation différente selon le navigateurManque de compétence JavascriptLangage peu adapté à la réalisation de grosses applications

La solution : générer du code JavaScript à partir de code Java

IDE (comme Eclipse) nombreux et puissants, debug aisé

Un seul code source pour tous les navigateurs !

Optimisation (code JS “compacté”, génération de ce qui est utile uniquement)

Compétences faciles à trouver sur le marché

Projet racheté à une start up créée par Bruce Johnson,Proposé en Open source fin 2006,Dès le début, une forte communauté et de

nombreuses bibliothèques dont EXT GWTEgalement, intégration (wrappers) de librairies

javascript existantes (scriptaculous, DOJO)Aujourd'hui, un écosystème s'est cristallisé autour

du projet.

Présentation (2/5) : Historique

Optimisation (temps de chargement réduits) au coeur de GWT :Fichiers échangés compressés avec gzip (selon le serveur WEB)Allégement de la taille des fichiers grâce aux noms raccourcis de

variables et fonctions JavascriptChargement des scripts dans une iframe cachée en tâche de fondUtilisation de la mise en cache des navigateursLe navigateur ne charge que les fonctions dont il a besoinLors de la compilation, le code Javascript pour chacun des navigateurs

est généré : le navigateur gardera en cache le code appropriéProtocole spécifique pour communiquer avec le serveur, orienté

performanceDu code en général plus performant que s'il était écrit à la main

Présentation (3/5) : Performances

Microsoft Volta (C# , VB.NET) très en retard (moins performant)Morfik (http://www.morfik.com) approche orientée

BDD et XML (!)GWT est aujourd’hui le framework de génération

d’application web riches le plus avancé, ne nécessitant pas de plug-in additionnel (au contraire de Flash ou Silverlight).

Présentation (5/5) : Des concurrents…

Qu'est-ce que GWT ?

GWT est :Un ensemble de librairies JavaUn traducteur de code Java vers Javascript (avec optimisation du code généré)Un outil permettant de générer une application cliente riche (RIA)

GWT n'est pas :Une librairie Javascript (comme Scriptaculous ou YUI ou Jquery)Un framework de développement Web (comme Struts ou JSF ou Rails)Un outil pour générer un site web avec du contenu (wiki, blog, CMS, etc...)

Environnement de développement

Nous utiliserons :Eclipse 3.3 ou supérieurUne jdk Sun moderne (>=5.0)Windows ou Linux ou Mac OSGWT 1.5.3 (dernière version en date)Tomcat (embarqué dans le projet GWT)Navigateur Web (Firefox et ses plugins comme Firebug seront

bienvenue, mais aussi Internet Explorer > 6, Safari, Chrome, etc.)

Notre premier projet GWT : le Projet RH

Nous avons été sélectionné pour une refonte du module de recherche d'emploisLe client a entendu beaucoup de bien de GWT et a choisi cette technologie pour cette refonte Nous disposons de 3 itérations :Itération 0 : prise de connaissance avec l'outilItération 1 : création de la partie clienteItération 2 : lien avec la partie serveur

ProjetRh : Iteration0

ProjetRh : Une application permettant aux visiteurs de consulter les offres d'emploi selon des critères

Product Backlog de la première Itération :Création du projet avec les outils GWTIntégration du projet dans EclipseTour du propriétaire

Itération 0 : création du projet

Un projet GWT avec (ou sans) Eclipse en quelques commandes :Création d’un répertoire contenant le projet :>mkdir ProjetRh>cd ProjetRh

Création du projet Eclipse :>GWT_HOME\projectCreator.cmd -eclipse ApplicationRh(il faut positionner la variable GWT_HOME sur le répertoire d'installation de GWT. Pour

Linux/Mac, le script s'appelle simplement projectCreator)

Création de l’application :>GWT_HOME\applicationCreator.cmd -eclipse ApplicationRh fr.valtech.client.MonApp

Il n’y a plus qu’à lancer Eclipse et importer le projet créé !

Structure du projet : Pour lancer le projet, il suffit d’utiliser le

ProjetRh.launch et de le lancer en cliquant droit dessus “Run as Java Application”Il est aussi possible de le lancer en ligne

de commande avec ApplicationRh-shellLa console GWT ainsi que le navigateur

GWT se lancent !

Itération 0 : Tour du propriétaire

Itération 0 : tour du propriétaire

2 modes de lancement :Hosted (ou géré) : application exécutée en mode Java : permet de

faciliter le code-compile-test-debug (permet d’exploiter les points d’arrêt dans Eclipse par exemple)Web : Le navigateur lit simplement le code javascript généré par le

compilateur GWT et l’interprète. Dans ce mode, par contre, on est en dehors d'eclipse donc pour débugger il faut utiliser un débugger JavascriptOn essaiera donc au maximum de rester dans le monde Java et de ne

déployer qu'au dernier moment en javascript.

Itération 0 : tour du propriétaire

Le module principal est représenté par un fichier XML ApplicationRh.gwt.xml , il est composé de :Un ou plusieurs modules héritésUn point d’entrée (le “main”)Un chemin des sources, un autre des ressourcesScripts Javascript et CSSConfig vers les servlets RPCEtc…

Iteration 1 : Création du GUI

Dans cette itération, nous allons :Utiliser des widgets pour créer l'interface graphiqueUtiliser un ImageBundle pour rassembler les imagesCréer un tableau pour accueillir les résultatsDans un premier temps, remplir ce tableau dans le code « client » (c'est-à-dire sans faire appel au serveur)Dans l'itération suivante le code qui fournit les données sera déplacé côté serveur.

Iteration 1 : Présentation des Widgets

Pleins de Widget : boutons, labels, cases à cocher, listes, arbres, etc…UIObject est la super classe , qui gère coordonnées,

titre, visibilité et taille de tout objet graphiqueLes widgets héritent de la super classe Widget qui

proposent en plus des opérations hiérarchiques attachement au parent, etc…)Les widgets proposent des événements basés sur

des listeners Java, de manière similaire à AWT ou SWINGFocusListener, MouseListener, KeyBoardListener, etc…

Iteration 1 : Présentation des Widgets

TextBox : zone de saisieButton : bouton HTMLLabel : créer une zone de texteHyperlink :lien “interne”ListBox : liste de valeursHTMLTable, FlexTable, GridMenuBar : création de menu pop-upTree : décomposition d’une liste sous un arbreSuggestBox : interroge un oracle pour prédiction

HTML : permet de placer du code HTMLImage : insère une portion d’image ou une image

entièreImageBundle : Permet d’atténuer les latences réseau en évitant les aller et retourRegroupe plusieurs images en une : en JS + CSS, les images seront

chargées sous la forme de portion d’une unique grosse imagePermet d'éviter de surcharger le serveur avec des petites requêtes

multiples

Iteration 1 : Présentation des Widgets

Iteration 1 : Présentation des Widgets

A comparer à Swing ou Windows.formEn GWT, on a plutôt fusionné la notion de Layout et

de Panel4 types de Panel :SimpleComplexeTableSplit

FocusPanel : les éléments fils gèrent le focusFormPanel : simule soumission d’un form. HTML ?PopUpPanel et DialogBoxAbsolutePanelLes enfants de CellPanel : DockPanel,

HorizontalPanel, VerticalPanelFlowPanel, StackPanelHTMLPanel : intégration de GWT dans sites

existantsDisclosurePanel : une encoche démasque les fils

Iteration 1 : Présentation des Panels

Itération 1 : Création de Widgets

Dériver de la classe Widget ou d’une de ses sous classesBien observer la classe DOMBien réfléchir aux événements gérés, notamment en utilisant

sinkEvent, gestion unifiée des événements entre navigateursUIObject ferait l’affaire, mais ne gère pas les événements

Ou dériver de la classe Composite, pour contenir d’autres Widgets

Pour débuter, il vaut mieux utiliser la classe Composite!

Utilisation de librairies externes

GWT est plutôt sobre par rapport à Flex et SilverLightLes extensions rajoutent des effets graphiques

(DnD, transitions, etc…)2 familles d’extensions : Les wrapper, widgets qui encapsulent du code JavaScriptLes natives, directement écrites en GWT, n’importent pas de code

JavaScript supplémentaire (permettent l’optimisation du code, d’être paramétrées, etc…)

Des problèmes de licence apparaissent !GWT peut s'étendre avec GWT-WL, basé sur, entre

autres, Scriptaculous, ou GXT

GWT-DnD : le célèbre Glisser/DéplacerGWT-Ext, wrapper ExtJS GXT ou ExtGWT, librairie native GWT, en retard par

rapport à GWT-ExtGWT Window Manager

Présentation d’extension GWT

Itération 3 : appel de services distants

GWT apporte d'origine une fonctionnalité d'appels distants de méthode, RPC (Remote Procedure Call)Nous allons utiliser GWT RPC pour lancer nos recherches sur le serveur Tomcat embarqué dans la console GWT

Itération 3 : Appels distants via GWT RPC

Appels asynchrones uniquementAprès tout, GWT utilise le support Ajax du navigateur

Rappelle un peu Corba !Une interface de service (signature de méthodes distantes)Une interface similaire à l'interface de service, mais asynchrone : c'est elle qui sera utilisée dans le code du client GWTUne implémentation du service, située côté serveurPoint faible : couplage fort entre le code client et le code serveur car le contrat d'interface utilise une interface Java (et non un langage de type IDL).

Diagramme de classes GWT RPC

Appels distants

Attention aux types de retour des services ! Il doivent être sérialisables !JavaScript n’est pas aussi riche que Java !Ne pas oublier le fichier des module XML dans

lequel on explicite le service utilisée et son implémentation

Déroulement du TP:Examinez le code des interfaces de serviceImplémentez la logique du service

GWT ne supporte pas toute l'API JavaL’interpréteur JS est mono threadGWT ne supporte pas le chargement dynamique de

classesClass c = Class.forName(“”);Object o =c.getInstance();

Une application GWT (ou Ajax) n'est pas référencée par les moteurs de recherche (sauf si elle dispose d'une page d'accueil)

Conclusion : Des limitations…

Conclusion : Mais encore , GWT c’est …

I18N (internationalisation)Dynamic Binding : Chargement dynamique des classesRéflexion primitiveImpl I = Class.forName(ClassName).newInstance();

Deferred BindingAlimentation de variables à l’exécution (runtime)Imp I = GWT.create(ClassName);Le compilateur a la visibilité du code lors de la compilation, il peut

l’optimiserGWT génère le JS pour chaque navigateur, pour chaque

d’implémentation de DOM.java (principe de permutation)

Mais encore , GWT c’est …

Des tests unitaires, à travers GWTTestCase que l’on hériteOn implémente getModuleName() pour récupérer

son moduleOn le teste (assertions)

FIN

Mais peut être ne s’agit il que du début !

Références

Cours GWT par Sami Jaber (Valtech Training)http://www.dng-consulting.com

GWT DnD :http://code.google.com/p/gwt-dnd/wiki/GettingStartedWith2_x

GXT (ext GWT)http://extjs.com/products/gxt/

Who's using GWT ?http://code.google.com/intl/fr/webtoolkit/app_gallery.html

Une appli GWT richehttp://www.queweb.com

La démo de GWThttp://gwt.google.com/samples/KitchenSink/KitchenSink.html

Licence du document

Ce document est protégé par le contrat :Creative Commons Paternité-Pas d'Utilisation

Commerciale-Partage des Conditions Initiales à l'Identique 2.0 France License.