gwt présentation-jug-14avr2011

117
GWT (Google Web Toolkit) GWT (Google Web Toolkit) réalisation facile d'applications réalisation facile d'applications Web riches en Java Web riches en Java JUG Montréal JUG Montréal 14 avril 2011 14 avril 2011 Présentation au JUG Montréal par Claude Coulombe

Upload: montreal-jug

Post on 10-Jun-2015

4.056 views

Category:

Technology


0 download

DESCRIPTION

Présentation GWT donnée par Claude Coulombe au Montreal JUG le jeudi 14 avril 2011

TRANSCRIPT

Page 1: Gwt présentation-jug-14avr2011

GWT (Google Web Toolkit)GWT (Google Web Toolkit)réalisation facile d'applications réalisation facile d'applications

Web riches en JavaWeb riches en Java

JUG MontréalJUG Montréal 14 avril 201114 avril 2011

Présentation au JUG Montréal

par

Claude Coulombe

Page 2: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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 et facile d'applications développement rapide et facile d'applications Web 2.0 et AJAX. Web 2.0 et AJAX.

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

Page 3: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Web 1.0Web 1.0 – Cliquez & attendez! – Cliquez & attendez!

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

Page 4: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Web 2.0 – Web 2.0 – « L'expérience-utilisateur »« L'expérience-utilisateur »

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

Page 5: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

AjaxAjax – Une véritable percée! – Une véritable percée!

AJAXAJAX

Le premier à utiliser le terme AJAXfut Jesse James Garrett en février 2005

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

Page 6: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Ajax (Asynchronous JavaScript & XML) Ajax (Asynchronous JavaScript & XML)‏ ‏ Fini le pénible rechargement de pages!Fini le pénible rechargement de pages! Réalise des requêtes asynchrones au serveur et Réalise des requêtes asynchrones au serveur et

fait la mise-à-jour de la page Web sans faire de fait la mise-à-jour de la page Web sans faire de chargement completchargement complet

Applications Web plus réactives et plus Applications Web plus réactives et plus dynamiquesdynamiques

Objet XMLHttpRequest inventé par M$Objet XMLHttpRequest inventé par M$ Basé sur du code-client en JavaScriptBasé sur du code-client en JavaScript Aujourd'hui, Ajax désigne les technologies Web du Aujourd'hui, Ajax désigne les technologies Web du

fureteur : JavaScript, HTML/DOM, CSSfureteur : JavaScript, HTML/DOM, CSS

AjaxAjax – Une véritable percée! – Une véritable percée!

Page 7: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Créer des applications Web richesCréer des applications Web riches

Applications Web semblables à des applications Applications Web semblables à des applications bureautiques en exécution locale (Desktop Like)bureautiques en exécution locale (Desktop Like)

Interfaces rapides et réactivesInterfaces rapides et réactives 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

Page 8: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Pourquoi pas JavaScript ?Pourquoi pas JavaScript ?

Euh!..., tout allait bien... JavaScript tenait le coup...puis soudain... juste une p'tite refacto de rien… la catastrophe !?!@;&$!!??

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

Page 9: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

& longs chargements& 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 pas JavaScript ?Pourquoi pas JavaScript ?

Page 10: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Made in JavaScript

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

Pourquoi pas JavaScript ?Pourquoi pas JavaScript ?

Page 11: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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 pas JavaScript ?Pourquoi pas JavaScript ?

Page 12: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal * Source image : http://www.sun.com* Source Clipart : http://www.clipart.com

JavaJava

Et si on utilisait Java...Et si on utilisait Java...

Page 13: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Le langage du génie logiciel Le langage du génie logiciel

Véritable langage de POOVéritable langage de POO

Typage statique => trouver les erreurs à la compilation pas à l'exécutionTypage statique => trouver les erreurs à la compilation pas à l'exécution

Espace de nommage, (Package) => moins de risque de collisionEspace de nommage, (Package) => moins de risque de collision

Éprouvé dans la réalisation de logiciels / systèmes complexesÉprouvé dans la réalisation de logiciels / systèmes complexes

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

