Gwt oxiane-novae-lr

Page 1©Copyright OXIANE

GWTGoogle Web Toolkit

OXIANE – NOVAE LR


Speaker

• Emmanuel PAVAUX

� Architecte / Consultant / Formateur

� Ancien consultant chez BEA / Oracle

• Oxiane Méditerranée

• Les solutions Google : GWT et Android

• Les portails : Liferay, WebLogic Portail, …

• Les serveurs d’applications : WebLogic, …

• Les applications Java / Java EE

• SOA et Web Services

• UML et Design Patterns

• Usine logicielle


Plan de la présentation

• Introduction

� RIA, Ajax et l’approche de GWT

• Développer une application GWT

� Création / Test / Déploiement, Composants graphiques

• Outils

� UIBinder, GWT Designer, Speed Tracer, Bibliothèques

• Notions complémentaires

� Code Splitting, Échange de données, Gestion de l'historique, JSNI, Gestion des évènements, Log, ….


Naissance des RIA (1)

• L'histoire du développement d'applications a connu plusieurs grandes phases

� Les terminaux passifs (années 70)

� La révolution du client-serveur (années 80)

� La révolution internet et intranet (années 90)� Clients légers� Limites graphiques du HTML (composants graphiques b asiques)� Manque d'interactivité� Nécessité de faire des allers-retours pour une simp le information à

rafraîchir…

� L'évolution vers les 'clients riches' (années 2000)


Naissance des RIA (2)

• Plusieurs solutions de 'clients riches' ont émergés

� RIA (Rich Internet Application) : le navigateur web reste le socle côté client. Les possibilités du navigateur sont soit exploitées au maximum (JavaScript et CSS) soit enrichies par l'ajout de plugins (Flash, Silverlight, JavaFX, …)

� RDA (Rich Desktop Application) : renaissance du client-serveur 2ème génération, prévoit des solutions pour le problème d'installation et de mise à jour (ex: Eclipse RCP)

GWT


Ajax

• Ajax = Asynchronous JavaScript and XML

• AJAX n’est pas une technologie en elle-même, mais u n terme regroupant l’utilisation de :

� HTML ou XHTML pour la construction de la page

� CSS pour la présentation de la page

� DOM et JavaScript pour manipuler les éléments de la page

� L’objet XMLHttpRequest pour lire les données sur le serveur de manière asynchrone

• La mise au point du JavaScript est délicate

� Différences de fonctionnement entre les navigateurs . Environnements de développement sommaires

� Des frameworks JavaScript ont émergés : ext-JS, jQu ery, prototypeJS, Scriptaculous…


L’approche de GWT

• Mai 2006 - JavaOne : annonce de GWT

� Google Web Toolkit

� Écrire ses applications clientes riches en Java

� Les compiler en JavaScript

• JavaScript = le bytecode du web

� Compris par tous les navigateurs

� Utilisé comme un langage bas niveau


Avantages de l'approche GWT

• Développer et maintenir des applications JavaScript

� Supportant les spécificités et les versions des navigateurs : IE, Firefox, Safari, Opéra, Chrome

� Supportant l'internationalisation

� Optimales : versions spécifiques des fichiers javacript produits plutôt que génériques

• Utiliser la myriade d'outils du monde Java

� IDE, conception, analyse de code, test, intégration continue, …

� Permet de gérer des développements complexes

� Ne pas re-développer tout ça une nouvelle fois


Principes généraux (1)

• Compilateur de Java vers JavaScript

� Supporte une version volontairement simplifiée du JRE

� Fournit un équivalent JavaScript de ces classes

� Certaines subtilités� String.replaceAll, replaceFirst, split : regexp de JavaScript� System.out et err existent mais ne servent pas en mode production� …

• GWT met à disposition des librairies de classe Java

� Classes graphiques (widgets, panels) comme du Swing

� Classes de communication avec le serveur pour échanger des informations structurées (XML, JSON, …) ou des objets Java

• Possibilité d'intégrer des frameworks JavaScript

� Ext-JS, Scriptaculous, JSCalendar, …


Principes généraux (2)

• Intégration possible avec les frameworks j2ee

� JSF, Spring, Struts, EJB, … : côté serveur

• Développement des applications

� Navigateur avec plug-in� Pas de déploiement préalable� Le code qui s'exécute est du code Java� Communication par socket avec le plug-in qui pilote le

navigateur et court-circuite tous les événements� Debug en Java, points d'arrêt, …

� Tests unitaires avec Junit et GWTTestCase

• Compiler en JavaScript ensuite

� Déployer et tester (mode "production", ex mode "web")


Compilation GWT Java vers JavaScript

• Exécuter la classe com.google.gwt.dev.GWTCompiler

� Avec une définition de "module" et un fichier de configuration (modules hérités, point d’entrée)

