Download - 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
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/
14 avril 201114 avril 2011JUG MontréalJUG Montréal
Web 1.0Web 1.0 – Cliquez & attendez! – Cliquez & attendez!
* Source Clipart : http://www.clipart.com
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
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
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!
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
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
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 ?
14 avril 201114 avril 2011JUG MontréalJUG Montréal
Made in JavaScript
* Source Clipart : http://www.clipart.com
Pourquoi pas JavaScript ?Pourquoi pas JavaScript ?
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 ?
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...
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...
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
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)
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
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
14 avril 201114 avril 2011JUG MontréalJUG Montréal
Intégration à Eclipse – débogueurIntégration à Eclipse – débogueur
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
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
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
14 avril 201114 avril 2011JUG MontréalJUG Montréal
GWT DesignerGWT Designer
* Source : http://www.google.com
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
14 avril 201114 avril 2011JUG MontréalJUG Montréal
UiBinderUiBinder
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
14 avril 201114 avril 2011JUG MontréalJUG Montréal
Speed TracerSpeed Tracer (extension dans Chrome)(extension dans Chrome)
* Source : http://www.google.com
14 avril 201114 avril 2011JUG MontréalJUG Montréal
Comprendre GWTComprendre GWT
GWTGWT
* Source Clipart : http://www.clipart.com
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.
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
14 avril 201114 avril 2011JUG MontréalJUG Montréal
GWT GWT –– Structure bibliothèque & APIStructure bibliothèque & API
* Source Clipart : http://www.clipart.com
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
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
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
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
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
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
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
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é!
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
14 avril 201114 avril 2011JUG MontréalJUG Montréal
Made in JavaScript
* Source Clipart : http://www.clipart.com
Pourquoi pas JavaScript?Pourquoi pas JavaScript?
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');
}-*/;}-*/;
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
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
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)
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
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
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é!");
}}
});});
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
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
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
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)
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");
}}
});});
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);
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();
}}
}}
});});
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());
}}
});});
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);
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);
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;}}
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; } ))
14 avril 201114 avril 2011JUG MontréalJUG Montréal
I18N – InternationalisationI18N – Internationalisation
* Source Clipart : http://www.clipart.com
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
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
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)
14 avril 201114 avril 2011JUG MontréalJUG Montréal
Communication client-serveur & AjaxCommunication client-serveur & Ajax
* Source Clipart : http://www.clipart.com
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
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.
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)
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
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
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)
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)
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);
}}
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
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
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
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 ......
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
14 avril 201114 avril 2011JUG MontréalJUG Montréal
GWTGWT – Applications mobiles multiplateformes – Applications mobiles multiplateformes
* Source : http://www.google.com
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
14 avril 201114 avril 2011JUG MontréalJUG Montréal
IUG – Patrons de conceptionIUG – Patrons de conception
* Source Clipart : http://www.clipart.com
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
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);
}
}
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(...)
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).
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
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
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
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
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
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
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
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
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
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
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
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
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); }}}}
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)
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 »
14 avril 201114 avril 2011JUG MontréalJUG Montréal
GWT – AGWT – Avantages pour les utilisateursvantages pour les utilisateurs
* Source Clipart : http://www.clipart.com
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
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
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
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
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 ?
14 avril 201114 avril 2011JUG MontréalJUG Montréal
Des emplois...Des emplois...
* Source : http://www.indeed.com
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
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
14 avril 201114 avril 2011JUG MontréalJUG Montréal
GWTGWT - - Avantages & inconvénientsAvantages & inconvénients
* Source Clipart : http://www.clipart.com
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
14 avril 201114 avril 2011JUG MontréalJUG Montréal
GWT - InconvénientsGWT - Inconvénients
JS
Ajax
* Source Clipart : http://www.clipart.com
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
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
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
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
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
14 avril 201114 avril 2011JUG MontréalJUG Montréal
QuestionsQuestions
??
* Source Clipart : http://www.clipart.com