Multiples langages dans la JVM : Scala, Groovy, Jruby, Jython, JavaScript...Multiples langages dans la JVM : Scala, Groovy, Jruby, Jython, JavaScript...

Riche écosystème, nombreux outils et EDIsRiche écosystème, nombreux outils et EDIs

+ bibliothèques et socles d'applications+ bibliothèques et socles d'applications

+ outils en logiciels libres dont Java lui-même+ outils en logiciels libres dont Java lui-même

puissants EDIs* (Eclipse, NetBeans ou IntelliJ)puissants EDIs* (Eclipse, NetBeans ou IntelliJ)

débogueur / éditeur de code / refactorisation / analyse du codedébogueur / éditeur de code / refactorisation / analyse du code

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

Abondante documentation sur le Web, + livres et + cours & formationsAbondante documentation sur le Web, + livres et + cours & formations

Et si on utilisait Java...Et si on utilisait Java...

Page 14: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GWT = Ajax + Génie Logiciel GWT = Ajax + Génie Logiciel

GWT =GWT =

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

AJAXAJAX

++

Génie logicielGénie logiciel

Page 15: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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 Boîte à outils Ajax pour des applications Web riches Boîte à outils Ajax pour des applications Web riches

« orientées client »« orientées client » Développement rapide d'applications Web riches par des Développement rapide d'applications Web riches par des

programmeurs Java ou pour de gros projets où JavaScript programmeurs Java ou pour de gros projets où JavaScript montre ses limitesmontre ses limites

Transcompilateur (cross-compiler) de Java à JavaScriptTranscompilateur (cross-compiler) de Java à JavaScript Bon à la fois pour enrichir des applications Web avec des Bon à la fois pour enrichir des applications Web avec des

composants Ajax et pour créer des applications similaires à composants Ajax et pour créer des applications similaires à des applications bureautiques classiques (desktop-like) mais des applications bureautiques classiques (desktop-like) mais qui tournent dans un fureteur Webqui tournent dans un fureteur Web

Logiciel libre (licence Apache 2)Logiciel libre (licence Apache 2)

Page 16: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GWT - Du pur Java!GWT - 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

Page 17: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Support du cycle de vie complet du logicielSupport du cycle de vie complet du logiciel Outil interactif de construction d'IU (Outil interactif de construction d'IU (GWT DesignerGWT Designer)) Outil de construction d'IU déclaratif XML (Outil de construction d'IU déclaratif XML (UiBinderUiBinder)) Outil de mesure des performances (Outil de mesure des performances (Speed TracerSpeed Tracer)) Plugiciel pour Plugiciel pour EclipseEclipse

Support au débogageSupport au débogage

Mise au point & débogage en mode devMise au point & débogage en mode dev

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

Restructuration / refactorisation (refactoring) Restructuration / refactorisation (refactoring)‏ ‏

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

Journalisation (logging) Journalisation (logging)‏ ‏

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

Composite / MVC / MVP / commande / bus d'événementsComposite / MVC / MVP / commande / bus d'événements Support de Support de JUnitJUnit Support de Support de AppEngineAppEngine et autres APIs de Google et autres APIs de Google

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

GWT = Ajax + Génie Logiciel GWT = Ajax + Génie Logiciel

Page 18: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

Page 19: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GWT en « mode dev »GWT en « mode dev » - - DéveloppementDéveloppement

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

Page 20: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GWT en « mode dev »GWT en « mode dev » - - DéveloppementDéveloppement

Dans Eclipse, une application GWT peut Dans Eclipse, une application GWT peut s'exécuter en « mode dev » s'exécuter en « mode dev » (“Development Mode”) (”Development Mode“)‏ ‏ En « mode dev », la JVM exécute le code GWT En « mode dev », 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 Le « mode dev » facilite la mise-au-point :Le « mode dev » facilite la mise-au-point :

Éditer le code-sourceÉditer le code-sourceRafraîchirRafraîchirExaminer les résultatsExaminer les résultats

