Gwt oxiane-novae-lr

GWT
Google Web Toolkit

OXIANE – NOVAE LR

©Copyright OXIANE Page 1

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 basiques)
Manque d'interactivité
Nécessité de faire des allers-retours pour une simple 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, …)

GWT

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)


Ajax

• Ajax = Asynchronous JavaScript and XML
• AJAX n’est pas une technologie en elle-même, mais un
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, jQuery,
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 les .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 binding"
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’internationalisation
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"
webAppCreator -out c:/Hello com.oxiane.App

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, …


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'application
• 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 module
<entry-point class='com.oxiane.client.App'/>
• Le compilateur part de cette classe
Et suit les dépendances
public 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 Panel Panel

et panels en tout Widget
Widget Widget
Présentés dans le Showcase


Style et placement des widgets

• Méthode setStyleName() pour affecter un style
Dans le code : Dans le fichier de styles :
widget.setStyleName("special"); .special {
float: right;
margin: 5px;
}

• 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


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 QuantiteWidget.ui.xml
<g:HTMLPanel>
Utiliser le même nom <g:TextBox ui:field="quantite">
</g:TextBox>
Utiliser l’attribut ui:field </g:HTMLPanel>

Utiliser l’annotation @UiField dans la classe
QuantiteWidget.java
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));}
}


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 Chrome
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)

Notions
complémentaires


Code Splitting

• Fragmentation de code pour générer plusieurs fichiers
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 onModuleLoad() { public void onModuleLoad() {
Button b = new Button("Click me", Button b = new Button("Click me",
new ClickHandler() { new ClickHandler() {
public void onClick(ClickEvent public void onClick(ClickEvent
event) { event) {
GWT.runAsync(new RunAsyncCallback() {
public void onFailure(Throwable c)
{Window.alert("Fail download code");}
public void onSuccess()
Window.alert("Hello, AJAX"); {Window.alert("Hello, AJAX");}
});
} }
}); });
RootPanel.get().add(b); 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é

public static native void alert(String msg) /*-{
• Permet $wnd.alert(msg);
}-*/;
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


Autres (1)

• I18n utilise le DeferredBinding : GWT.create()
Autant de fichiers js que de locales Créer l'interface
public interface MySettings
extends Constants {
Utilisation dans le code
String welcomeMsg();
MySettings s = GWT.create(
String logoImage();
MySettings.class);
}
String msg = s.welcomeMsg();
Dans MySettings.properties
welcomeMsg = Bonjour
logoImage = /images/logo.jpg

• 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)


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 conseillers
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éveloppement)
• Disponibilités croissantes de bibliothèques
• Et aussi : communauté, documentation, …

Inconvénients

• Attention au choix des bibliothèques complémentaires
• 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


Gwt oxiane-novae-lr

Contenu connexe

Tendances

En vedette

Similaire à Gwt oxiane-novae-lr

Gwt oxiane-novae-lr