GWT Approfondissement - GTI780 & MTI780 - ETS - A09

GWT (Google Web Toolkit)GWT (Google Web Toolkit)ApprofondissementApprofondissement

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Sujets spéciaux en TILe Web 2.0 : concepts et outilsÉcole de technologie supérieure

par

Claude Coulombe


ButBut

Dans cette présentation vous verrez comment Dans cette présentation vous verrez comment le Google Web Toolkit (GWT) permet le le Google Web Toolkit (GWT) permet le développement rapide en Java d'applications développement rapide en Java d'applications Web 2.0 et AJAX à la fois complexes et Web 2.0 et AJAX à la fois complexes et performantes.performantes.

http://code.google.com/webtoolkit/


Pourquoi GWT ?Pourquoi GWT ? - - Problèmes avec JavaScriptProblèmes avec JavaScript

Euh!..., il ne connaissait pas assez le JavaScript...

* Source Clipart : http://www.clipart.com


Problèmes de portabilité, incompatibilités des fureteurs, fuites de Problèmes de portabilité, incompatibilités des fureteurs, fuites de

mémoire & longs chargementsmémoire & longs chargements

Pas de typage statique des variables en JavaSriptPas de typage statique des variables en JavaSript

Le type d'une variable peut changer lorsqu'une nouvelle valeur lui est Le type d'une variable peut changer lorsqu'une nouvelle valeur lui est

affectée (typage dynamique). affectée (typage dynamique). var unNombre = 2; unNombre = "deux";var unNombre = 2; unNombre = "deux";

Sensible à la moindre coquille, sensible à la casseSensible à la moindre coquille, sensible à la casse

formulaire.montformulaire.montnanat = document.getElementById(''montant'');t = document.getElementById(''montant'');