Page 21: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GWT en « mode Web » - DéploiementGWT en « mode Web » - Déploiement Une fois testé en « mode dev », vous pouvez Une fois testé en « mode dev », vous pouvez

compiler votre code source Java en JavaScript et compiler votre code source Java en JavaScript et déployer votre application Webdéployer votre application Web

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

Une fois compilé le code-client est uniquement du Une fois compilé le code-client est uniquement du pur JavaScript et du HTMLpur 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. Tomcat répertoire « war » sur le serveur Web, i.e. Tomcat

Page 22: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GWT DesignerGWT Designer

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

Page 23: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Éditeur graphique interactif d'IUÉditeur graphique interactif d'IU Racheté par Google de la société Instantiations Racheté par Google de la société Instantiations Entièrement intégré à Eclipse via un plugicielEntièrement intégré à Eclipse via un plugiciel Génération de code bidirectionnelleGénération de code bidirectionnelle Alternance entre la vue Source et la vue DesignAlternance entre la vue Source et la vue Design Palette de composants avec glisser-déposerPalette de composants avec glisser-déposer Vue Structure avec l'arbre des composants et un Vue Structure avec l'arbre des composants et un

panneau pour l'édition des propriétéspanneau pour l'édition des propriétés I18NI18N Création de composants réutilisables (Composite)Création de composants réutilisables (Composite)

GWT DesignerGWT Designer

Page 24: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

UiBinderUiBinder

Page 25: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Outil de conception d'interface-utilisateur à partir d'une Outil de conception d'interface-utilisateur à partir d'une représentation XML, sans programmationreprésentation XML, sans programmation

Facilite le découplage entre la disposition du contenu en Facilite le découplage entre la disposition du contenu en XML, le code du comportement en Java et l'apparence XML, le code du comportement en Java et l'apparence gouvernée par des feuilles de style CSSgouvernée par des feuilles de style CSS

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"

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

<g:HTMLPanel width="450px" height="300px">

<g:VerticalPanel width="450px" height="300px" horizontalAlignment="ALIGN_CENTER">

<g:Cell horizontalAlignment="ALIGN_CENTER">

<g:Label styleName="{style.titreJeu}" text="Jeux des trois portes (Monty Hall Problem)" width="450px" height="20px"

horizontalAlignment="ALIGN_CENTER"/>

</g:Cell>

<g:Cell horizontalAlignment="ALIGN_CENTER">

UiBinderUiBinder

Page 26: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Speed TracerSpeed Tracer (extension dans Chrome)(extension dans Chrome)

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

Page 27: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Comprendre GWTComprendre GWT

GWTGWT

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

Page 28: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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 fureteur Web

Le code (en Java ou tout autre langage) qui s'exécute sur le serveur est responsable de la logique de l'application.

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

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

Page 29: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Structure d'un projet GWTStructure d'un projet GWT

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

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

Page 30: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

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

Page 31: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

Bibliothèque IUG

Widgets &Panels

Communicationavec le serveurRPC & Ajax

Analyseur XML

Gestion del'historique

Intégration à JUnit

GWT APIGWT API

Trans compilateur

Java àJavaScript

Interface Native

JavaScriptJSNI

Bibliothèqued'émulation

JRE

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

Page 32: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

JavaScriptJavaScript

JSNIJSNI

BibliothèqueBibliothèque

d'émulationd'émulation

JREJRE

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

Note : Transcompilateur GWT Note : Transcompilateur GWT

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

Page 33: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Transcompilateur Java à JavaScript Transcompilateur Java à JavaScript

Java

JavaScript

Run Everywhere!

Write Once...

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

Page 34: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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 que Le JavaScript produit est généralement plus rapide que du JavaScript écrit à la main* 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

Page 35: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Transcompilateur Java à JavaScript Transcompilateur Java à JavaScript

Transcompilateur Transcompilateur

gwt-user.jargwt-user.jar gwt-dev.jargwt-dev.jar

Autres .jarAutres .jar

Compatibles Compatibles

avec GWTavec GWT

ConfigurationConfiguration

ModuleModule