• Le compilateur part de ce point d'entrée

� Et suit les dépendances pour ne compiler que ce qui est utilisé et minimiser la taille des fichiers générés

� Produit des fichiers JavaScript spécifiques pour chaque navigateur et pour chaque locale

• Attention : n'utilise que les fichiers Java (pas le s .class)

� Nécessité de disposer des sources de toutes ses librairies utilisées


Fichiers générés ("permutation")

• Autant de fichiers que de combinaisons (type de navigateur, locale, …)

• Les fichiers ne sont pas génériques

� Ne contiennent pas des "if" pour gérer les spécificités

• Le navigateur ne reçoit pas de code inutile

� Diminue l'utilisation de la bande passante

� Diminue l'empreinte mémoire dans le navigateur

• Modes de compilation

� OBFUSCATE, PRETTY, DETAILED


DeferredBinding

• Technique pour pallier l'absence de "dynamic bindin g"

� En clair : pas de ClassLoader en JavaScript

� Impliquerai de tout charger et utiliser ce qui convient� Typiquement gestion des spécificités des navigateurs, des locales, …

• GWT gère cela à la compilation

� GWT gère automatiquement les permutations par le DeferredBinding

� GWT.create(Interface) : obtenir une implémentation d'une interface

• Utiliser par exemple pour gérer l’internationalisat ion

� Formatage des nombres et monnaies, traduction des messages et libellés, sens de lecture

� Génère un fichier JavaScript pour chaque locale


Développer une application GWT


Créer une application

• Installer GWT

� Avoir un JRE + un fichier à décompresser : gwt-2.4.0.zip

• Création d'une application par "webAppCreator"

� Permet de créer l'arborescence et les fichiers de base� App.gwt.xml : configuration du module� Sous package client : code client comprenant App.java : classe "point d'entrée"

de l’applcation � Sous package server : code serveur, java classique sans limitation� Sous package shared : code partagé entre le client et le serveur� Répertoire war : contient la structure de déploiement web

� Génère les fichiers Eclipse (".project", ".classpath", …) importable dans les IDE

• IDE : Plugin Eclipse, support natif dans IntelliJ, …

webAppCreator -out c:/Hello com.oxiane.App


Tester l'application : Mode Développement

• Development Mode

� Exécution en Java,

� Exceptions capturées

� Debug Java possible

• Moteur jetty embarqué

� Moteur de servlet

� Déploiement automatique du code serveur

� Bouton "Launch Default Browser" ou copie de l'url


Déployer l'application : Mode Production

• Compilation de l'application en JavaScript

� Prend beaucoup de temps

• Utiliser la target "war" du script Ant

� Génère un war de l'application, prêt à déployer

� Déposer le war dans un server web type Tomcat

� Tester avec l'url http://localhost:8080/<NomApplication>


Interface EntryPoint

• L'interface désignant un point d'entrée d'applicati on

• Méthode onModuleLoad()

� Equivalent au main() de l'application ou au service() des Servlets

• Coder une classe implémentant cette interface

• La désigner dans le fichier de description de modul e

� <entry-point class='com.oxiane.client.App'/>

• Le compilateur part de cette classe

� Et suit les dépendancespublic class App implements EntryPoint {

public void onModuleLoad() {Label label = new Label("Hello world !");RootPanel.get().add(label);

}}


Les fenêtres et les panels

• Notions classiques des interfaces graphiques

� Widget = contrôle utilisé par l'utilisateur� En général en correspondance avec un équivalent HTML� Button, TextBox, TextArea, CheckBox, RadioButton, …