Quelques subtilités : Quelques subtilités : null null vsvs undefined undefined vsvs false false vs vs """"

Débogage à l'exécution pas à la compilationDébogage à l'exécution pas à la compilation

Support inégal des outils et IDEsSupport inégal des outils et IDEs

Problème de sécurité XSS (injection de scripts)Problème de sécurité XSS (injection de scripts)

Rareté des « programmeurs experts » en JavaScriptRareté des « programmeurs experts » en JavaScript

Pourquoi GWT ?Pourquoi GWT ? - - Problèmes avec JavaScriptProblèmes avec JavaScript


Made in JavaScript


Pourquoi GWT ?Pourquoi GWT ? - - JS pas conçu pour de gros logicielsJS pas conçu pour de gros logiciels


Excellente pour l'écriture rapide de petites applications, la souplesse de Excellente pour l'écriture rapide de petites applications, la souplesse de

JavaScript devient un handicap pour l'écriture de gros logiciels et de JavaScript devient un handicap pour l'écriture de gros logiciels et de

logiciels complexeslogiciels complexes

Le typage dynamique représente une source importante d'erreurs pour de Le typage dynamique représente une source importante d'erreurs pour de

gros logicielsgros logiciels

Pas d'espace de nommage (collision de variables), manque de modularité Pas d'espace de nommage (collision de variables), manque de modularité

et de capacité à grandir, pas un véritable langage à objets et de capacité à grandir, pas un véritable langage à objets

Mise au point et réutilisation difficilesMise au point et réutilisation difficiles

NNormal, car JS n'a pas été conçu pour de gros logiciels, mais juste pour ormal, car JS n'a pas été conçu pour de gros logiciels, mais juste pour

mettre un peu d'interactivité dans une page webmettre un peu d'interactivité dans une page web

On peut voir le JavaScript comme le langage d'assemblage (assembleur) On peut voir le JavaScript comme le langage d'assemblage (assembleur)

du fureteurdu fureteur

Pourquoi GWT ?Pourquoi GWT ? - - JS pas conçu pour de gros logicielsJS pas conçu pour de gros logiciels

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009* Source image : http://www.sun.com* Source Clipart : http://www.clipart.com

Pourquoi GWT ?Pourquoi GWT ? - - Si on pouvait utiliser Java!Si on pouvait utiliser Java!


Conçu pour le génie logiciel Conçu pour le génie logiciel

Véritable langage de POOVéritable langage de POO

Typage statique, compilé, completTypage statique, compilé, complet

Espace de nommage, notion de paquet (Package)Espace de nommage, notion de paquet (Package)

Répandu, connu et imité!Répandu, connu et imité!

Langage le plus répandu – 6 millions de développeursLangage le plus répandu – 6 millions de développeurs

Multiplateforme - “Write Once, Run Anywhere” - Windows, Linux, OS XMultiplateforme - “Write Once, Run Anywhere” - Windows, Linux, OS X

Abondante documentation, livres et coursAbondante documentation, livres et cours

Nombreux outils et EDIsNombreux outils et EDIs

Le plus grand nombre de bibliothèques et canevas d'applicationsLe plus grand nombre de bibliothèques et canevas d'applications

Le plus grand nombre d'outils en source libre dont Java lui-mêmeLe plus grand nombre d'outils en source libre dont Java lui-même

Puissants EDIs*Puissants EDIs*

Eclipse, NetBeans ou IntelliJEclipse, NetBeans ou IntelliJ

Débogueur / éditeur de code évolué / outil de refactorisation / outil Débogueur / éditeur de code évolué / outil de refactorisation / outil d'analyse du coded'analyse du code

Pourquoi GWT ?Pourquoi GWT ? - - Si on pouvait utiliser Java!Si on pouvait utiliser Java!


GWT – Un « beau truc! » GWT – Un « beau truc! »

GWT =GWT =

* Source : http://www.google.com, http://www.sun.com, htttp://www.clipart.com

AJAXAJAX

++

Génie logicielGénie logiciel

http://www.google.com/

http://www.sun.com/


Qu'est-ce que GWT ?Qu'est-ce que GWT ? En mai 2006 Google lance son Google Web ToolkitEn mai 2006 Google lance son Google Web Toolkit

Bruce Johnson & Joel WebberBruce Johnson & Joel Webber Canevas d'applications Web riches, entièrement basé Canevas d'applications Web riches, entièrement basé

Java, « orienté client » et en logiciel libre (Apache 2)Java, « orienté client » et en logiciel libre (Apache 2) Transcompilateur (cross-compiler) de Java à JavaScriptTranscompilateur (cross-compiler) de Java à JavaScript Développement rapide d'applications Web riches par Développement rapide d'applications Web riches par

des programmeurs Java qui ne maîtrisent pas des programmeurs Java qui ne maîtrisent pas JavaScript JavaScript

Bon à la fois pour enrichir des applications Web avec Bon à la fois pour enrichir des applications Web avec des composants Ajax et pour créer des applications des composants Ajax et pour créer des applications « similaires à des applications bureautiques locales » « similaires à des applications bureautiques locales » mais qui tournent dans un navigateur Webmais qui tournent dans un navigateur Web


Qu'est-ce que GWT ?Qu'est-ce que GWT ? - Du pur Java!- Du pur Java!

* EDI : environnement de développement intégré (en anglais IDE)

Plus de 6 millions de développeurs JavaPlus de 6 millions de développeurs Java ““Write Once, Run Anywhere”Write Once, Run Anywhere” Windows, Linux, Mac OS XWindows, Linux, Mac OS X Véritable langage de POOVéritable langage de POO Utilise un EDI* Java usuelUtilise un EDI* Java usuel Débogage du code-client avec EDIDébogage du code-client avec EDI Communication client-server d'objets JavaCommunication client-server d'objets Java Code-client plus léger que des applets JavaCode-client plus léger que des applets Java

* Source image : http://www.sun.com


GWT – Quelques exemplesGWT – Quelques exemples Lombardi Blueprint (outil de gestion des flux de travail) Lombardi Blueprint (outil de gestion des flux de travail) http://www.lombardisoftware.com/bpm-blueprint-product.phphttp://www.lombardisoftware.com/bpm-blueprint-product.php

Exemples et démos du Google Web TookitExemples et démos du Google Web Tookit

http://code.google.com/intl/fr-FR/webtoolkit/examples/http://code.google.com/intl/fr-FR/webtoolkit/examples/

GWT-Ext 2.0 ShowcaseGWT-Ext 2.0 Showcase

http://www.gwt-ext.com/demo/http://www.gwt-ext.com/demo/

Google Web Toolkit Applications Google Web Toolkit Applications (site d'un livre)(site d'un livre)

Widget DeskTop DemoWidget DeskTop Demo

http://desktop.gwtapps.comhttp://desktop.gwtapps.com

Gpokr (jeu de poker en ligne)Gpokr (jeu de poker en ligne) www.gpokr.comwww.gpokr.com

OpenSyllabus (éditeur structuré de plan de cours)OpenSyllabus (éditeur structuré de plan de cours) http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Homehttp://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home

http://www.lombardisoftware.com/bpm-blueprint-product.php

http://code.google.com/intl/fr-FR/webtoolkit/examples/

http://www.gwt-ext.com/demo/

http://desktop.gwtapps.com/

http://www.gpokr.com/

http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home


Google Wave – Google Wave – Un exemple qui fait des vagues!Un exemple qui fait des vagues!

Source : http://googleblog.blogspot.com/2009/05/went-walkabout-brought-back-google-wave.html


OpenSyllabus – OpenSyllabus – Un exemple Québécois!Un exemple Québécois!

http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home

OpenSyllabus : un éditeur structuré de plan de cours


Planificateur d'horaire – GWT à l'ETS!Planificateur d'horaire – GWT à l'ETS!

http://planhoraire.aeets.com/planhoraire.html


GWT – AGWT – Avantages pour les utilisateursvantages pour les utilisateurs

* Source Clipart : http://www.clipart.com* Source Clipart : http://www.clipart.com


GWT – AGWT – Avantages pour les utilisateursvantages pour les utilisateurs

Réponses rapides aux actions de l'utilisateurRéponses rapides aux actions de l'utilisateur La vitesse est vitale, spécialement au démarrageLa vitesse est vitale, spécialement au démarrage Ne requiert pas de plugiciel, Web Start, ni même de Ne requiert pas de plugiciel, Web Start, ni même de

JVMJVM Pas de long téléchargement, ni d'installationPas de long téléchargement, ni d'installation Compatible avec tous les fureteurs Web récentsCompatible avec tous les fureteurs Web récents Donne la préférence aux composants natifs de l'IUDonne la préférence aux composants natifs de l'IU L'utilisateur conserve le contrôle du navigateur Web en L'utilisateur conserve le contrôle du navigateur Web en

tout tempstout temps Gestion de l'historique de navigationGestion de l'historique de navigation Produit des applications Web riches, rapides et légèresProduit des applications Web riches, rapides et légères


aniaqueGWT

GWTGWT – – AAvantages pour les développeursvantages pour les développeurs



GWTGWT – – AAvantages pour les développeursvantages pour les développeurs

Un unique langage, le “Java”Un unique langage, le “Java” Bien que le code-serveur peut être en n'importe quel langageBien que le code-serveur peut être en n'importe quel langage Gère les différences entre les fureteurs WebGère les différences entre les fureteurs Web Bibliothèque OO de composants IUGBibliothèque OO de composants IUG Semblable à SWING ou AWTSemblable à SWING ou AWT Encourage les bonnes pratiques du génie logiciel en s'appuyant Encourage les bonnes pratiques du génie logiciel en s'appuyant

sur des outils Java matures et performantssur des outils Java matures et performants Eclipse, NetBeans. IntelliJEclipse, NetBeans. IntelliJ Communications Ajax faciles via RPCCommunications Ajax faciles via RPC S'intègre aux technologies Web standardsS'intègre aux technologies Web standards Réduit la charge sur le serveur et le réseauRéduit la charge sur le serveur et le réseau Le code-client est beaucoup plus léger qu'un Applet JavaLe code-client est beaucoup plus léger qu'un Applet Java


Comprendre GWTComprendre GWT

GWTGWT



Application GWTApplication GWT – – Client & ServeurClient & Serveur

Le code-client en JavaScript est transmis sur le réseau vers un ordinateur-client, où il s'exécute dans un logiciel de navigation Web

Le code-serveur (en Java ou tout autre langage) s'exécute sur le serveur.

L'application Web utilise le serveur pour charger ou sauvegarder des données.



Transcompilateur Java à JavaScript Transcompilateur Java à JavaScript

Java

JavaScript

GWT version 1.5 supporte :* Firefox 1.0, 1.5, 2, 3.x* Internet Explorer 6, 7, 8* Safari 2.0, 3.0* Opera 9.0

Run Everywhere!

Write Once...



Transcompilateur Java à JavaScript Transcompilateur Java à JavaScript Transcompilateur GWT prend du code-client en Java et Transcompilateur GWT prend du code-client en Java et produit du code JavaScript optimiséproduit du code JavaScript optimisé

JavaScript devient le code assembleur du fureteurJavaScript devient le code assembleur du fureteur

Élimination du code non-utilisé dans les bibliothèques, Élimination du code non-utilisé dans les bibliothèques, inférence de type, retrait du polymorphisme, inférence de type, retrait du polymorphisme, compression “agressive” du code, « Obfuscation »compression “agressive” du code, « Obfuscation »

Le JavaScript produit est généralement plus rapide Le JavaScript produit est généralement plus rapide que du JavaScript écrit à la main* que du JavaScript écrit à la main*

Emploi de la liaison différée (“Deferred Binding”) pour Emploi de la liaison différée (“Deferred Binding”) pour produire du code JavaScript optimal pour chaque produire du code JavaScript optimal pour chaque fureteur (i.e. génère du code spécifique à chaque fureteur (i.e. génère du code spécifique à chaque fureteur)fureteur)

« Ne payez que pour ce que vous utilisez »« Ne payez que pour ce que vous utilisez »

* Note : sauf si code < 100 lignes* Note : sauf si code < 100 lignes


Transcompilateur- Transcompilateur- Liaison différéeLiaison différée

« Ne payez que pour ce que vous utilisez »

Copyright Google 2008

* Source : http://www.google.com

Générer du code optimal et spécifique à chaque fureteurGénérer du code optimal et spécifique à chaque fureteur

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009* Source Clipart : http://www.clipart.com

Client léger HTML vs client riche AjaxClient léger HTML vs client riche Ajax


« Ne payez que pour ce que vous utilisez »« Ne payez que pour ce que vous utilisez »

Copyright Google 2008Copyright Google 2008

* Source : http://www.google.com* Source : http://www.google.com

Transcompilateur – Code optimisé! Transcompilateur – Code optimisé!


GWT GWT –– Structure bibliothèque & APIStructure bibliothèque & API



Vue d'ensemble de l'architecture GWTVue d'ensemble de l'architecture GWT

Bibliothèque IUG

Widgets &Panels

Communicationavec le serveur

RPC & Ajax

Analyseur XML

Gestion del'historique

Intégration à JUnit

GWT APIGWT API

Trans compilateur

Java àJavaScript

Interface Native

JavaScriptJSNI

Bibliothèqued'émulation

JRE


BibliothèqueBibliothèque

IUGIUG

Widgets &Widgets &

PanelsPanels

CommunicationCommunication

avec le serveuravec le serveur

RPC & AjaxRPC & Ajax

Analyseur Analyseur

XMLXML

Gestion deGestion de

l'historiquel'historique

Intégration Intégration

à JUnità JUnit

GWT APIGWT API

Trans Trans

compilateur compilateur

Java àJava à

JavaScriptJavaScript

Interface Interface

NativeNative


JSNIJSNI

BibliothèqueBibliothèque

d'émulationd'émulation

JREJRE

La structure du gwt-user.jar de GWT 1.5.3La structure du gwt-user.jar de GWT 1.5.3 GWT GWT –– Structure bibliothèque & APIStructure bibliothèque & API

Note : Transcompilateur GWT Note : Transcompilateur GWT

dans gwt-dev-windows.jardans gwt-dev-windows.jar



Transcompilateur Transcompilateur

gwt-user.jargwt-user.jarGwt-dev-Gwt-dev-

windows.jarwindows.jar

Autres .jarAutres .jar

Compatibles Compatibles

avec GWTavec GWT

ConfigurationConfiguration

ModuleModule

MonProjet.gwtMonProjet.gwt

.xml.xml

Code Java Code Java

MonProjetMonProjet

.java.java

RessourcesRessourcesMonProjet. htmlMonProjet. htmlMonProjet.css,MonProjet.css,.png, .jpg, .gif.png, .jpg, .gif

CodeCode


MonProjet.jsMonProjet.js

RessourcesMonPrRessourcesMonProjet.ojet.htmlhtml

MonProjet.css,MonProjet.css,.png, .jpg, .gif.png, .jpg, .gif


Du JavaScript plus rapide que du code écrit à la main !!!Du JavaScript plus rapide que du code écrit à la main !!!

Ainsi, ceciAinsi, ceci

public static void onModuleLoad() {public static void onModuleLoad() {

Button b = (new Button()).Button();Button b = (new Button()).Button();

b.setText("Java vers JavaScript");b.setText("Java vers JavaScript");

}}

après compilation, donnera quelque chose comme cela... après compilation, donnera quelque chose comme cela...

function onModuleLoad(){function onModuleLoad(){

var b;var b;

b = $Button(new Button());b = $Button(new Button());

$setInnerText(b.element, 'Java vers JavaScript');$setInnerText(b.element, 'Java vers JavaScript');

}}



Emulation – JRE Emulation – JRE (Java Runtime Environment)(Java Runtime Environment)

Le transcompilateur de GWT fournit l'émulation en Le transcompilateur de GWT fournit l'émulation en JavaScript d'un sous-ensemble du langage Java (JRE) JavaScript d'un sous-ensemble du langage Java (JRE) généralement utilisé pour la programmation de basegénéralement utilisé pour la programmation de base

java.lang, java.util, java.io, java.sqljava.lang, java.util, java.io, java.sql

Restriction pour le code client Restriction pour le code client

devant être traduit en JavaScript. devant être traduit en JavaScript.

Aucune restriction n'est imposée Aucune restriction n'est imposée

du côté du code serveur : Java du côté du code serveur : Java

(JSP/JSF/Servlet), PHP, (JSP/JSF/Servlet), PHP,

ASP .NET, Perl, RoR, Python, Perl, ...ASP .NET, Perl, RoR, Python, Perl, ...

* Source image : http://www.sun.com* Source image : http://www.sun.com


JSNI : JavaScript Native InterfaceJSNI : JavaScript Native InterfaceGWT permet l'intégration facile avec des bibliothèques GWT permet l'intégration facile avec des bibliothèques JavaScript externes grâce à son JavaScript Native JavaScript externes grâce à son JavaScript Native Interface (JSNI)Interface (JSNI)

Interagir directement avec JavaScript (accès natif) à Interagir directement avec JavaScript (accès natif) à partir de Java et vice-versa partir de Java et vice-versa

Inclusion automatique des bibliothèques JavaScriptInclusion automatique des bibliothèques JavaScript

GWT 1.5 introduit le concept de JavaScript Overlay GWT 1.5 introduit le concept de JavaScript Overlay pour simplifier l'intégration de prototypes JavaScript pour simplifier l'intégration de prototypes JavaScript dans GWTdans GWT


JSNI : JavaScript Native InterfaceJSNI : JavaScript Native Interface GWT permet l'intégration facile avec des bibliothèques GWT permet l'intégration facile avec des bibliothèques

JavaScript externes grâce à son JavaScript Native JavaScript externes grâce à son JavaScript Native Interface (JSNI)Interface (JSNI)

Interagir directement avec JavaScript à partir de Java Interagir directement avec JavaScript à partir de Java et vice-versaet vice-versa

Inclusion automatique des bibliothèques JavaScriptInclusion automatique des bibliothèques JavaScript

// Déclaration de la méthode en Java...// Déclaration de la méthode en Java...

native String inverserNomPrenom(String nom) native String inverserNomPrenom(String nom)

/*-{/*-{

// Implémentation en JavaScript// Implémentation en JavaScript

var re = /(\w+)\s(\w+)/;var re = /(\w+)\s(\w+)/;

return name.replace(re, '$2, $1');return name.replace(re, '$2, $1');

}-*/;}-*/;


JSNI : Type Overlay JavaScript JSNI : Type Overlay JavaScript GWT 1.5 introduit le concept de JavaScript Overlay pour simplifier GWT 1.5 introduit le concept de JavaScript Overlay pour simplifier l'intégration de prototypes JavaScript dans GWTl'intégration de prototypes JavaScript dans GWTUne structure de données JSON (JavaScript Object Notation)Une structure de données JSON (JavaScript Object Notation)

var electionsJSON = [var electionsJSON = [

{ "Prenom" : "Pauline", "NomFamille" : "Marois" }, { "Prenom" : "Amir", "NomFamille" : "Khadir" },{ "Prenom" : "Pauline", "NomFamille" : "Marois" }, { "Prenom" : "Amir", "NomFamille" : "Khadir" },

{ "Prenom" : "Mario", "NomFamille" : "Dumont" }, { "Prenom" : "Jean", "NomFamille" : "Charest" }{ "Prenom" : "Mario", "NomFamille" : "Dumont" }, { "Prenom" : "Jean", "NomFamille" : "Charest" }

];];

// Un type Overlay JavaScript// Un type Overlay JavaScript

class PoliticienQC extends JavaScriptObject {class PoliticienQC extends JavaScriptObject {

// Un type Overlay JS a toujours un constructeur protected, à zéro argument// Un type Overlay JS a toujours un constructeur protected, à zéro argument

protected PoliticienQC() { } protected PoliticienQC() { }

// Les méthodes dans un Overlay JavaScript sont en JSNI// Les méthodes dans un Overlay JavaScript sont en JSNI

public final native String getPrenom() /*-{ return this.Prenom; }-*/;public final native String getPrenom() /*-{ return this.Prenom; }-*/;

public final native String getNomFamille() /*-{ return this.NomFamille; }-*/;public final native String getNomFamille() /*-{ return this.NomFamille; }-*/;

// Notez, toutefois, que toutes les méthodes ne sont pas obligatoirement en JSNI// Notez, toutefois, que toutes les méthodes ne sont pas obligatoirement en JSNI

public final String getNomComplet() {public final String getNomComplet() {

return getPrenom() + " " + getNomFamille(); return getPrenom() + " " + getNomFamille();

}}

}}

* Source : http://googlewebtoolkit.blogspot.com* Source : http://googlewebtoolkit.blogspot.com


JSNI : Type Overlay JavaScript JSNI : Type Overlay JavaScript // Obtenir un prototype JavaScript pour l'Overlay// Obtenir un prototype JavaScript pour l'Overlay

class MonModuleEntryPoint implements EntryPoint {class MonModuleEntryPoint implements EntryPoint {

public void onModuleLoad() {public void onModuleLoad() {

PoliticienQC p = getPremierPoliticien();PoliticienQC p = getPremierPoliticien();

// Youppi! Maintenant j'ai un prototype JavaScript qui est aussi un PoliticienQC// Youppi! Maintenant j'ai un prototype JavaScript qui est aussi un PoliticienQC

Window.alert("Bonjour, " + p.getPrenom());Window.alert("Bonjour, " + p.getPrenom());

}}

// Utilisation de JSNI pour obtenir le prototype JSON que nous désirons// Utilisation de JSNI pour obtenir le prototype JSON que nous désirons

// Le prototype JSON object reçoit un type Java implicitement // Le prototype JSON object reçoit un type Java implicitement

// en se basant sur le type retourné par la méthode// en se basant sur le type retourné par la méthode

private native PoliticienQC getPremierPoliticien() /*-{private native PoliticienQC getPremierPoliticien() /*-{

// Obtenir une référence au premier PoliticienQC dans le tableau JSON// Obtenir une référence au premier PoliticienQC dans le tableau JSON

return $wnd.electionsJSON[0]; return $wnd.electionsJSON[0];

}-*/;}-*/;

}}

* Source : http://googlewebtoolkit.blogspot.com* Source : http://googlewebtoolkit.blogspot.com


Génie logiciel pour les applications Web Génie logiciel pour les applications Web riches & Ajaxriches & Ajax Support du cycle de vie complet du logicielSupport du cycle de vie complet du logiciel

Patrons de conception OO éprouvésPatrons de conception OO éprouvés

EDIs* Java maturesEDIs* Java matures

Cycle : édition / test / débogage /Cycle : édition / test / débogage /

Restructuration (refactoring)Restructuration (refactoring)

Support au débogageSupport au débogage

Détection d'erreurs à la compilationDétection d'erreurs à la compilation

Mise au point & débogage en mode hôteMise au point & débogage en mode hôte

Journalisation (logging)Journalisation (logging)

Support de JUnitSupport de JUnit


* EDI : environnement de développement intégré (en anglais IDE)


Intégration à EclipseIntégration à Eclipse


Intégration à Eclipse – Mode HôteIntégration à Eclipse – Mode Hôte


GWT en « mode hôte »GWT en « mode hôte » - D - Débogageébogage

Application GWT peut s'exécuter en « mode Application GWT peut s'exécuter en « mode

hôte » (“Hosted Mode”)hôte » (“Hosted Mode”)

En « mode hôte », la JVM exécute le code GWT En « mode hôte », la JVM exécute le code GWT

comme du bytecode Java à l'intérieur d'une comme du bytecode Java à l'intérieur d'une

fenêtre de navigateur Webfenêtre de navigateur Web

L'exécution en « mode hôte » facilite leL'exécution en « mode hôte » facilite le

débogage :débogage :

Éditer le code-sourceÉditer le code-source

RafraîchirRafraîchir

Examiner les résultatsExaminer les résultats


Structure d'un projet GWTStructure d'un projet GWT


MaPremiereAppli/ src/ PaquetConfig/

MaPremiereAppli.gwt.xml PaquetClient MonPremierService.java MonPremierServiceAsync.java MaPremiereAppli.java PaquetServeur MaPremiereAppli.java META-INF/ jdoconfig.xml log4j.properties war/ mapremierappligwt/ … résultats compilation en JS ... WEB-INF/ lib/ ...App Engine JARs... appengine-web.xml logging.properties web.xml MaPremiereAppli.css MaPremiereAppli.html


Intégration à Eclipse – débogueurIntégration à Eclipse – débogueur


GWT en « Mode Web » - DéploiementGWT en « Mode Web » - Déploiement

Une fois testé en « Mode Hôte », vous pouvez Une fois testé en « Mode Hôte », vous pouvez compiler votre code source Java en JavaScript compiler votre code source Java en JavaScript et déployer votre application Webet déployer votre application Web

Une application Web GWT qui a été déployée Une application Web GWT qui a été déployée est dite en « Mode Web »est dite en « Mode Web »

Une fois compilé le code-client est uniquement Une fois compilé le code-client est uniquement du pur JavaScript et du HTMLdu pur JavaScript et du HTML

Afin de déployer votre application Web en Afin de déployer votre application Web en production, vous déplacez les fichiers du production, vous déplacez les fichiers du répertoire « war » sur le serveur Web, i.e. répertoire « war » sur le serveur Web, i.e. Tomcat (ou Apache)Tomcat (ou Apache)


Vue d'ensemble de la bibliothèque deVue d'ensemble de la bibliothèque decomposants d'interface utilisateur (IU)composants d'interface utilisateur (IU)

Composants d'interface-utilisateurComposants d'interface-utilisateur

Programmation par événementsProgrammation par événements

Exemples d'événementsExemples d'événements

Gestion des événementsGestion des événements

PanneauxPanneaux

Bouton simpleBouton simple

Case à cocherCase à cocher

Bouton radioBouton radio

Boîte de texteBoîte de texte

Liste déroulanteListe déroulante

ArbreArbre

Éditeur de textesÉditeur de textes

Support des CSSSupport des CSS

I18NI18N

Gestion de l'historiqueGestion de l'historique



IU - ComposantsIU - ComposantsBalises HTML usuelles, comme img, anchor, hyperlinkBalises HTML usuelles, comme img, anchor, hyperlink

Bouton, bouton radio, bouton à bascule, case à cocherBouton, bouton radio, bouton à bascule, case à cocher

Menu, sous-menu, menu déroulantMenu, sous-menu, menu déroulant

Champ de texte, zone de texteChamp de texte, zone de texte

Onglets, liste déroulante, boîte de dialogueOnglets, liste déroulante, boîte de dialogue

Séparateurs de fenêtreSéparateurs de fenêtre

Widgets complexes comme des tables, boîte de Widgets complexes comme des tables, boîte de téléversement de fichier, widget d'arbres, éditeur de téléversement de fichier, widget d'arbres, éditeur de texte enrichi,texte enrichi,

Différents panneaux très utiles pour la dispositionDifférents panneaux très utiles pour la disposition


IU IU – Programmation par événements– Programmation par événementsEssentiellement de la programmation par événementsEssentiellement de la programmation par événements

Une méthode ou procédure s'exécute quand un Une méthode ou procédure s'exécute quand un événement est déclenchéévénement est déclenché

Dans une IU, un événement est déclenché chaque fois Dans une IU, un événement est déclenché chaque fois que l'utilisateur clique sur la souris, appuie sur une que l'utilisateur clique sur la souris, appuie sur une touche du clavier, sélectionne un élément dans un touche du clavier, sélectionne un élément dans un menu, ouvre ou ferme une fenêtre, etc.menu, ouvre ou ferme une fenêtre, etc.

À chaque composant de l'IU appelé aussi contrôle ou À chaque composant de l'IU appelé aussi contrôle ou widget (comme un bouton, un menu, etc.) est associé widget (comme un bouton, un menu, etc.) est associé un ou plusieurs gestionnaires d'événements (Listener un ou plusieurs gestionnaires d'événements (Listener ou Handler) qui peuvent comporter des paramètres ou Handler) qui peuvent comporter des paramètres


IU – Exemples d'IU – Exemples d'événementsévénements OnClick OnClick – déclenché quand l'usager clique un élément– déclenché quand l'usager clique un élément

OnBlur OnBlur – déclenché quand un élément perd le focus du clavier– déclenché quand un élément perd le focus du clavier

OnChange OnChange - déclenché quand le contenu de la saisie change- déclenché quand le contenu de la saisie change

OnFocus OnFocus – déclenché quand un élément reçoit le focus clavier– déclenché quand un élément reçoit le focus clavier

OnKeyDownOnKeyDown – déclenché quand l'usager appuie sur une touche – déclenché quand l'usager appuie sur une touche

OnKeyUp OnKeyUp – déclenché quand l'usager relâche une touche – déclenché quand l'usager relâche une touche

OnKeyPress OnKeyPress – déclenché quand un caractère est généré– déclenché quand un caractère est généré

OnMouseOver –OnMouseOver – déclenché quand la souris passe au-dessus déclenché quand la souris passe au-dessus

OnMouseMove –OnMouseMove – déclenché quand la souris entre dans la zone déclenché quand la souris entre dans la zone

OnMouseOutOnMouseOut – déclenché quand la souris sort de la zone – déclenché quand la souris sort de la zone

OnScroll OnScroll – déclenché quand un élément avec défilement bouge– déclenché quand un élément avec défilement bouge

OnLoadOnLoad – déclenché quand un élément termine de se charger – déclenché quand un élément termine de se charger

OnDblClickOnDblClick – déclenché quand l'usager double-clique– déclenché quand l'usager double-clique


IU – IU – Récepteur / gestionnaire d'événementsRécepteur / gestionnaire d'événements GWT utilise le concept de récepteur ou gestionnaire (« GWT utilise le concept de récepteur ou gestionnaire («

listener interface ») pour traiter les événementslistener interface ») pour traiter les événements

Semblable à d'autres canevas d'applications Semblable à d'autres canevas d'applications graphiques comme SWINGgraphiques comme SWING

Le récepteur via l'interface “listener interface” définit Le récepteur via l'interface “listener interface” définit une ou plusieurs méthodes que le widget appelle en une ou plusieurs méthodes que le widget appelle en réaction à un événementréaction à un événement

Button unBouton = new Button("Cliquez moi!");Button unBouton = new Button("Cliquez moi!"); unBouton.addClickListener(new ClickListener() {unBouton.addClickListener(new ClickListener() { public void onClick(Widget emetteur) {public void onClick(Widget emetteur) { // traitement du Clic// traitement du Clic }} });});


Interface Utilisateur - Interface Utilisateur - ComposantsComposantsÉléments statiques: étiquetteÉléments statiques: étiquette ( (LabelLabel), HTML, Image, hyperlien (), HTML, Image, hyperlien (HyperlinkHyperlink), champ ), champ caché (caché (HiddenHidden))

Widgets (E/S) : bouton (Widgets (E/S) : bouton (ButtonButton), bouton poussoir (), bouton poussoir (PushButtonPushButton), bouton à bascule ), bouton à bascule ((ToggleButtonToggleButton), case à cocher (), case à cocher (CheckBoxCheckBox), bouton radio (), bouton radio (RadioButtonRadioButton), menu déroulant ), menu déroulant ((ListBoxListBox), zone de texte (), zone de texte (TextBoxTextBox), zone de texte avec suggestions (), zone de texte avec suggestions (SuggestBoxSuggestBox), ), zone d'entrée de mot de passe (zone d'entrée de mot de passe (PasswordTextBoxPasswordTextBox), zone de texte multiligne (), zone de texte multiligne (TextAreaTextArea), ), zone d'édition de texte enrichi (zone d'édition de texte enrichi (RichTextAreaRichTextArea))

Widgets complexes : arbre (Widgets complexes : arbre (TreeTree), barre de menus (), barre de menus (MenuBarMenuBar), téléversement de ), téléversement de fichiers (fichiers (FileUploadFileUpload))

Panneaux de disposition simple : panneau en file (Panneaux de disposition simple : panneau en file (FlowPanelFlowPanel), panneau horizontal ), panneau horizontal ((Horizontal PanelHorizontal Panel), panneau vertical (), panneau vertical (VerticalPanelVerticalPanel), panneau à coulisse ), panneau à coulisse ((HorizontalSplitPanelHorizontalSplitPanel, , VerticalSplitPanelVerticalSplitPanel), panneau HTML (), panneau HTML (HTMLPanelHTMLPanel), panneau ), panneau superposé (superposé (DeckPanelDeckPanel))

Panneaux de disposition complexe : table flexible* (Panneaux de disposition complexe : table flexible* (FlexTableFlexTable), grille (), grille (GridGrid), panneau ), panneau polyptyque* (DockPanel)polyptyque* (DockPanel),, panneau à onglets ( panneau à onglets (TabPanelTabPanel), panneau en pile (), panneau en pile (StackPanelStackPanel))

Panneaux conteneurs simples : panneau composite ou composite (Panneaux conteneurs simples : panneau composite ou composite (CompositeComposite) panneau ) panneau simple (simple (SimplePanelSimplePanel), panneau à barre de défilement (), panneau à barre de défilement (ScrollPanelScrollPanel), panneau de focus ), panneau de focus ((FocusPanelFocusPanel))

Panneaux conteneurs complexes : panneau de formulaire (Panneaux conteneurs complexes : panneau de formulaire (FormPanelFormPanel), panneau à ), panneau à dévoilement* (dévoilement* (DisclosurePanelDisclosurePanel), panneau surprise* (), panneau surprise* (PopupPanelPopupPanel), boîte de dialogue ), boîte de dialogue ((DialogBoxDialogBox))

http://gwt.google.com/samples/Showcase/Showcase.htmlhttp://gwt.google.com/samples/Showcase/Showcase.html

http://gwt.google.com/samples/Showcase/Showcase.html


Interface Utilisateur - Interface Utilisateur - PanneauxPanneaux

http://gwt.google.com/samples/Showcase/Showcase.htmlhttp://gwt.google.com/samples/Showcase/Showcase.html

DockPanelDockPanel

TabPanelTabPanel

PopupPanelPopupPanel

HorizontalPanelHorizontalPanel

VerticalPanelVerticalPanel HorizontalSplitPanelHorizontalSplitPanel

VerticalSplitPanelVerticalSplitPanelFlowPanelFlowPanel

DisclosurePanelDisclosurePanel

http://gwt.google.com/samples/Showcase/Showcase.html


Interface Utilisateur – Interface Utilisateur – Bouton simpleBouton simple

// Création d'un bouton qui réagit à un clic grâce à un récepteur de clic// Création d'un bouton qui réagit à un clic grâce à un récepteur de clic

Button bouton = new Button("Cliquez-moi", new ClickListener() {Button bouton = new Button("Cliquez-moi", new ClickListener() {

public void onClick(Widget sender) {public void onClick(Widget sender) {

Window.alert("Bonjour GWT");Window.alert("Bonjour GWT");

}}

});});

Bouton (Button)Bouton (Button)


Interface Utilisateur – Interface Utilisateur – Case à cocherCase à cocher

Case à cocher (CheckBox)Case à cocher (CheckBox)

// Création d'une case à cocher// Création d'une case à cocher

CheckBox caseResidentMtl = new CheckBox("Résident de Montréal");CheckBox caseResidentMtl = new CheckBox("Résident de Montréal");

// La case est cochée par défaut// La case est cochée par défaut

caseResidentMtl.setChecked(true);caseResidentMtl.setChecked(true);

// Attacher un récepteur de clic à la case// Attacher un récepteur de clic à la case

caseResidentMtl.addClickListener(new ClickListener() {caseResidentMtl.addClickListener(new ClickListener() {


boolean estMontrealais = ((CheckBox) sender).isChecked();boolean estMontrealais = ((CheckBox) sender).isChecked();

Window.alert( (estMontrealais ? "" : "non") + " Montréalais");Window.alert( (estMontrealais ? "" : "non") + " Montréalais");

}}

});});


Interface Utilisateur – Interface Utilisateur – Bouton radioBouton radio

Bouton radio (RadioButton)Bouton radio (RadioButton)

// Création d'un groupe de boutons radio// Création d'un groupe de boutons radio

RadioButton rbBleu = new RadioButton("groupeRbCouleurs", "bleu");RadioButton rbBleu = new RadioButton("groupeRbCouleurs", "bleu");

RadioButton rbBlanc = new RadioButton("groupeRbCouleurs", "blanc");RadioButton rbBlanc = new RadioButton("groupeRbCouleurs", "blanc");

RadioButton rbRouge = new RadioButton("groupeRbCouleurs", "rouge");RadioButton rbRouge = new RadioButton("groupeRbCouleurs", "rouge");

// Cocher le bouton bleu par défaut// Cocher le bouton bleu par défaut

rbBleu.setChecked(true);rbBleu.setChecked(true);

// Ajouter le groupe de boutons radio à un panneau// Ajouter le groupe de boutons radio à un panneau

FlowPanel panneau = new FlowPanel();FlowPanel panneau = new FlowPanel();

panneau.add(rbBleu); panneau.add(rbBleu);

panneau.add(rbBlanc);panneau.add(rbBlanc);

panneau.add(rbRouge);panneau.add(rbRouge);


Interface Utilisateur – Interface Utilisateur – Boîte de texteBoîte de texte• Boîte de texte (TextBox)Boîte de texte (TextBox) TextBox zoneSaisie = new TextBox();TextBox zoneSaisie = new TextBox();

// Interdire la saisie de texte non numérique// Interdire la saisie de texte non numérique

zoneSaisie.addKeyboardListener(new KeyboardListenerAdapter() {zoneSaisie.addKeyboardListener(new KeyboardListenerAdapter() {

public void onKeyPress(Widget emetteur, char codeCar, int modifiers) {public void onKeyPress(Widget emetteur, char codeCar, int modifiers) {

if ((!Character.isDigit(codeCar)) && (codeCar != (char) KEY_TAB)if ((!Character.isDigit(codeCar)) && (codeCar != (char) KEY_TAB)

&& (codeCar != (char) KEY_BACKSPACE) && (codeCar != (char) KEY_DELETE) && (codeCar != (char) KEY_BACKSPACE) && (codeCar != (char) KEY_DELETE)

&& (codeCar != (char) KEY_ENTER) && (codeCar != (char) KEY_HOME) && (codeCar != (char) KEY_ENTER) && (codeCar != (char) KEY_HOME)

&& (codeCar != (char) KEY_END) && (codeCar != (char) KEY_LEFT) && (codeCar != (char) KEY_END) && (codeCar != (char) KEY_LEFT)

&& (codeCar != (char) KEY_UP) && (codeCar != (char) KEY_RIGHT) && (codeCar != (char) KEY_UP) && (codeCar != (char) KEY_RIGHT)

&& (codeCar != (char) KEY_DOWN)) {&& (codeCar != (char) KEY_DOWN)) {

// Annuler l'événement KeyPress// Annuler l'événement KeyPress

( (TextBox) emetteur ).cancelKey();( (TextBox) emetteur ).cancelKey();

}}

}}

});});


Interface Utilisateur – Interface Utilisateur – Liste déroulanteListe déroulante• Liste déroulante (ListBox)Liste déroulante (ListBox) // Créer une liste, et lui ajouter quelques items// Créer une liste, et lui ajouter quelques items

ListBox listeChoix = new ListBox();ListBox listeChoix = new ListBox();

listeChoix.addItem("listeChoix.addItem("Pied-De-VentPied-De-Vent");");

listeChoix.addItem("listeChoix.addItem("Notre-Dame-des-NeigesNotre-Dame-des-Neiges");");

listeChoix.addItem("listeChoix.addItem("MigneronMigneron");");

listeChoix.addItem("listeChoix.addItem("Riopelle de l'IsleRiopelle de l'Isle");");

listeChoix.addItem("listeChoix.addItem("Bleu BénédictinBleu Bénédictin");");

// Faire assez de place pour les 6 items// Faire assez de place pour les 6 items

listeChoix.setVisibleItemCount(6);listeChoix.setVisibleItemCount(6);

// Ajouter un gestionnaire sur les événements de sélection// Ajouter un gestionnaire sur les événements de sélection

listeChoix.addChangeHandler(new ChangeHandler() {listeChoix.addChangeHandler(new ChangeHandler() {

public void onChange(ChangeEvent event) {public void onChange(ChangeEvent event) {

alert(listeChoix.getSelectedIndex().getValue());alert(listeChoix.getSelectedIndex().getValue());

}}

});});


Interface Utilisateur – Interface Utilisateur – ArbreArbre• Arbre (Tree) : Arbre (Tree) : une hiérarchie déployable de widgetsune hiérarchie déployable de widgets TreeItem tronc = new TreeItem("TreeItem tronc = new TreeItem("RacineRacine");");

tronc.addItem("tronc.addItem("item 0item 0");");



// Ajouter une case à cocher à l'arbre// Ajouter une case à cocher à l'arbre

TreeItem item = new TreeItem(new CheckBox("TreeItem item = new TreeItem(new CheckBox("item 3item 3"));"));

tronc.addItem(item);tronc.addItem(item);

Tree arbre = new Tree();Tree arbre = new Tree();

arbre.addItem(tronc);arbre.addItem(tronc);


Interface Utilisateur – Interface Utilisateur – Éditeur de textesÉditeur de textesÉditeur de textes riche (RichTextArea)Éditeur de textes riche (RichTextArea)

// Crée la zone d'édition et sa barre de menu// Crée la zone d'édition et sa barre de menu

RichTextArea editeur = new RichTextArea();RichTextArea editeur = new RichTextArea();

editeur.setSize("100%", "14em");editeur.setSize("100%", "14em");

RichTextToolbar barreMenu = RichTextToolbar barreMenu =

new RichTextToolbar(editeur);new RichTextToolbar(editeur);

barreMenu.setWidth("100%");barreMenu.setWidth("100%");

// Ajoutez les composants à un panneau// Ajoutez les composants à un panneau

Grid panneauGrille = new Grid(2, 1);Grid panneauGrille = new Grid(2, 1);

panneauGrille.setStyleName("panneauGrille.setStyleName("editeurediteur");");

panneauGrille.setWidget(0, 0, barreMenu);panneauGrille.setWidget(0, 0, barreMenu);

panneauGrille.setWidget(1, 0, editeur);panneauGrille.setWidget(1, 0, editeur);


Support des CSSSupport des CSS

Séparation du code et de la présentationSéparation du code et de la présentation Code Java :Code Java :public ListWidget(String Item) {public ListWidget(String Item) { ...... setStyleName(“gwt-ListWidget”);setStyleName(“gwt-ListWidget”);}}

Fichier CSS :Fichier CSS :.gwt-ListWidget {.gwt-ListWidget { background-color:black;background-color:black; color:lime;color:lime;}}


Support des CSS - conseilsSupport des CSS - conseilsCode Java : (usage de CSS primaire et dépendant)MonPetitWidget monPW = new MonPetitWidget();MonPetitWidget monPW = new MonPetitWidget();monPW.setStylePrimaryName("monPetitWidget");monPW.setStylePrimaryName("monPetitWidget");monPW.addStyleDependentName("selected");monPW.addStyleDependentName("selected");Fichier CSS :Fichier CSS :.monpetitWidget {.monpetitWidget { background-color:black;background-color:black; color:lime;color:lime;}}.monPetitWidget .monPetitWidget-selected {.monPetitWidget .monPetitWidget-selected { color:red;color:red;}}Permet de faire varier facilement l'apparence en fonction de l'étatPermet de faire varier facilement l'apparence en fonction de l'étatNote : Ne pas utiliser les CSS pour la disposition (ex. Note : Ne pas utiliser les CSS pour la disposition (ex.

.monPetitWidget .monPetitWidget { position: absolute; }{ position: absolute; } ))


I18N – InternationalisationI18N – Internationalisation



I18NI18N Le transcompilateur GWT utilise la liaison différée Le transcompilateur GWT utilise la liaison différée

(« Deferred Binding ») pour générer une version (« Deferred Binding ») pour générer une version différente de l'application Web pour chaque langue différente de l'application Web pour chaque langue

Par exemple, puisque GWT supporte 4 navigateurs Par exemple, puisque GWT supporte 4 navigateurs différents, si votre application doit fonctionner en différents, si votre application doit fonctionner en 3 langues, le transcompilateur de GWT produira 3 langues, le transcompilateur de GWT produira 12 versions différentes de votre application au 12 versions différentes de votre application au moment de la compilation moment de la compilation

À l'exécution, GWT choisira la bonne version de À l'exécution, GWT choisira la bonne version de l'application à montrer à l'utilisateurl'application à montrer à l'utilisateur


I18N – I18N – mécanismes de localisationmécanismes de localisation ““Constants” pour des chaînes constantes et des réglagesConstants” pour des chaînes constantes et des réglages ““Messages” pour les chaînes avec des argumentsMessages” pour les chaînes avec des arguments ““DateTimeFormat” pour les dates et l'heureDateTimeFormat” pour les dates et l'heure ““NumberFormat” pour les nombres et les unités de mesureNumberFormat” pour les nombres et les unités de mesure Pas de processus dynamique (tout est statique et fait à la Pas de processus dynamique (tout est statique et fait à la

compilation), sinon il faut développer son propre mécanismecompilation), sinon il faut développer son propre mécanisme


Gestion de l'historique du navigateurGestion de l'historique du navigateur La gestion de l'historique du navigateur s'occupe des La gestion de l'historique du navigateur s'occupe des

boutons « avancer » et « reculer » et des liensboutons « avancer » et « reculer » et des liens Une API simple de gestion de l'historique basée sur Une API simple de gestion de l'historique basée sur

une pile de jetonsune pile de jetons– Lorsque l'application démarre, la pile est videLorsque l'application démarre, la pile est vide

– Lorsque l'utilisateur clique sur quelque choseLorsque l'utilisateur clique sur quelque chose• Vous pouvez ajouter des jetons sur la pileVous pouvez ajouter des jetons sur la pile

History.newItem(“nouveauJeton”)History.newItem(“nouveauJeton”)• Classe Hyperlink ajoute des jetons automatiquementClasse Hyperlink ajoute des jetons automatiquement

– Vous pouvez aussi réagir aux événements “History Vous pouvez aussi réagir aux événements “History events” en utilisant un HistoryListenerevents” en utilisant un HistoryListener

History.addHistoryListener(controle)History.addHistoryListener(controle)


GUI – Patrons de conceptionGUI – Patrons de conception



GUI – Patrons de conception - MVCGUI – Patrons de conception - MVCPatron MVCPatron MVC

Client MVCClient MVC

VV CC

VueVue: :

Affiche les Affiche les informations et informations et achemine les achemine les actions de l'usageractions de l'usager

ContrôleurContrôleur::

Établit les liens Établit les liens entre le Modèle et entre le Modèle et la Vuela Vue

Reçoit les Reçoit les événements de la événements de la Vue et gère les Vue et gère les actions de l'usager actions de l'usager

accès en lecture aux

accès en lecture aux

donnéesdonnées

notification

notification

événementsévénements

mise à

jour

mise à

jour

chan

gemen

t des

donn

ées

chan

gemen

t des

donn

ées

Échages de Échages de donnéesdonnées

Présentation découpléePrésentation découplée

mise à jourmise à jour

MM

ModèleModèle: :

Données de l'application Données de l'application (POJOs) Notifie les (POJOs) Notifie les changements du modèle changements du modèle par des événements par des événements transmis aux vues transmis aux vues abonnées abonnées


GUI – Patrons de conception - GUI – Patrons de conception - ObservateurObservateur

* Patron observateur relie MV et VC dans le patron MVC* Patron observateur relie MV et VC dans le patron MVC

Source figure : R. Dewsbury 2008 – Chap.2, p.96Source figure : R. Dewsbury 2008 – Chap.2, p.96

Le Modèle utilise le patron de conception Observateur (Observer Pattern) pour informer la Le Modèle utilise le patron de conception Observateur (Observer Pattern) pour informer la Vue/Contrôleur du changement des données et bien découpler la Vue du Modèle* Vue/Contrôleur du changement des données et bien découpler la Vue du Modèle*

Ainsi, différents éléments du Modèle servent de sujets ou données observables (Subjects) à Ainsi, différents éléments du Modèle servent de sujets ou données observables (Subjects) à un ensemble d'observateurs (Observers) contenus dans les Vues/Contrôleurs qui sont en un ensemble d'observateurs (Observers) contenus dans les Vues/Contrôleurs qui sont en quelque sorte abonnés aux modifications des données du modèle.quelque sorte abonnés aux modifications des données du modèle.

Programmation événementielle qui favorise un découplage des composants Programmation événementielle qui favorise un découplage des composants

Compromis entre un petit nombre d'événements généraux du genre « quelque chose » a Compromis entre un petit nombre d'événements généraux du genre « quelque chose » a changé dans le modèle (granularité grossière) et un grand nombre de petits événements changé dans le modèle (granularité grossière) et un grand nombre de petits événements reliés à des éléments très précis du modèle (granularité fine).reliés à des éléments très précis du modèle (granularité fine).


GUI – Patrons de conception - GUI – Patrons de conception - CompositeComposite


Patron Composite (ou Object Composite)Patron Composite (ou Object Composite)

Facilite la création de WidgetsFacilite la création de Widgets

S'utilise chaque fois qu'on crée un nouveau widget à partir de widgets existantsS'utilise chaque fois qu'on crée un nouveau widget à partir de widgets existants

Offre un meilleur contrôle sur l'API exposéOffre un meilleur contrôle sur l'API exposé

Généralement préférable à l'utilisation de l'héritageGénéralement préférable à l'utilisation de l'héritage

* Source : http://fr.wikipedia.org/wiki/Objet_composite* Source : http://fr.wikipedia.org/wiki/Objet_composite


GUI – Patrons de conception - GUI – Patrons de conception - CompositeComposite

class MonPremierComposite extends Composite {

private VerticalPanel conteneur = new VerticalPanel();

private Label monTitre = new Label();

private TextBox maZoneTexte = new TextBox();

// Constructeur

public MonPremierComposite() {

conteneur.add(monTitre);

conteneur.add(maZoneTexte);

initWidget(conteneur);

}

}


Communication client-serveur & AjaxCommunication client-serveur & Ajax



Ajax – Ajax – Diagramme de collaborationDiagramme de collaboration

Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php


Ajax – Diagramme de séquenceAjax – Diagramme de séquence

Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php

En mode asynchrone, l'exécution dans le fureteur sur le poste client se poursuit sans attendre la réponse du Serveur. La réponse sera traitée par une fonction de retour (Callback) quand elle arrivera. L'état de la requête est donné par l'attribut readyState de l'objet XMLHttpRequest.

En mode synchrone, le fureteur est gelé en attendantla réponse du serveur.


Communication avec le serveur & AjaxCommunication avec le serveur & Ajax

Le RPC (« Remote Procedure Call »), appel de procédure à Le RPC (« Remote Procedure Call »), appel de procédure à distancedistance

RPC rend facile l'échange d'objets Java ou POJOS (sérialisés) RPC rend facile l'échange d'objets Java ou POJOS (sérialisés) entre le code-client et le code-serveurentre le code-client et le code-serveur

Fournit une procédure automatique de sérialisation des objetsFournit une procédure automatique de sérialisation des objets

Autres outils Ajax :Autres outils Ajax :

HTTPRequestHTTPRequest

RequestBuilderRequestBuilder

FormPanelFormPanel

Support de : Support de :

XMLXML

JSON (JavaScript Object Notation)JSON (JavaScript Object Notation)


Compilation & déploiement serveur RPCCompilation & déploiement serveur RPC

gwt-user.jargwt-user.jar gwt-servlet.jargwt-servlet.jarAutres .jarAutres .jar

serveurs sansserveurs sansrestrictionsrestrictions

Code JavaCode Java ServeurServeur (servlet)(servlet)

MonServiceMonService ImplImpl

Interfaces clientInterfaces client JavaJava

MonServiceMonService MonServiceMonService

AsyncAsync

Données àDonnées à ÉchangerÉchanger

MesDonneeMesDonnee DODO

WEB-INF/WEB-INF/classes/../client/

MonServiceImplMonServiceImpl(servlet)(servlet)

MonServiceImplMonServiceImpl(servlet)(servlet)

EclipseEclipse

Configuration Configuration web.xmlweb.xml

Configuration Configuration web.xmlweb.xml

gwt-servlet.jargwt-servlet.jargwt-servlet.jargwt-servlet.jar

lib/

Model/Model/ MesDonneesDOMesDonneesDOServices/Services/ MonService MonService MonServiceAsyncMonServiceAsync

classes/../server/Compilateur Compilateur JavaJava


Client léger HTML vs client riche AjaxClient léger HTML vs client riche Ajax


Serveuravec état

(statefull)

Serveursans état

(stateless)

Pas d'état persistant entre les transactions qui sont

considérées comme indépendantes

Client HTML(fureteur) sans état(stateless)

Pas d'état persistant entre les transactions qui sont

considérées comme indépendantes

Client JavaScript(fureteur) avec état(statefull)


Appel de procédure à distanceAppel de procédure à distance

J


GWT offre le très utile mécanisme d'appel de procédure à distance ou RPCGWT offre le très utile mécanisme d'appel de procédure à distance ou RPC

(Remote Procedure Call), comme moyen de communiquer avec les services(Remote Procedure Call), comme moyen de communiquer avec les services

hébergés sur un serveur JEE. Client et serveur parlent alors le même langage, hébergés sur un serveur JEE. Client et serveur parlent alors le même langage, i.e. le Javai.e. le Java

Pratique! Le client et le serveur parlent le même langage (Java)Pratique! Le client et le serveur parlent le même langage (Java)


RPC (Remote Procedure Call)RPC (Remote Procedure Call)import com.google.gwt.user.client.rpc.IsSerializable;import com.google.gwt.user.client.rpc.IsSerializable;

public class MesDonneesDO implements IsSerializable {public class MesDonneesDO implements IsSerializable {

//...//...

}}

Un objet Java MesDonneesDO à échangerUn objet Java MesDonneesDO à échanger

Une deuxième interface dite asynchrone spécifie getReponseMonservice( ) mais avec un paramètre Une deuxième interface dite asynchrone spécifie getReponseMonservice( ) mais avec un paramètre supplémentaire sous la forme d'une procédure de rappel (« Callback ») que le code-client utilisera pour supplémentaire sous la forme d'une procédure de rappel (« Callback ») que le code-client utilisera pour appeler le service. appeler le service.

Une première interface définit le serviceUne première interface définit le serviceimport com.google.gwt.user.client.rpc.RemoteService;import com.google.gwt.user.client.rpc.RemoteService;

public interface MonService extends RemoteService {public interface MonService extends RemoteService {

MesDonneesDO getReponseMonService(String requete);MesDonneesDO getReponseMonService(String requete);

}}

import com.google.gwt.user.client.rpc.AsyncCallback;import com.google.gwt.user.client.rpc.AsyncCallback;

public interface MonServiceAsync {public interface MonServiceAsync {

public void getReponseMonService(String requete,public void getReponseMonService(String requete,

AsyncCallback maProcedureDeRappel);AsyncCallback maProcedureDeRappel);

}}


import com.google.gwt.user.server.rpc.RemoteServiceServlet;import com.google.gwt.user.server.rpc.RemoteServiceServlet;import qc.ets.web2.gwt.client.MesDonneesDO; import qc.ets.web2.gwt.client.MesDonneesDO; import qc.ets.web2.gwt.client.MonService;import qc.ets.web2.gwt.client.MonService;public class MonServiceImpl extends RemoteServiceServlet implements MonService {public class MonServiceImpl extends RemoteServiceServlet implements MonService {

public MesDonneesDO getReponseMonService(String requete) {public MesDonneesDO getReponseMonService(String requete) { if (requete.length() < 1) {if (requete.length() < 1) { throw new IllegalArgumentException("Requete invalide.");throw new IllegalArgumentException("Requete invalide."); }} MesDonneesDO resultat = new MesDonneesDO();MesDonneesDO resultat = new MesDonneesDO(); resultat.setDonnees("...");resultat.setDonnees("..."); if ( isInvalide( resultat )) {if ( isInvalide( resultat )) {

return null;return null;}}

return resultat;return resultat;}}public boolean isInvalide(MesDonneesDO resultat) {public boolean isInvalide(MesDonneesDO resultat) {

Return true; // à modifierReturn true; // à modifier}}

}}

Classe à implémenter du côté serveur hérite de Classe à implémenter du côté serveur hérite de com.google.gwt.user.server.rpc.RemoteServiceServletcom.google.gwt.user.server.rpc.RemoteServiceServlet

RPC - Code-serveurRPC - Code-serveur


public class MonClientRPC implements EntryPoint {public class MonClientRPC implements EntryPoint {public void onModuleLoad() {public void onModuleLoad() {

final Button bouton = new Button("Appel RPC");final Button bouton = new Button("Appel RPC");final MonServiceAsync serviceProxy = final MonServiceAsync serviceProxy =

(MonServiceAsync)GWT.create(qc.ets.web2.gwt.client.MonService.class);(MonServiceAsync)GWT.create(qc.ets.web2.gwt.client.MonService.class); ServiceDefTarget pointService = (ServiceDefTarget) serviceProxy;ServiceDefTarget pointService = (ServiceDefTarget) serviceProxy; pointService.setServiceEntryPoint(GWT.getModuleBaseURL() + "/reponseService");pointService.setServiceEntryPoint(GWT.getModuleBaseURL() + "/reponseService");

bouton.addClickListener(new ClickListener( ) {bouton.addClickListener(new ClickListener( ) {public void onClick(Widget emetteur) {public void onClick(Widget emetteur) {

AsyncCallback maProcedureDeRappel = new AsyncCallback() { AsyncCallback maProcedureDeRappel = new AsyncCallback() { public void onSuccess(Object resultat) {public void onSuccess(Object resultat) {

MesDonneesDO resultatDO = (MesDonneesDO) resultat;MesDonneesDO resultatDO = (MesDonneesDO) resultat;System.out.println("*** SUCCES RPC ***\n" + resultatDO.getDonnees());System.out.println("*** SUCCES RPC ***\n" + resultatDO.getDonnees());

}}public void onFailure(Throwable erreur) {public void onFailure(Throwable erreur) {

System.out.println("*** ERREUR RPC ***" + erreur.getMessage());System.out.println("*** ERREUR RPC ***" + erreur.getMessage());}}

};};serviceProxy.getReponseMonService("Requete bidon", maProcedureDeRappel);serviceProxy.getReponseMonService("Requete bidon", maProcedureDeRappel);

}});}});RootPanel.get("emprise1").add(bouton);RootPanel.get("emprise1").add(bouton);

}}}}

Le client n'est pas encore connecté au service. Nous pouvons faire cela en ajoutant un Le client n'est pas encore connecté au service. Nous pouvons faire cela en ajoutant un récepteur (Listener) à un élément de l'interface, ce qui peut être fait avec une classe interne.récepteur (Listener) à un élément de l'interface, ce qui peut être fait avec une classe interne.

RPC - Code-clientRPC - Code-client


Intégration facile aux APIs GoogleIntégration facile aux APIs Google


Intégration facile aux APIs GoogleIntégration facile aux APIs Google Google offre un riche écosystème d'APIs en source Google offre un riche écosystème d'APIs en source

librelibre Androïd : plateforme Java en source libre pour la Androïd : plateforme Java en source libre pour la

téléphonie intelligentetéléphonie intelligente AppEngine : hébergement d'applications Java dans le AppEngine : hébergement d'applications Java dans le

nuagenuage OpenSocial : norme libre pour les sites sociauxOpenSocial : norme libre pour les sites sociaux Google Maps : services de cartes et géolocationGoogle Maps : services de cartes et géolocation Google Ajax Searh APIs : le moteur Google SearchGoogle Ajax Searh APIs : le moteur Google Search Google Gears API : BD locale et navigation hors ligneGoogle Gears API : BD locale et navigation hors ligne Google Language API : services de traductionGoogle Language API : services de traduction YouTube widget ?YouTube widget ?


Démo – Bâtir desDémo – Bâtir des applications GWT applications GWT

GWTGWTen Actionen Action



Créer un squelette d'application GWTCréer un squelette d'application GWT

G G W W TT

GWT crée automatiquement un code-client GWT crée automatiquement un code-client rudimentairerudimentaire

Vous pouvez ensuite mettre de la chair sur ce Vous pouvez ensuite mettre de la chair sur ce squelette dans le but de créer une application Web squelette dans le but de créer une application Web plus sophistiquéeplus sophistiquée



Créer un squelette d'application GWTCréer un squelette d'application GWT

public class Bonjour implements EntryPoint {public class Bonjour implements EntryPoint {

public void onModuleLoad() {public void onModuleLoad() {

Button bouton = new Button("Cliquez-moi!",Button bouton = new Button("Cliquez-moi!",

new ClickListener() {new ClickListener() {


Window.alert("Bonjour GWT");Window.alert("Bonjour GWT");

}}

});});

RootPanel.get().add(bouton);RootPanel.get().add(bouton);

}}

}}


Enrichir une page webEnrichir une page web

GWT permet d'ajouter des composants graphiques GWT permet d'ajouter des composants graphiques interactifs dans une page Webinteractifs dans une page Web

Un composant GWT peut être intégré dans n'importe Un composant GWT peut être intégré dans n'importe quelle page HTML, ainsi l'application continue à quelle page HTML, ainsi l'application continue à ressembler à une page Webressembler à une page Web

Tout fichier HTML incluant un certain jeu de balises Tout fichier HTML incluant un certain jeu de balises peut servir de support à une application GWTpeut servir de support à une application GWT

GWT ne cherche pas exclusivement à ressembler à GWT ne cherche pas exclusivement à ressembler à une application bureautique en exécution localeune application bureautique en exécution locale

Le résultat est juste une meilleure application WebLe résultat est juste une meilleure application Web Exemple : application d'ouverture de session (login)Exemple : application d'ouverture de session (login)


Créer des applications Web similaires à Créer des applications Web similaires à des applications bureautiques localesdes applications bureautiques locales

Ouverture de plusieurs fenêtres à la fois dans le Ouverture de plusieurs fenêtres à la fois dans le navigateurnavigateur

Déplacement des fenêtres dans le navigateur, Déplacement des fenêtres dans le navigateur, redimensionnement et défilement des fenêtresredimensionnement et défilement des fenêtres

Glisser et déposer des contenusGlisser et déposer des contenus Applications Web se comportant « comme des Applications Web se comportant « comme des

applications bureautiques locales »applications bureautiques locales »


Qui peut le mieux profiter de GWT ?Qui peut le mieux profiter de GWT ?

J' GWT



Designers WebDesigners Web– GWT utilise les feuilles de style CSSGWT utilise les feuilles de style CSS

– Doivent apprendre JavaDoivent apprendre Java

Développeurs d'applications Web Développeurs d'applications Web – Une application GWT s'exécute sur le client plutôt que d'être Une application GWT s'exécute sur le client plutôt que d'être

contrôlée entièrement par le serveurcontrôlée entièrement par le serveur

– Doivent maîtriser les technologies du client et de présentation Doivent maîtriser les technologies du client et de présentation

Développeurs Ajax Développeurs Ajax (gourous JavaScript)(gourous JavaScript)

– GWT intègre facilement le code JavaScript grâce à JSNIGWT intègre facilement le code JavaScript grâce à JSNI

– Doivent laisser tomber certaines habitudes du codage JS Doivent laisser tomber certaines habitudes du codage JS

Développeurs d'applications JavaDéveloppeurs d'applications Java– Réaliser des Web-app. avec des outils et un environnement familierRéaliser des Web-app. avec des outils et un environnement familier

– Doivent apprendre CSS & les restrictions particulières des Web-app.Doivent apprendre CSS & les restrictions particulières des Web-app.

Qui peut le mieux profiter de GWT ?Qui peut le mieux profiter de GWT ?


Des emplois...Des emplois...

* Source : http://www.indeed.com


GWT vs autres solutions Web richeGWT vs autres solutions Web riche



Outils purs JavaScriptOutils purs JavaScript (Scriptaculous, Prototype, DWR, JQuery, YUI, etc.)(Scriptaculous, Prototype, DWR, JQuery, YUI, etc.)

Facilitent beaucoup la programmation JavaScript mais ça reste du JavaScript!Facilitent beaucoup la programmation JavaScript mais ça reste du JavaScript!

JavaServer FacesJavaServer Faces -- Norme JEE, canevas d'applications Web populaire, basé Norme JEE, canevas d'applications Web populaire, basé sur le serveur, plutôt complexe sur le serveur, plutôt complexe

JavaFXJavaFX - - Trop tôt pour se prononcer, exige JVM, langage à scriptTrop tôt pour se prononcer, exige JVM, langage à script

Java AppletJava Applet - - TTrop lourd, exige JVM, doivent beaucoup s'améliorer rop lourd, exige JVM, doivent beaucoup s'améliorer

ZKZK -- Rapide et facile à programmer, basé sur le serveur, licence GPL Rapide et facile à programmer, basé sur le serveur, licence GPL

Adobe Flash, Flex, AIRAdobe Flash, Flex, AIR (Adobe Integrated Runtime) (Adobe Integrated Runtime) et OpenLazslo et OpenLazslo

Basé sur le serveur, +/- propriétaire, exige plugiciel Flash, langage à scriptsBasé sur le serveur, +/- propriétaire, exige plugiciel Flash, langage à scripts

Micro$oft SilverlightMicro$oft Silverlight -- Pas Java, propriétaire & basé Windows Pas Java, propriétaire & basé Windows

Windows...Volta, 5 décembreWindows...Volta, 5 décembre 2007, une copie 2007, une copie GWT pour .NETGWT pour .NEThttp://labs.live.com/voltahttp://labs.live.com/volta

RubyRuby - - Innovateur, mais toujours à base de pages et basé sur le serveur..Innovateur, mais toujours à base de pages et basé sur le serveur..

GWT vs autres solutions Web richeGWT vs autres solutions Web riche

http://labs.live.com/volta


GWTGWT - - Avantages & inconvénientsAvantages & inconvénients



GWT - AvantagesGWT - Avantages Bon pour enrichir des applications Web avec Ajax et créer Bon pour enrichir des applications Web avec Ajax et créer

des applications Web de « style bureautique »des applications Web de « style bureautique »

Un seul langage: JAVAUn seul langage: JAVA

Développement et mise au point rapide dans des EDIs Développement et mise au point rapide dans des EDIs

favorisant une bonne productivité et qualité du codefavorisant une bonne productivité et qualité du code

Riche bibliothèque de composants (~ SWING)Riche bibliothèque de composants (~ SWING)

Très bon support AjaxTrès bon support Ajax

Performant & économe en ressources réseau & serveurPerformant & économe en ressources réseau & serveur

Code source libre, licence Apache 2, bien documentéCode source libre, licence Apache 2, bien documenté

Supporté par GOOGLE... et l'écosystème des outils GoogleSupporté par GOOGLE... et l'écosystème des outils Google

Pas magique mais GWT a le potentiel de devenir le Pas magique mais GWT a le potentiel de devenir le

« prochain gros truc »« prochain gros truc »


GWT - InconvénientsGWT - Inconvénients

JS

Ajax


GWT - InconvénientsGWT - Inconvénients Nécessite que le fureteur exécute JavaScriptNécessite que le fureteur exécute JavaScript Exige la connaissance de la programmation JavaExige la connaissance de la programmation Java Exige une séparation nette client et serveurExige une séparation nette client et serveur Les composants (Widgets) sont de sources et de Les composants (Widgets) sont de sources et de

qualités inégalesqualités inégales Dépend des performances du transcompilateurDépend des performances du transcompilateur Quelques problèmes de compatibilité entre les Quelques problèmes de compatibilité entre les

fureteurs Web, surtout au niveau des CSSfureteurs Web, surtout au niveau des CSS Certains problèmes demandent une expertise JSCertains problèmes demandent une expertise JS L'aspect sécurité est à surveillerL'aspect sécurité est à surveiller GWT ne va pas résoudre « magiquement » tous les GWT ne va pas résoudre « magiquement » tous les

problèmes avec Ajax ou le Web 2.0problèmes avec Ajax ou le Web 2.0


Google Web Toolkit Applicationspar Ryan Dewsbury608 pagesPrentice Hall (15 décembre, 2007)www.gwtapps.com

GWT in Action: Easy Ajax with the Google Web Toolkitpar Robert Hanson, Adam Tacy600 pagesManning Publications (5 juin, 2007)www.manning.com/hanson/

Ressources - LivresRessources - Livres


Ressources - LivresRessources - Livres

GWT in Practicepar Robert T. Cooper, Charlie E. Collins358 pagesManning Publications (12 mai, 2008)www.manning.com/cooper/

Google Web Toolkit Solutions : More Cool & Useful Stuffpar David Geary, Rob Gordon408 pagesPrentice Hall(17 novembre, 2007)www.coolandusefulgwt.com


Ressources - OutilsRessources - Outils

GWT DesignerGWT Designer

Éditeur graphiqueÉditeur graphique

Plugiciel EclipsePlugiciel Eclipse

www.instantiations.com/gwtdesignerwww.instantiations.com/gwtdesigner

SitesSites http://code.google.com/webtoolkit/http://code.google.com/webtoolkit/

http://groups.google.com/group/Google-Web-Toolkithttp://groups.google.com/group/Google-Web-Toolkit

www.ongwt.comwww.ongwt.com

http://code.google.com/webtoolkit/

http://groups.google.com/group/Google-Web-Toolkit

http://www.ongwt.com/


QuestionsQuestions

??


Technology

GWT Approfondissement - GTI780 & MTI780 - ETS - A09