MonProjet.gwtMonProjet.gwt

.xml.xml

Code Java Code Java

MonProjetMonProjet

.java.java

RessourcesRessources

MonProjet. htmlMonProjet. html

MonProjet.css,MonProjet.css,

.png, .jpg, .gif.png, .jpg, .gif

CodeCode

JavaScriptJavaScript

MonProjet.jsMonProjet.js

RessourcesMonPrRessourcesMonProjet.ojet.

htmlhtml

MonProjet.css,MonProjet.css,

.png, .jpg, .gif.png, .jpg, .gif

Page 36: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

Ainsi, ceciAinsi, cecipublic 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');

}}

Transcompilateur Java à JavaScript Transcompilateur Java à JavaScript

Page 37: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

Page 38: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

« 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é!

Page 39: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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.sqlRestriction 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

Page 40: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Made in JavaScript

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

Pourquoi pas JavaScript?Pourquoi pas JavaScript?

Page 41: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

JSNI : JavaScript Native InterfaceJSNI : JavaScript Native InterfaceIntégration facile avec des bibliothèques JavaScript Intégration facile avec des bibliothèques JavaScript externes grâce au JavaScript Native Interface (JSNI) externes grâce au JavaScript Native Interface (JSNI)‏ ‏Interagir directement avec JavaScript (accès natif) à partir Interagir directement avec JavaScript (accès natif) à partir de Java et vice-versa de Java et vice-versa Inclusion automatique des bibliothèques JavaScriptInclusion automatique des bibliothèques JavaScriptJavaScript Overlay pour simplifier l'intégration de JavaScript Overlay pour simplifier l'intégration de prototypes JavaScript dans GWTprototypes JavaScript dans GWT

// Déclaration d'une méthode JavaScript en Java...// Déclaration d'une méthode JavaScript 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');

}-*/;}-*/;

Page 42: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

JSNI : JavaScript Type Overlay JSNI : JavaScript Type Overlay JavaScript Type Overlay pour simplifier l'intégration de prototypes JavaScript Type Overlay pour simplifier l'intégration de prototypes JavaScript dans GWTJavaScript dans GWTUne structure de données JSON (JavaScript Object Notation)Une structure de données JSON (JavaScript Object Notation)

var electionsJSON = [var electionsJSON = [

{ "Prenom" : "Gilles", "NomFamille" : "Duceppe" }, { "Prenom" : "Michael", "NomFamille" : "Ignatieff" },{ "Prenom" : "Gilles", "NomFamille" : "Duceppe" }, { "Prenom" : "Michael", "NomFamille" : "Ignatieff" },

{ "Prenom" : "Jack", "NomFamille" : "Layton" }, { "Prenom" : "Stephen", "NomFamille" : "Harper" }{ "Prenom" : "Jack", "NomFamille" : "Layton" }, { "Prenom" : "Stephen", "NomFamille" : "Harper" }

];];

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

class Politiciens extends JavaScriptObject {class Politiciens 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 Politiciens() { } protected Politiciens() { }

// 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

Page 43: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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() {

Politiciens p = getPremierPoliticien();Politiciens p = getPremierPoliticien();

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

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 Politiciens getPremierPoliticien() /*-{private native Politiciens getPremierPoliticien() /*-{

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

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

}-*/;}-*/;

}}

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

Page 44: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

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

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

Page 45: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Bibliothèque de composants d'IUBibliothèque de composants d'IU

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

Page 46: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

IU IU – Programmation par événements– Programmation par événementsEssentiellement de la programmation par événementsEssentiellement de la programmation par événementsUne 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

Page 47: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

IU - Gestion des événementsIU - Gestion des événements GWT utilise le concept de gestionnaire d'événement GWT utilise le concept de gestionnaire d'événement

(handler interface) pour traiter les événements(handler interface) pour traiter les événements Semblable à d'autres bibliothèques Java pour la Semblable à d'autres bibliothèques Java pour la

programmation d'IU comme SWINGprogrammation d'IU comme SWING Le gestionnaire via l'interface “handler interface” Le gestionnaire via l'interface “handler interface”