� Panel = conteneur de widgets (ou d'autres panels)� Exemple : table disposant un bouton et un champ en ligne� Panel pour disposer (layout) mais peut aussi offrir de l'interactivité (TabPanel)

� Window = la fenêtre du navigateur� Accès aux méthodes, propriétés et événements du navigateur

• Plus de 30 widgets et panels en tout

� Présentés dans le Showcase

Panel

Widget

Widget

Panel

Widget


Style et placement des widgets

• Méthode setStyleName() pour affecter un style

• Placement par Layout Manager (GWT 2.0)

� Pour gérer au mieux le placement des composants fils dans un conteneur de type xxxLayoutPanel

� En fonction de la taille de l'écran, re-dimensionnement, ...

� Solutions basées sur les standards CSS : top, left, bottom, right, width, height

Dans le code : Dans le fichi er de styles :widget.setStyleName("special"); .special {

float: right;margin: 5px;

}


Autres composants

• La bibliothèque s'étoffe à chaque version

� DatePicker, DockLayouttPanel, …

• Projets open sources proposent d'autres widgets

� Table triée, calculatrice, panel de dessin, bulle d'aide,…

� Widgets wrappant des librairies JavaScript existantes

� Google Map API, Search API, …� GXT (= Ext-GWT) : ré-écriture de ext-JS en GWT, bon design, …� GWT-Ext : wrapper de la librairie Ext-JS (avant changement de licence)� SmartGWT : wrapper de la librairie Javascript SmartClient

• Privilégier les librairies "pures GWT"

� Plutôt que les encapsulations de librairies JavaScript

� Debug, compréhension du code, …


Outils


Création graphique simplifiée : UiBinder (1)

• Depuis GWT 2.0, UiBinder permet la définition de widget au format XML

• Un composent graphique est caractérisé par Mécanisme de contrôle des actions

� une classe Java « NomClasse.java » qui hérite de la classe Composite

� un fichier XML « NomClasse.ui.xml »

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style>

/* Ajouter le CSS */

</ui:style>

<g:HTMLPanel>

/* Ajouter le Code format XML */

</g:HTMLPanel>

</ui:UiBinder>


Création graphique simplifiée : UiBinder (2)

• 3 règles pour lier un objet graphique à un attribut du contrôleur Java

� Utiliser le même nom

� Utiliser l’attribut ui:field

� Utiliser l’annotation @UiField dans la classe

<g:HTMLPanel>

<g:TextBox ui:field="quantite "> </g:TextBox>

</g:HTMLPanel>

public class QuantiteWidget extends Composite {

private static QuantiteWidgetUiBinder uiBinder = GWT.create(QuantiteWidgetUiBinder.class);

interface QuantiteWidgetUiBinder extends UiBinder<Widget,QuantiteWidget> {}

//attribut lié à l’object « quantite » dans

//QuantiteWidget.ui.xml

@UiField TextBox quantite ;

public QuatiteWidget() {initWidget(uiBinder.createAndBindUi(this));}

}

QuantiteWidget.ui.xml

QuantiteWidget.java


Création graphique : GWT Designer (3)

• Outil de création d’interfaces graphiques

� drag and drop des composants, ajouter des event handlers, éditer les propriétés, internationalisation, …


Création graphique : GWT Designer (4)

• Génère le code XML UIBinder


Speed Tracer

• Outil de profiling sous forme de plug-in Google Chr ome

� Profile les requêtes, les temps de parsing et les temps de rendus du navigateur

� Identifie et fournit des conseils sur les problèmes de performance


Bibliothèques

• Composants : GXT (=ext-gwt), GWT-Ext, SmartGWT, ...

• Courbes et graphiques

� GChart : implementation pure GWT open source

� Open Flash Chart

• Data binding :

� Gilead (ex Hibernate4gwt) : permet d’utiliser les objets du Domaine directement sans passer par une couche DTO

� GWT-Beans

• Intégration avec d’autres frameworks :

� G4JSF : JSF dans le monde GWT

� GWT-SL et GWT-WL : Spring

• GWT-Maven

� commandes maven GWT (compilation, tests unitaires, interfaces i18n, ...)

• Google API

� Gadgets, AJAX search, Maps, Visualization, Language, ...

� Encapsulation pour la plupart sauf Gwt-google-apis, GWT-GData (services Google)


Notionscomplémentaires


Code Splitting

• Fragmentation de code pour générer plusieurs fichie rs de code Javascript

� Chargement au besoin des différents fichiers javascripts� Évite ainsi d'avoir qu'un seul gros fichier

� En plaçant des points de rupture dans le code java client

public void onClick(ClickEvent

public void onModuleLoad() {Button b = new Button("Click me",

new ClickHandler() {public void onClick(ClickEvent

event) {

Window.alert("Hello, AJAX");

}});

RootPanel.get().add(b);}

public void onModuleLoad() {Button b = new Button("Click me",

new ClickHandler() {public void onClick(ClickEvent event) {

GWT.runAsync(new RunAsyncCallback() {public void onFailure(Throwable c)

{Window.alert("Fail download code");}public void onSuccess()

{Window.alert("Hello, AJAX");}});

}});

RootPanel.get().add(b);}


Echange de données

• Nécessité d'échanger des données avec le serveur

� Chercher des données à afficher, transmettre des informations, …

• Plusieurs technologies possibles avec GWT

� RequestBuilder : une classe qui encapsule XMLHttpRequest

� Approche bas niveau donnant accès aux requêtes et réponses http� Multiples formats de réponse possibles : XML, HTML, texte brute,

JSON, …

� GWT-RPC : échanger directement des objets Java sérialisables

� Permet de masquer cette phase de décodage� Définir une interface du service, une interface d'appel asynchrone, une

implémentation (servlet), un invocateur (proxy), …

� RequestFactory (GWT 2.1) : alternative à RPC où seuls les champs modifiés d’un objet transitent par le réseau (différentiel)


Le bouton "back" du navigateur

• Problème avec le remplacement partiel de la page

� Ne compte pas comme un changement de page pour le navigateur

� Mais l'utilisateur voit une page différente

� L'utilisateur peut vouloir annuler en utilisant le bouton "back"

• Solution : gérer intelligemment le bouton "back"

• Classes History, Hyperlink et ValueChangeHandler

� Gestion transparente d'un "frame" caché html pour que Le navigateur ajoute dans l’historique les changements de "pages"

� Générer des "history token" pour identifier les états de l’application

� Gère des ValueChangeEvent pour réagir aux boutons Back et Forward

� Pas de magie, au développeur de prendre en compte la cohérence


Intégration JSNI

• JavaScript Native Interface

� Spécifier des méthodes "natives", dont le code existera au runtime

� Intégrer le code JavaScript directement dans le code Java� On met le code en commentaire derrière la définition� Ça reste du code Java valide puisque dans des commentaires� Le compilateur insère ce code dans le fichier généré

• Permet

� D'optimiser

� De gérer des spécifités, d'intégrer des librairies existantes

� Appeler du code JavaScript depuis Java et vice versa

� Lire et écrire des attributs Java depuis JavaScript

public static native void alert(String msg) /*-{$wnd.alert(msg);

}-*/;


Autres (1)

• I18n utilise le DeferredBinding : GWT.create()

� Autant de fichiers js que de locales

• Gestion des événements par xxxHandler

� ClickHandler (souris), LoadHandler (chargement d'image), ChangeHandler (modification du widget), FocusHandler et BlurHandler (prise / perte de focus), Key(Down/Up/Press)Handler (événements clavier), MouseXXXHandler (événements souris), OpenHandler et CloseHandler (événements de fermeture fenêtre, popup, menu, ...), ScrollHandler (déplacement des barres de défilement), SelectionHandler (sélection d'onglet)

Créer l'interfacepublic interface MySettings

extends Constants {String welcomeMsg(); String logoImage();

}

Dans MySettings.propertieswelcomeMsg = BonjourlogoImage = /images/logo.jpg

Utilisation dans le codeMySettings s = GWT.create(

MySettings.class);String msg = s.welcomeMsg();


Autres (2)

• Log : GWT fournit un Logger

� Permet d’avoir une fenêtre de log JavaScript

� Configuration de logging dans le fichier .gwt.xml

� SystemLogHandler, ConsoleLogHandler (console Javascript), PopupLogHandler, SimpleRemoteLogHandler (par RPC), ...

� Utilisation d’images et de ressources

• ImageBundle pour le chargement de nombreuses images en une seule grande image

• ClientBundle : optimisations pour des fichiers textes, CSS et XML

• Tests unitaires

• Intégration de JUnit par une sous-classe de GWTTestCase

• Mock objets (utiliser MVP pour découpler les widgets et le métier)

• Sélénuim


Conclusion


R.E.X

• Annuaire de 4000 personnes pour gérer les conseille rs des prud'hommes

• SPA : simple page application, chargé en 1s, très r éactif

� Application multi profil

� Utilisation des widgets natives : templates de pages, refactoring, …

• Retour

� Développement comme un client lourd, pas besoin de compétence web (sauf css) ou javascript, peu de problème de portabilité, gestion historique facile

� Compilation lente (faire les optimisations), showcase non exhaustif, temps nécessaire pour bien comprendre les widgets complexes


Avantages

• Utilisation de Java

� Langage très connu et utilisé

� Richesse de la plate-forme et des outils

• Productivité

� Facilité d’apprentissage, configuration minimale

� Rapidité de développement d'une interface riche et conviviale

• Optimisation systématique du code produit

� Performances et scalabilité

� Prise en compte des navigateurs, versions, langues

• Pas de plug-in dans le navigateur (hors développeme nt)

• Disponibilités croissantes de bibliothèques

• Et aussi : communauté, documentation, …


Inconvénients

• Attention au choix des bibliothèques complémentaire s

• Limitations du JRE pour la transcription Javascript

• Besoin de connaître les CSS

� Surtout depuis GWT 2

• Sécurité AJAX

� Vulnérabilité Javascript XSS (Cross Site Scripting) ou CSRF (Cross Site Request Forgery) pour le vol ou l’utilisation de cookie

• Indexation par les moteurs de recherche

� Application ou site web ?

• N’impose rien sur l’organisation du code

� Design patterns du client lourd à base d'événements et de listeners

� MVP


Conclusion

• Un toolkit puissant et original

� Une approche différente du web permettant une ergonomie riche

� Des techniques très bien pensées

� Insertion facile dans la stack technologique serveur (java, php, ...)

� Respect des standards Open Source

� Supporté par Google

Documents

Gwt oxiane-novae-lr