définit une ou plusieurs méthodes que le widget définit une ou plusieurs méthodes que le widget appelle en réaction à un événementappelle en réaction à un événement

Button unBouton = new Button("Cliquez moi!");Button unBouton = new Button("Cliquez moi!");

unBouton.addClickHandler( new ClickHandler() {unBouton.addClickHandler( new ClickHandler() {

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

Window.alert("Bouton cliqué!");Window.alert("Bouton cliqué!");

}}

});});

Page 48: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

Page 49: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

IU – Bibliothèque de composantsIU – Bibliothèque de composantsÉ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 ), zone d'entrée de mot de passe (d'entrée de mot de passe (PasswordTextBoxPasswordTextBox), zone de texte multiligne (), zone de texte multiligne (TextAreaTextArea), zone ), zone d'édition de texte enrichi (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

Page 50: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

Page 51: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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)

Page 52: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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() {

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

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

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

}}

});});

Page 53: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

Page 54: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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();

}}

}}

});});

Page 55: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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());

}}

});});

Page 56: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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");");

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

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

// 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);

Page 57: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

Page 58: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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;}}

Page 59: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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 Note : Ne pas utiliser les CSS pour la disposition (ex. (ex. .monPetitWidget .monPetitWidget { position: absolute; }{ position: absolute; } ))

Page 60: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

I18N – InternationalisationI18N – Internationalisation

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

Page 61: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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 5 navigateurs Par exemple, puisque GWT supporte 5 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 15 versions différentes de votre application au 15 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

Page 62: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

Page 63: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

Page 64: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Communication client-serveur & AjaxCommunication client-serveur & Ajax

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

Page 65: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Ajax – Ajax – Diagramme de collaborationDiagramme de collaboration

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

Page 66: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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.

Page 67: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Communication avec le serveur & AjaxCommunication avec le serveur & AjaxRPC (« Remote Procedure Call ») appel de procédure à distanceRPC (« Remote Procedure Call ») ,‏ appel de procédure à distance ,‏

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)

Page 68: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

Page 69: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal * Source Clipart : http://www.clipart.com

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

Page 70: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

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

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)

Page 71: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

J

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

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)

Page 72: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

}}

Page 73: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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-serveur RPC - Code-serveur‏ ‏

Page 74: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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 récepteur 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.(Listener) à un élément de l'interface, ce qui peut être fait avec une classe interne.

RPC - Code-clientRPC - Code-client

Page 75: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

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

Page 76: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Intégration facile aux APIs GoogleIntégration facile aux APIs Google Google a un riche écosystème d'APIs en source libreGoogle a un riche écosystème d'APIs en source libre AppEngine : déploiement facile d'applications GWT AppEngine : déploiement facile d'applications GWT

dans le nuagedans le nuage Androïd : réalisation d'applications mobiles avec GWTAndroïd : réalisation d'applications mobiles avec GWT OpenSocial : réalisation facile de gadgets avec GWTOpenSocial : réalisation facile de gadgets avec GWT Google Maps APIs : services de cartes et géolocationGoogle Maps APIs : services de cartes et géolocation Google Ajax Search APIs : le moteur Google SearchGoogle Ajax Search 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 ......

Page 77: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GWT – Atelier de Gadgets!GWT – Atelier de Gadgets!

c

Compiler avec GWT pour générer le code JS du gadgetCompiler avec GWT pour générer le code JS du gadget

Déploiement facile sur un serveur Web externeDéploiement facile sur un serveur Web externe

Intégrer facilement le gadget dans un conteneur OpenSocialIntégrer facilement le gadget dans un conteneur OpenSocial

Page 78: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GWTGWT – Applications mobiles multiplateformes – Applications mobiles multiplateformes

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

Page 79: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GWTGWT – Applications mobiles multiplateformes – Applications mobiles multiplateformes Développer pour chaque plateforme une application native ou Développer pour chaque plateforme une application native ou

développer une application multiplateforme?développer une application multiplateforme?

Si l'application n'a pas besoin d'accéder à des périphériques Si l'application n'a pas besoin d'accéder à des périphériques spécifiques, de performances « temps réel » ou le dessin 3D, il est spécifiques, de performances « temps réel » ou le dessin 3D, il est préférable de créer une application multiplateforme. préférable de créer une application multiplateforme.

Dans ce contexte, le fureteur est la plateforme et les technologies Dans ce contexte, le fureteur est la plateforme et les technologies Ajax du fureteur, comme JavaScript, HTML/HTML5 et CSS sont Ajax du fureteur, comme JavaScript, HTML/HTML5 et CSS sont privilégiéesprivilégiées

La boîte à outils Ajax GWT facilite la création d'un client La boîte à outils Ajax GWT facilite la création d'un client multiplateforme sur la base d’une application web pour mobile et multiplateforme sur la base d’une application web pour mobile et d'ajouts spécifiques via les bibliothèques PhoneGap et GwtMobile d'ajouts spécifiques via les bibliothèques PhoneGap et GwtMobile

À long terme, extension de la norme HTML5 et l’accroissement À long terme, extension de la norme HTML5 et l’accroissement des performances des engins JavaScript des performances des engins JavaScript

Page 80: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

IUG – Patrons de conceptionIUG – Patrons de conception

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

Page 81: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

IUG – Patron de conception - IUG – Patron de conception - CompositeComposite

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

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

Page 82: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

IUG – Patron de conception - IUG – Patron 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);

}

}

Page 83: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

IUG – Patron de conception - IUG – Patron de conception - CommandeCommandeLe patron de conception Commande (Command Pattern) encapsule dans un objet la notion d'invocation d'une Le patron de conception Commande (Command Pattern) encapsule dans un objet la notion d'invocation d'une action ou commande souvent à être invoquée à un moment ultérieur.action ou commande souvent à être invoquée à un moment ultérieur.

Le patron comporte trois parties : l'invocateur, la commande et le récepteur.Le patron comporte trois parties : l'invocateur, la commande et le récepteur.

Le patron « Commande » permet de découpler le code qui déclenche l'action (le code d'invocation) et le code Le patron « Commande » permet de découpler le code qui déclenche l'action (le code d'invocation) et le code de l'action elle-même. de l'action elle-même.

Par exemple, les différents items d'un menu sont associés chacun à une Commande et à ses arguments. Par exemple, les différents items d'un menu sont associés chacun à une Commande et à ses arguments. Ainsi, l'item de menu ignore les détails de l'action effectuée par la Commande. Aussi utilisé pour implémenter Ainsi, l'item de menu ignore les détails de l'action effectuée par la Commande. Aussi utilisé pour implémenter le « undo ».le « undo ».

<< Interface >> Commande

+ executer()

CommandeImpl

+ executer()

Invocateur

+ événement1(...)+ événement2(...)

Récepteur

+ action1(...)+ action2(...)

Page 84: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GUI – Patron de conception - GUI – Patron 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).

Page 85: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GUI – Patron de conception - MVCGUI – Patron 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ées

donnéesnotification

notification

événementsévénements

mise

à jo

ur

mise

à jo

ur

chan

gem

ent d

es d

onné

es

chan

gem

ent d

es d

onné

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

Page 86: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Bus d'événementsBus d'événementsBus d'événements (Event Bus) : peut être vu comme Bus d'événements (Event Bus) : peut être vu comme un système téléphonique qui relie les composants de un système téléphonique qui relie les composants de l'applicationl'applicationLes composants émettent et reçoivent des Les composants émettent et reçoivent des événements (events). événements (events). Les composants peuvent réagir différemment selon le Les composants peuvent réagir différemment selon le type d'événement reçustype d'événement reçus

Page 87: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Contrôleur de l'applicationContrôleur de l'applicationLe contrôleur de l'application (Application Controller) Le contrôleur de l'application (Application Controller) est en quelque sorte le chef d'orchestre de est en quelque sorte le chef d'orchestre de l'application.l'application.Le contrôleur de l'application contient la logique de Le contrôleur de l'application contient la logique de l'applicationl'application

Page 88: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GUI - Patron de conception - MVPGUI - Patron de conception - MVPPatron MVP : Modèle-Vue-Présentateur (Model-View-Patron MVP : Modèle-Vue-Présentateur (Model-View-Presenter) Presenter)

Modèle

Présentateur

Vue

VueVue: :

Affiche les Affiche les informations et informations et achemine les achemine les actions actions (événements) (événements) de l'usagerde l'usager

ModèleModèle: :

Données du Données du composant composant (POJOs). (POJOs).

PrésentateurPrésentateur::

Communique (reçoit / Communique (reçoit / émet) avec le reste de émet) avec le reste de l'application via le bus l'application via le bus d'événements.d'événements.

Reçoit des événements Reçoit des événements de la Vue de la Vue

Communique avec le Communique avec le serveur via des servicesserveur via des services

BusÉVÉNEMENTS

SERVICES

Page 89: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GUI - Patron de conception - MVPGUI - Patron de conception - MVPModèle-Vue-Présentation (Model-View-Presenter)Modèle-Vue-Présentation (Model-View-Presenter)Inventé par Martin Fowler et promu par GoogleInventé par Martin Fowler et promu par GoogleMeilleur « découplage » / séparationMeilleur « découplage » / séparationPlus facile de répartir le code entre développeursPlus facile de répartir le code entre développeursPlus facile à tester Plus facile à tester en remplaçant la vue par une vue en remplaçant la vue par une vue factice (MockView)factice (MockView)

Le modèle contient les données à afficherLe modèle contient les données à afficherLa vue correspond à une interface d'affichage. Les La vue correspond à une interface d'affichage. Les données envoyées à la vue sont des primitives.données envoyées à la vue sont des primitives.Certains composants sont reliés au bus d'événements Certains composants sont reliés au bus d'événements alors que d'autres sont reliés à la couche de servicesalors que d'autres sont reliés à la couche de services

Page 90: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GUI - Patron de conception - MVPGUI - Patron de conception - MVPLe présentateur travaille avec des interfaces pas des Le présentateur travaille avec des interfaces pas des implémentations (HasClickHandlers, HasValue, etc.)implémentations (HasClickHandlers, HasValue, etc.)Le présentateur contient la logique du composant d'IU. Le présentateur contient la logique du composant d'IU. Il envoie les données mise-à-jour à la vue et reçoit les Il envoie les données mise-à-jour à la vue et reçoit les valeurs modifiées par la vue. valeurs modifiées par la vue. Le présentateur reçoit également les événements Le présentateur reçoit également les événements envoyés par les autres composants de l'application et envoyés par les autres composants de l'application et il émet ses propres événements via le bus il émet ses propres événements via le bus d'événements.d'événements.Le présentateur reçoit des données du ModèleLe présentateur reçoit des données du ModèleLe présenteur et la vue associée sont couplés via une Le présenteur et la vue associée sont couplés via une Interface d'Affichage Interface d'Affichage

Page 91: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Architecture Application MVPArchitecture Application MVP

Modèle

Présentateur

Vue

Modèle

Présentateur

Vue

Modèle

Présentateur

Vue

BUS D'ÉVÉNEMENTS

Contrôleur de l'Application

Service

Serveur

Service

Page 92: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

GWTGWTen Actionen Action

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

Page 93: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

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

Page 94: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

Page 95: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

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

Page 96: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

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

Page 97: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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 ClickHandler() {new ClickHandler() { public void onClick(ClickEvent event) {public void onClick(ClickEvent event) { Window.alert("Bouton cliqué!");Window.alert("Bouton cliqué!"); }}

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

Page 98: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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)

Page 99: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Créer des applications Web similaires à des Créer des applications Web similaires à des applications bureautiques en exécution localeapplications bureautiques en exécution locale

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 »

Page 100: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GWT – AGWT – Avantages pour les utilisateursvantages pour les utilisateurs

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

Page 101: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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, Flash, .Net, ni de JVMNe requiert pas de plugiciel, Flash, .Net, ni de JVM Pas de long téléchargement, ni d'installationPas de long téléchargement, ni d'installation Compatible avec tous les fureteursCompatible avec tous les fureteurs 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

Page 102: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

aniaqueGWT

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

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

Page 103: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

Page 104: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

J' GWT

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

Page 105: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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 riche et de présentation Doivent maîtriser les technologies du client riche 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 Java Développeurs d'applications Java (Swing)(Swing)

– 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 ?

Page 106: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Des emplois...Des emplois...

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

Page 107: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GWT vs autres solutions Web richeGWT vs autres solutions Web riche

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

Page 108: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Outils purs JavaScriptOutils purs JavaScript (jQuery, Scriptaculous, Prototype, YUI, Dojo, etc.) (.jQuery, Scriptaculous, Prototype, YUI, Dojo, 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, orienté serveur, plutôt complexe Norme JEE, orienté serveur, plutôt complexe

JavaFXJavaFX - - Trop peu, trop tard!, exige JVMTrop peu, trop tard!, exige JVM

Java AppletJava Applet – – Passé de mode et lourd passéPassé de mode et lourd passé, exige JVM, exige JVM

ZKZK -- Rapide et facile à programmer, orienté serveur, licence GPL Rapide et facile à programmer, orienté serveur, licence GPL

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

orienté serveur, +/- propriétaire, exige plugiciel Flash, langage à scriptsorienté serveur, +/- propriétaire, exige plugiciel Flash, langage à scripts

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

Windows Volta,Windows Volta, une copie une copie GWT pour .NET, annoncé GWT pour .NET, annoncé 2007 puis disparu...2007 puis disparu...

RubyRuby – – Innovateur (RAILS), toujours à base de pages et orienté serveur..Innovateur (RAILS), toujours à base de pages et orienté serveur..

GWT vs autres solutions Web richeGWT vs autres solutions Web riche

Page 109: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

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

Page 110: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

des applications Web riches avec des IUs complexesdes applications Web riches avec des IUs complexes

Un seul langage: JAVA + riche écosystème JavaUn seul langage: JAVA + riche écosystème Java

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

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

(Eclipse, UiBinder, GWT Designer...)(Eclipse, UiBinder, GWT Designer...)

Bonne bibliothèque de composants (~ Swing)Bonne 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 GoogleSupporté par GOOGLE... et l'écosystème Google

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

Page 111: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GWT - InconvénientsGWT - Inconvénients

JS

Ajax

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

Page 112: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

GWT - InconvénientsGWT - Inconvénients Nécessite que le fureteur exécute JavaScriptNécessite que le fureteur exécute JavaScript Connaissance de la programmation JavaConnaissance de la programmation Java Séparation nette entre client et serveurSéparation nette entre 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 Lenteur de JavaScriptLenteur de JavaScript Quelques problèmes de compatibilité entre fureteurs, Quelques problèmes de compatibilité entre fureteurs,

surtout au niveau des CSSsurtout 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

Page 113: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

Page 114: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

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

Page 115: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Ressources - LivresRessources - Livres

GWT - Créer des applications web interactives avec Google Web Toolkit (versions 1.7 et 2.0)par Olivier Gérardin205 pagesDunod(4 novembre, 2009)‏http://code.google.com/p/livre-gwt

Programmation GWT 2 : Développer des applications RIA et Ajax avec Google Web Toolkitpar Sami Jaber484 pagesEyrolles(5 janvier, 2010)‏www.programmationgwt2.com

Page 116: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

Ressources - OutilsRessources - Outils

http://code.google.com/webtoolkithttp://code.google.com/webtoolkit/overview.html

http://groups.google.com/group/google-web-toolkit

http://www.ongwt.com/

http://code.google.com/p/gwt-platform/

Sites généralistes

Groupe de discussions (25 000 membres)

Sites de nouvelles

Socle d'application MVP - GWTP

Page 117: Gwt présentation-jug-14avr2011

14 avril 201114 avril 2011JUG MontréalJUG Montréal

QuestionsQuestions

??

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