GWT (Google Web Toolkit)GWT (Google Web Toolkit)ApprofondissementApprofondissement
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Sujets spéciaux en TILe Web 2.0 : concepts et outilsÉcole de technologie supérieure
par
Claude Coulombe
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
ButBut
Dans cette présentation vous verrez comment Dans cette présentation vous verrez comment le Google Web Toolkit (GWT) permet le le Google Web Toolkit (GWT) permet le développement rapide en Java d'applications développement rapide en Java d'applications Web 2.0 et AJAX à la fois complexes et Web 2.0 et AJAX à la fois complexes et performantes.performantes.
http://code.google.com/webtoolkit/
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Pourquoi GWT ?Pourquoi GWT ? - - Problèmes avec JavaScriptProblèmes avec JavaScript
Euh!..., il ne connaissait pas assez le JavaScript...
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Problèmes de portabilité, incompatibilités des fureteurs, fuites de Problèmes de portabilité, incompatibilités des fureteurs, fuites de
mémoire & longs chargementsmémoire & longs chargements
Pas de typage statique des variables en JavaSriptPas de typage statique des variables en JavaSript
Le type d'une variable peut changer lorsqu'une nouvelle valeur lui est Le type d'une variable peut changer lorsqu'une nouvelle valeur lui est
affectée (typage dynamique). affectée (typage dynamique). var unNombre = 2; unNombre = "deux";var unNombre = 2; unNombre = "deux";
Sensible à la moindre coquille, sensible à la casseSensible à la moindre coquille, sensible à la casse
formulaire.montformulaire.montnanat = document.getElementById(''montant'');t = document.getElementById(''montant'');
Quelques subtilités : Quelques subtilités : null null vsvs undefined undefined vsvs false false vs vs """"
Débogage à l'exécution pas à la compilationDébogage à l'exécution pas à la compilation
Support inégal des outils et IDEsSupport inégal des outils et IDEs
Problème de sécurité XSS (injection de scripts)Problème de sécurité XSS (injection de scripts)
Rareté des « programmeurs experts » en JavaScriptRareté des « programmeurs experts » en JavaScript
Pourquoi GWT ?Pourquoi GWT ? - - Problèmes avec JavaScriptProblèmes avec JavaScript
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Made in JavaScript
* Source Clipart : http://www.clipart.com
Pourquoi GWT ?Pourquoi GWT ? - - JS pas conçu pour de gros logicielsJS pas conçu pour de gros logiciels
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Excellente pour l'écriture rapide de petites applications, la souplesse de Excellente pour l'écriture rapide de petites applications, la souplesse de
JavaScript devient un handicap pour l'écriture de gros logiciels et de JavaScript devient un handicap pour l'écriture de gros logiciels et de
logiciels complexeslogiciels complexes
Le typage dynamique représente une source importante d'erreurs pour de Le typage dynamique représente une source importante d'erreurs pour de
gros logicielsgros logiciels
Pas d'espace de nommage (collision de variables), manque de modularité Pas d'espace de nommage (collision de variables), manque de modularité
et de capacité à grandir, pas un véritable langage à objets et de capacité à grandir, pas un véritable langage à objets
Mise au point et réutilisation difficilesMise au point et réutilisation difficiles
NNormal, car JS n'a pas été conçu pour de gros logiciels, mais juste pour ormal, car JS n'a pas été conçu pour de gros logiciels, mais juste pour
mettre un peu d'interactivité dans une page webmettre un peu d'interactivité dans une page web
On peut voir le JavaScript comme le langage d'assemblage (assembleur) On peut voir le JavaScript comme le langage d'assemblage (assembleur)
du fureteurdu fureteur
Pourquoi GWT ?Pourquoi GWT ? - - JS pas conçu pour de gros logicielsJS pas conçu pour de gros logiciels
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009* Source image : http://www.sun.com* Source Clipart : http://www.clipart.com
Pourquoi GWT ?Pourquoi GWT ? - - Si on pouvait utiliser Java!Si on pouvait utiliser Java!
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Conçu pour le génie logiciel Conçu pour le génie logiciel
Véritable langage de POOVéritable langage de POO
Typage statique, compilé, completTypage statique, compilé, complet
Espace de nommage, notion de paquet (Package)Espace de nommage, notion de paquet (Package)
Répandu, connu et imité!Répandu, connu et imité!
Langage le plus répandu – 6 millions de développeursLangage le plus répandu – 6 millions de développeurs
Multiplateforme - “Write Once, Run Anywhere” - Windows, Linux, OS XMultiplateforme - “Write Once, Run Anywhere” - Windows, Linux, OS X
Abondante documentation, livres et coursAbondante documentation, livres et cours
Nombreux outils et EDIsNombreux outils et EDIs
Le plus grand nombre de bibliothèques et canevas d'applicationsLe plus grand nombre de bibliothèques et canevas d'applications
Le plus grand nombre d'outils en source libre dont Java lui-mêmeLe plus grand nombre d'outils en source libre dont Java lui-même
Puissants EDIs*Puissants EDIs*
Eclipse, NetBeans ou IntelliJEclipse, NetBeans ou IntelliJ
Débogueur / éditeur de code évolué / outil de refactorisation / outil Débogueur / éditeur de code évolué / outil de refactorisation / outil d'analyse du coded'analyse du code
Pourquoi GWT ?Pourquoi GWT ? - - Si on pouvait utiliser Java!Si on pouvait utiliser Java!
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GWT – Un « beau truc! » GWT – Un « beau truc! »
GWT =GWT =
* Source : http://www.google.com, http://www.sun.com, htttp://www.clipart.com
AJAXAJAX
++
Génie logicielGénie logiciel
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Qu'est-ce que GWT ?Qu'est-ce que GWT ? En mai 2006 Google lance son Google Web ToolkitEn mai 2006 Google lance son Google Web Toolkit
Bruce Johnson & Joel WebberBruce Johnson & Joel Webber Canevas d'applications Web riches, entièrement basé Canevas d'applications Web riches, entièrement basé
Java, « orienté client » et en logiciel libre (Apache 2)Java, « orienté client » et en logiciel libre (Apache 2) Transcompilateur (cross-compiler) de Java à JavaScriptTranscompilateur (cross-compiler) de Java à JavaScript Développement rapide d'applications Web riches par Développement rapide d'applications Web riches par
des programmeurs Java qui ne maîtrisent pas des programmeurs Java qui ne maîtrisent pas JavaScript JavaScript
Bon à la fois pour enrichir des applications Web avec Bon à la fois pour enrichir des applications Web avec des composants Ajax et pour créer des applications des composants Ajax et pour créer des applications « similaires à des applications bureautiques locales » « similaires à des applications bureautiques locales » mais qui tournent dans un navigateur Webmais qui tournent dans un navigateur Web
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Qu'est-ce que GWT ?Qu'est-ce que GWT ? - Du pur Java!- Du pur Java!
* EDI : environnement de développement intégré (en anglais IDE)
Plus de 6 millions de développeurs JavaPlus de 6 millions de développeurs Java ““Write Once, Run Anywhere”Write Once, Run Anywhere” Windows, Linux, Mac OS XWindows, Linux, Mac OS X Véritable langage de POOVéritable langage de POO Utilise un EDI* Java usuelUtilise un EDI* Java usuel Débogage du code-client avec EDIDébogage du code-client avec EDI Communication client-server d'objets JavaCommunication client-server d'objets Java Code-client plus léger que des applets JavaCode-client plus léger que des applets Java
* Source image : http://www.sun.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GWT – Quelques exemplesGWT – Quelques exemples Lombardi Blueprint (outil de gestion des flux de travail) Lombardi Blueprint (outil de gestion des flux de travail) http://www.lombardisoftware.com/bpm-blueprint-product.phphttp://www.lombardisoftware.com/bpm-blueprint-product.php
Exemples et démos du Google Web TookitExemples et démos du Google Web Tookit
http://code.google.com/intl/fr-FR/webtoolkit/examples/http://code.google.com/intl/fr-FR/webtoolkit/examples/
GWT-Ext 2.0 ShowcaseGWT-Ext 2.0 Showcase
http://www.gwt-ext.com/demo/http://www.gwt-ext.com/demo/
Google Web Toolkit Applications Google Web Toolkit Applications (site d'un livre)(site d'un livre)
Widget DeskTop DemoWidget DeskTop Demo
http://desktop.gwtapps.comhttp://desktop.gwtapps.com
Gpokr (jeu de poker en ligne)Gpokr (jeu de poker en ligne) www.gpokr.comwww.gpokr.com
OpenSyllabus (éditeur structuré de plan de cours)OpenSyllabus (éditeur structuré de plan de cours) http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Homehttp://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Google Wave – Google Wave – Un exemple qui fait des vagues!Un exemple qui fait des vagues!
Source : http://googleblog.blogspot.com/2009/05/went-walkabout-brought-back-google-wave.html
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Planificateur d'horaire – GWT à l'ETS!Planificateur d'horaire – GWT à l'ETS!
http://planhoraire.aeets.com/planhoraire.html
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GWT – AGWT – Avantages pour les utilisateursvantages pour les utilisateurs
* Source Clipart : http://www.clipart.com* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GWT – AGWT – Avantages pour les utilisateursvantages pour les utilisateurs
Réponses rapides aux actions de l'utilisateurRéponses rapides aux actions de l'utilisateur La vitesse est vitale, spécialement au démarrageLa vitesse est vitale, spécialement au démarrage Ne requiert pas de plugiciel, Web Start, ni même de Ne requiert pas de plugiciel, Web Start, ni même de
JVMJVM Pas de long téléchargement, ni d'installationPas de long téléchargement, ni d'installation Compatible avec tous les fureteurs Web récentsCompatible avec tous les fureteurs Web récents Donne la préférence aux composants natifs de l'IUDonne la préférence aux composants natifs de l'IU L'utilisateur conserve le contrôle du navigateur Web en L'utilisateur conserve le contrôle du navigateur Web en
tout tempstout temps Gestion de l'historique de navigationGestion de l'historique de navigation Produit des applications Web riches, rapides et légèresProduit des applications Web riches, rapides et légères
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
aniaqueGWT
GWTGWT – – AAvantages pour les développeursvantages pour les développeurs
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Comprendre GWTComprendre GWT
GWTGWT
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Application GWTApplication GWT – – Client & ServeurClient & Serveur
Le code-client en JavaScript est transmis sur le réseau vers un ordinateur-client, où il s'exécute dans un logiciel de navigation Web
Le code-serveur (en Java ou tout autre langage) s'exécute sur le serveur.
L'application Web utilise le serveur pour charger ou sauvegarder des données.
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Transcompilateur Java à JavaScript Transcompilateur Java à JavaScript
Java
JavaScript
GWT version 1.5 supporte :* Firefox 1.0, 1.5, 2, 3.x* Internet Explorer 6, 7, 8* Safari 2.0, 3.0* Opera 9.0
Run Everywhere!
Write Once...
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Transcompilateur Java à JavaScript Transcompilateur Java à JavaScript Transcompilateur GWT prend du code-client en Java et Transcompilateur GWT prend du code-client en Java et produit du code JavaScript optimiséproduit du code JavaScript optimisé
JavaScript devient le code assembleur du fureteurJavaScript devient le code assembleur du fureteur
Élimination du code non-utilisé dans les bibliothèques, Élimination du code non-utilisé dans les bibliothèques, inférence de type, retrait du polymorphisme, inférence de type, retrait du polymorphisme, compression “agressive” du code, « Obfuscation »compression “agressive” du code, « Obfuscation »
Le JavaScript produit est généralement plus rapide Le JavaScript produit est généralement plus rapide que du JavaScript écrit à la main* que du JavaScript écrit à la main*
Emploi de la liaison différée (“Deferred Binding”) pour Emploi de la liaison différée (“Deferred Binding”) pour produire du code JavaScript optimal pour chaque produire du code JavaScript optimal pour chaque fureteur (i.e. génère du code spécifique à chaque fureteur (i.e. génère du code spécifique à chaque fureteur)fureteur)
« Ne payez que pour ce que vous utilisez »« Ne payez que pour ce que vous utilisez »
* Note : sauf si code < 100 lignes* Note : sauf si code < 100 lignes
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Transcompilateur- Transcompilateur- Liaison différéeLiaison différée
« Ne payez que pour ce que vous utilisez »
Copyright Google 2008
* Source : http://www.google.com
Générer du code optimal et spécifique à chaque fureteurGénérer du code optimal et spécifique à chaque fureteur
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009* Source Clipart : http://www.clipart.com
Client léger HTML vs client riche AjaxClient léger HTML vs client riche Ajax
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
« 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é!
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GWT GWT –– Structure bibliothèque & APIStructure bibliothèque & API
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Vue d'ensemble de l'architecture GWTVue d'ensemble de l'architecture GWT
Bibliothèque IUG
Widgets &Panels
Communicationavec le serveur
RPC & Ajax
Analyseur XML
Gestion del'historique
Intégration à JUnit
GWT APIGWT API
Trans compilateur
Java àJavaScript
Interface Native
JavaScriptJSNI
Bibliothèqued'émulation
JRE
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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.jar de GWT 1.5.3La structure du gwt-user.jar de GWT 1.5.3 GWT GWT –– Structure bibliothèque & APIStructure bibliothèque & API
Note : Transcompilateur GWT Note : Transcompilateur GWT
dans gwt-dev-windows.jardans gwt-dev-windows.jar
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Transcompilateur Java à JavaScript Transcompilateur Java à JavaScript
Transcompilateur Transcompilateur
gwt-user.jargwt-user.jarGwt-dev-Gwt-dev-
windows.jarwindows.jar
Autres .jarAutres .jar
Compatibles Compatibles
avec GWTavec GWT
ConfigurationConfiguration
ModuleModule
MonProjet.gwtMonProjet.gwt
.xml.xml
Code Java Code Java
MonProjetMonProjet
.java.java
RessourcesRessourcesMonProjet. htmlMonProjet. htmlMonProjet.css,MonProjet.css,.png, .jpg, .gif.png, .jpg, .gif
CodeCode
JavaScriptJavaScript
MonProjet.jsMonProjet.js
RessourcesMonPrRessourcesMonProjet.ojet.htmlhtml
MonProjet.css,MonProjet.css,.png, .jpg, .gif.png, .jpg, .gif
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Du JavaScript plus rapide que du code écrit à la main !!!Du JavaScript plus rapide que du code écrit à la main !!!
Ainsi, ceciAinsi, ceci
public static void onModuleLoad() {public static void onModuleLoad() {
Button b = (new Button()).Button();Button b = (new Button()).Button();
b.setText("Java vers JavaScript");b.setText("Java vers JavaScript");
}}
après compilation, donnera quelque chose comme cela... après compilation, donnera quelque chose comme cela...
function onModuleLoad(){function onModuleLoad(){
var b;var b;
b = $Button(new Button());b = $Button(new Button());
$setInnerText(b.element, 'Java vers JavaScript');$setInnerText(b.element, 'Java vers JavaScript');
}}
Transcompilateur Java à JavaScript Transcompilateur Java à JavaScript
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Emulation – JRE Emulation – JRE (Java Runtime Environment)(Java Runtime Environment)
Le transcompilateur de GWT fournit l'émulation en Le transcompilateur de GWT fournit l'émulation en JavaScript d'un sous-ensemble du langage Java (JRE) JavaScript d'un sous-ensemble du langage Java (JRE) généralement utilisé pour la programmation de basegénéralement utilisé pour la programmation de base
java.lang, java.util, java.io, java.sqljava.lang, java.util, java.io, java.sql
Restriction pour le code client Restriction pour le code client
devant être traduit en JavaScript. devant être traduit en JavaScript.
Aucune restriction n'est imposée Aucune restriction n'est imposée
du côté du code serveur : Java du côté du code serveur : Java
(JSP/JSF/Servlet), PHP, (JSP/JSF/Servlet), PHP,
ASP .NET, Perl, RoR, Python, Perl, ...ASP .NET, Perl, RoR, Python, Perl, ...
* Source image : http://www.sun.com* Source image : http://www.sun.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
JSNI : JavaScript Native InterfaceJSNI : JavaScript Native InterfaceGWT permet l'intégration facile avec des bibliothèques GWT permet l'intégration facile avec des bibliothèques JavaScript externes grâce à son JavaScript Native JavaScript externes grâce à son JavaScript Native Interface (JSNI)Interface (JSNI)
Interagir directement avec JavaScript (accès natif) à Interagir directement avec JavaScript (accès natif) à partir de Java et vice-versa partir de Java et vice-versa
Inclusion automatique des bibliothèques JavaScriptInclusion automatique des bibliothèques JavaScript
GWT 1.5 introduit le concept de JavaScript Overlay GWT 1.5 introduit le concept de JavaScript Overlay pour simplifier l'intégration de prototypes JavaScript pour simplifier l'intégration de prototypes JavaScript dans GWTdans GWT
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
JSNI : JavaScript Native InterfaceJSNI : JavaScript Native Interface GWT permet l'intégration facile avec des bibliothèques GWT permet l'intégration facile avec des bibliothèques
JavaScript externes grâce à son JavaScript Native JavaScript externes grâce à son JavaScript Native Interface (JSNI)Interface (JSNI)
Interagir directement avec JavaScript à partir de Java Interagir directement avec JavaScript à partir de Java et vice-versaet vice-versa
Inclusion automatique des bibliothèques JavaScriptInclusion automatique des bibliothèques JavaScript
// Déclaration de la méthode en Java...// Déclaration de la méthode en Java...
native String inverserNomPrenom(String nom) native String inverserNomPrenom(String nom)
/*-{/*-{
// Implémentation en JavaScript// Implémentation en JavaScript
var re = /(\w+)\s(\w+)/;var re = /(\w+)\s(\w+)/;
return name.replace(re, '$2, $1');return name.replace(re, '$2, $1');
}-*/;}-*/;
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
JSNI : Type Overlay JavaScript JSNI : Type Overlay JavaScript GWT 1.5 introduit le concept de JavaScript Overlay pour simplifier GWT 1.5 introduit le concept de JavaScript Overlay pour simplifier l'intégration de prototypes JavaScript dans GWTl'intégration de prototypes JavaScript dans GWTUne structure de données JSON (JavaScript Object Notation)Une structure de données JSON (JavaScript Object Notation)
var electionsJSON = [var electionsJSON = [
{ "Prenom" : "Pauline", "NomFamille" : "Marois" }, { "Prenom" : "Amir", "NomFamille" : "Khadir" },{ "Prenom" : "Pauline", "NomFamille" : "Marois" }, { "Prenom" : "Amir", "NomFamille" : "Khadir" },
{ "Prenom" : "Mario", "NomFamille" : "Dumont" }, { "Prenom" : "Jean", "NomFamille" : "Charest" }{ "Prenom" : "Mario", "NomFamille" : "Dumont" }, { "Prenom" : "Jean", "NomFamille" : "Charest" }
];];
// Un type Overlay JavaScript// Un type Overlay JavaScript
class PoliticienQC extends JavaScriptObject {class PoliticienQC extends JavaScriptObject {
// Un type Overlay JS a toujours un constructeur protected, à zéro argument// Un type Overlay JS a toujours un constructeur protected, à zéro argument
protected PoliticienQC() { } protected PoliticienQC() { }
// Les méthodes dans un Overlay JavaScript sont en JSNI// Les méthodes dans un Overlay JavaScript sont en JSNI
public final native String getPrenom() /*-{ return this.Prenom; }-*/;public final native String getPrenom() /*-{ return this.Prenom; }-*/;
public final native String getNomFamille() /*-{ return this.NomFamille; }-*/;public final native String getNomFamille() /*-{ return this.NomFamille; }-*/;
// Notez, toutefois, que toutes les méthodes ne sont pas obligatoirement en JSNI// Notez, toutefois, que toutes les méthodes ne sont pas obligatoirement en JSNI
public final String getNomComplet() {public final String getNomComplet() {
return getPrenom() + " " + getNomFamille(); return getPrenom() + " " + getNomFamille();
}}
}}
* Source : http://googlewebtoolkit.blogspot.com* Source : http://googlewebtoolkit.blogspot.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
JSNI : Type Overlay JavaScript JSNI : Type Overlay JavaScript // Obtenir un prototype JavaScript pour l'Overlay// Obtenir un prototype JavaScript pour l'Overlay
class MonModuleEntryPoint implements EntryPoint {class MonModuleEntryPoint implements EntryPoint {
public void onModuleLoad() {public void onModuleLoad() {
PoliticienQC p = getPremierPoliticien();PoliticienQC p = getPremierPoliticien();
// Youppi! Maintenant j'ai un prototype JavaScript qui est aussi un PoliticienQC// Youppi! Maintenant j'ai un prototype JavaScript qui est aussi un PoliticienQC
Window.alert("Bonjour, " + p.getPrenom());Window.alert("Bonjour, " + p.getPrenom());
}}
// Utilisation de JSNI pour obtenir le prototype JSON que nous désirons// Utilisation de JSNI pour obtenir le prototype JSON que nous désirons
// Le prototype JSON object reçoit un type Java implicitement // Le prototype JSON object reçoit un type Java implicitement
// en se basant sur le type retourné par la méthode// en se basant sur le type retourné par la méthode
private native PoliticienQC getPremierPoliticien() /*-{private native PoliticienQC getPremierPoliticien() /*-{
// Obtenir une référence au premier PoliticienQC dans le tableau JSON// Obtenir une référence au premier PoliticienQC dans le tableau JSON
return $wnd.electionsJSON[0]; return $wnd.electionsJSON[0];
}-*/;}-*/;
}}
* Source : http://googlewebtoolkit.blogspot.com* Source : http://googlewebtoolkit.blogspot.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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)
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Intégration à EclipseIntégration à Eclipse
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Intégration à Eclipse – Mode HôteIntégration à Eclipse – Mode Hôte
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GWT en « mode hôte »GWT en « mode hôte » - D - Débogageébogage
Application GWT peut s'exécuter en « mode Application GWT peut s'exécuter en « mode
hôte » (“Hosted Mode”)hôte » (“Hosted Mode”)
En « mode hôte », la JVM exécute le code GWT En « mode hôte », la JVM exécute le code GWT
comme du bytecode Java à l'intérieur d'une comme du bytecode Java à l'intérieur d'une
fenêtre de navigateur Webfenêtre de navigateur Web
L'exécution en « mode hôte » facilite leL'exécution en « mode hôte » facilite le
débogage :débogage :
Éditer le code-sourceÉditer le code-source
RafraîchirRafraîchir
Examiner les résultatsExaminer les résultats
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Intégration à Eclipse – débogueurIntégration à Eclipse – débogueur
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GWT en « Mode Web » - DéploiementGWT en « Mode Web » - Déploiement
Une fois testé en « Mode Hôte », vous pouvez Une fois testé en « Mode Hôte », vous pouvez compiler votre code source Java en JavaScript compiler votre code source Java en JavaScript et déployer votre application Webet déployer votre application Web
Une application Web GWT qui a été déployée Une application Web GWT qui a été déployée est dite en « Mode Web »est dite en « Mode Web »
Une fois compilé le code-client est uniquement Une fois compilé le code-client est uniquement du pur JavaScript et du HTMLdu pur JavaScript et du HTML
Afin de déployer votre application Web en Afin de déployer votre application Web en production, vous déplacez les fichiers du production, vous déplacez les fichiers du répertoire « war » sur le serveur Web, i.e. répertoire « war » sur le serveur Web, i.e. Tomcat (ou Apache)Tomcat (ou Apache)
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Vue d'ensemble de la bibliothèque deVue d'ensemble de la bibliothèque decomposants d'interface utilisateur (IU)composants d'interface utilisateur (IU)
Composants d'interface-utilisateurComposants d'interface-utilisateur
Programmation par événementsProgrammation par événements
Exemples d'événementsExemples d'événements
Gestion des événementsGestion des événements
PanneauxPanneaux
Bouton simpleBouton simple
Case à cocherCase à cocher
Bouton radioBouton radio
Boîte de texteBoîte de texte
Liste déroulanteListe déroulante
ArbreArbre
Éditeur de textesÉditeur de textes
Support des CSSSupport des CSS
I18NI18N
Gestion de l'historiqueGestion de l'historique
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
IU - ComposantsIU - ComposantsBalises HTML usuelles, comme img, anchor, hyperlinkBalises HTML usuelles, comme img, anchor, hyperlink
Bouton, bouton radio, bouton à bascule, case à cocherBouton, bouton radio, bouton à bascule, case à cocher
Menu, sous-menu, menu déroulantMenu, sous-menu, menu déroulant
Champ de texte, zone de texteChamp de texte, zone de texte
Onglets, liste déroulante, boîte de dialogueOnglets, liste déroulante, boîte de dialogue
Séparateurs de fenêtreSéparateurs de fenêtre
Widgets complexes comme des tables, boîte de Widgets complexes comme des tables, boîte de téléversement de fichier, widget d'arbres, éditeur de téléversement de fichier, widget d'arbres, éditeur de texte enrichi,texte enrichi,
Différents panneaux très utiles pour la dispositionDifférents panneaux très utiles pour la disposition
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
IU IU – Programmation par événements– Programmation par événementsEssentiellement de la programmation par événementsEssentiellement de la programmation par événements
Une méthode ou procédure s'exécute quand un Une méthode ou procédure s'exécute quand un événement est déclenchéévénement est déclenché
Dans une IU, un événement est déclenché chaque fois Dans une IU, un événement est déclenché chaque fois que l'utilisateur clique sur la souris, appuie sur une que l'utilisateur clique sur la souris, appuie sur une touche du clavier, sélectionne un élément dans un touche du clavier, sélectionne un élément dans un menu, ouvre ou ferme une fenêtre, etc.menu, ouvre ou ferme une fenêtre, etc.
À chaque composant de l'IU appelé aussi contrôle ou À chaque composant de l'IU appelé aussi contrôle ou widget (comme un bouton, un menu, etc.) est associé widget (comme un bouton, un menu, etc.) est associé un ou plusieurs gestionnaires d'événements (Listener un ou plusieurs gestionnaires d'événements (Listener ou Handler) qui peuvent comporter des paramètres ou Handler) qui peuvent comporter des paramètres
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
IU – IU – Récepteur / gestionnaire d'événementsRécepteur / gestionnaire d'événements GWT utilise le concept de récepteur ou gestionnaire (« GWT utilise le concept de récepteur ou gestionnaire («
listener interface ») pour traiter les événementslistener interface ») pour traiter les événements
Semblable à d'autres canevas d'applications Semblable à d'autres canevas d'applications graphiques comme SWINGgraphiques comme SWING
Le récepteur via l'interface “listener interface” définit Le récepteur via l'interface “listener interface” définit une ou plusieurs méthodes que le widget appelle en une ou plusieurs méthodes que le widget appelle en réaction à un événementréaction à un événement
Button unBouton = new Button("Cliquez moi!");Button unBouton = new Button("Cliquez moi!"); unBouton.addClickListener(new ClickListener() {unBouton.addClickListener(new ClickListener() { public void onClick(Widget emetteur) {public void onClick(Widget emetteur) { // traitement du Clic// traitement du Clic }} });});
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Interface Utilisateur - Interface Utilisateur - ComposantsComposantsÉléments statiques: étiquetteÉléments statiques: étiquette ( (LabelLabel), HTML, Image, hyperlien (), HTML, Image, hyperlien (HyperlinkHyperlink), champ ), champ caché (caché (HiddenHidden))
Widgets (E/S) : bouton (Widgets (E/S) : bouton (ButtonButton), bouton poussoir (), bouton poussoir (PushButtonPushButton), bouton à bascule ), bouton à bascule ((ToggleButtonToggleButton), case à cocher (), case à cocher (CheckBoxCheckBox), bouton radio (), bouton radio (RadioButtonRadioButton), menu déroulant ), menu déroulant ((ListBoxListBox), zone de texte (), zone de texte (TextBoxTextBox), zone de texte avec suggestions (), zone de texte avec suggestions (SuggestBoxSuggestBox), ), zone d'entrée de mot de passe (zone d'entrée de mot de passe (PasswordTextBoxPasswordTextBox), zone de texte multiligne (), zone de texte multiligne (TextAreaTextArea), ), zone d'édition de texte enrichi (zone d'édition de texte enrichi (RichTextAreaRichTextArea))
Widgets complexes : arbre (Widgets complexes : arbre (TreeTree), barre de menus (), barre de menus (MenuBarMenuBar), téléversement de ), téléversement de fichiers (fichiers (FileUploadFileUpload))
Panneaux de disposition simple : panneau en file (Panneaux de disposition simple : panneau en file (FlowPanelFlowPanel), panneau horizontal ), panneau horizontal ((Horizontal PanelHorizontal Panel), panneau vertical (), panneau vertical (VerticalPanelVerticalPanel), panneau à coulisse ), panneau à coulisse ((HorizontalSplitPanelHorizontalSplitPanel, , VerticalSplitPanelVerticalSplitPanel), panneau HTML (), panneau HTML (HTMLPanelHTMLPanel), panneau ), panneau superposé (superposé (DeckPanelDeckPanel))
Panneaux de disposition complexe : table flexible* (Panneaux de disposition complexe : table flexible* (FlexTableFlexTable), grille (), grille (GridGrid), panneau ), panneau polyptyque* (DockPanel)polyptyque* (DockPanel),, panneau à onglets ( panneau à onglets (TabPanelTabPanel), panneau en pile (), panneau en pile (StackPanelStackPanel))
Panneaux conteneurs simples : panneau composite ou composite (Panneaux conteneurs simples : panneau composite ou composite (CompositeComposite) panneau ) panneau simple (simple (SimplePanelSimplePanel), panneau à barre de défilement (), panneau à barre de défilement (ScrollPanelScrollPanel), panneau de focus ), panneau de focus ((FocusPanelFocusPanel))
Panneaux conteneurs complexes : panneau de formulaire (Panneaux conteneurs complexes : panneau de formulaire (FormPanelFormPanel), panneau à ), panneau à dévoilement* (dévoilement* (DisclosurePanelDisclosurePanel), panneau surprise* (), panneau surprise* (PopupPanelPopupPanel), boîte de dialogue ), boîte de dialogue ((DialogBoxDialogBox))
http://gwt.google.com/samples/Showcase/Showcase.htmlhttp://gwt.google.com/samples/Showcase/Showcase.html
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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)
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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");
}}
});});
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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);
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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();
}}
}}
});});
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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());
}}
});});
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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);
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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);
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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;}}
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Support des CSS - conseilsSupport des CSS - conseilsCode Java : (usage de CSS primaire et dépendant)MonPetitWidget monPW = new MonPetitWidget();MonPetitWidget monPW = new MonPetitWidget();monPW.setStylePrimaryName("monPetitWidget");monPW.setStylePrimaryName("monPetitWidget");monPW.addStyleDependentName("selected");monPW.addStyleDependentName("selected");Fichier CSS :Fichier CSS :.monpetitWidget {.monpetitWidget { background-color:black;background-color:black; color:lime;color:lime;}}.monPetitWidget .monPetitWidget-selected {.monPetitWidget .monPetitWidget-selected { color:red;color:red;}}Permet de faire varier facilement l'apparence en fonction de l'étatPermet de faire varier facilement l'apparence en fonction de l'étatNote : Ne pas utiliser les CSS pour la disposition (ex. Note : Ne pas utiliser les CSS pour la disposition (ex.
.monPetitWidget .monPetitWidget { position: absolute; }{ position: absolute; } ))
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
I18N – InternationalisationI18N – Internationalisation
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
I18NI18N Le transcompilateur GWT utilise la liaison différée Le transcompilateur GWT utilise la liaison différée
(« Deferred Binding ») pour générer une version (« Deferred Binding ») pour générer une version différente de l'application Web pour chaque langue différente de l'application Web pour chaque langue
Par exemple, puisque GWT supporte 4 navigateurs Par exemple, puisque GWT supporte 4 navigateurs différents, si votre application doit fonctionner en différents, si votre application doit fonctionner en 3 langues, le transcompilateur de GWT produira 3 langues, le transcompilateur de GWT produira 12 versions différentes de votre application au 12 versions différentes de votre application au moment de la compilation moment de la compilation
À l'exécution, GWT choisira la bonne version de À l'exécution, GWT choisira la bonne version de l'application à montrer à l'utilisateurl'application à montrer à l'utilisateur
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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)
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GUI – Patrons de conceptionGUI – Patrons de conception
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GUI – Patrons de conception - MVCGUI – Patrons de conception - MVCPatron MVCPatron MVC
Client MVCClient MVC
VV CC
VueVue: :
Affiche les Affiche les informations et informations et achemine les achemine les actions de l'usageractions de l'usager
ContrôleurContrôleur::
Établit les liens Établit les liens entre le Modèle et entre le Modèle et la Vuela Vue
Reçoit les Reçoit les événements de la événements de la Vue et gère les Vue et gère les actions de l'usager actions de l'usager
accès en lecture aux
accès en lecture aux
donnéesdonnées
notification
notification
événementsévénements
mise à
jour
mise à
jour
chan
gemen
t des
donn
ées
chan
gemen
t des
donn
ées
Échages de Échages de donnéesdonnées
Présentation découpléePrésentation découplée
mise à jourmise à jour
MM
ModèleModèle: :
Données de l'application Données de l'application (POJOs) Notifie les (POJOs) Notifie les changements du modèle changements du modèle par des événements par des événements transmis aux vues transmis aux vues abonnées abonnées
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GUI – Patrons de conception - GUI – Patrons de conception - ObservateurObservateur
* Patron observateur relie MV et VC dans le patron MVC* Patron observateur relie MV et VC dans le patron MVC
Source figure : R. Dewsbury 2008 – Chap.2, p.96Source figure : R. Dewsbury 2008 – Chap.2, p.96
Le Modèle utilise le patron de conception Observateur (Observer Pattern) pour informer la Le Modèle utilise le patron de conception Observateur (Observer Pattern) pour informer la Vue/Contrôleur du changement des données et bien découpler la Vue du Modèle* Vue/Contrôleur du changement des données et bien découpler la Vue du Modèle*
Ainsi, différents éléments du Modèle servent de sujets ou données observables (Subjects) à Ainsi, différents éléments du Modèle servent de sujets ou données observables (Subjects) à un ensemble d'observateurs (Observers) contenus dans les Vues/Contrôleurs qui sont en un ensemble d'observateurs (Observers) contenus dans les Vues/Contrôleurs qui sont en quelque sorte abonnés aux modifications des données du modèle.quelque sorte abonnés aux modifications des données du modèle.
Programmation événementielle qui favorise un découplage des composants Programmation événementielle qui favorise un découplage des composants
Compromis entre un petit nombre d'événements généraux du genre « quelque chose » a Compromis entre un petit nombre d'événements généraux du genre « quelque chose » a changé dans le modèle (granularité grossière) et un grand nombre de petits événements changé dans le modèle (granularité grossière) et un grand nombre de petits événements reliés à des éléments très précis du modèle (granularité fine).reliés à des éléments très précis du modèle (granularité fine).
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GUI – Patrons de conception - GUI – Patrons 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
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GUI – Patrons de conception - GUI – Patrons de conception - CompositeComposite
class MonPremierComposite extends Composite {
private VerticalPanel conteneur = new VerticalPanel();
private Label monTitre = new Label();
private TextBox maZoneTexte = new TextBox();
// Constructeur
public MonPremierComposite() {
conteneur.add(monTitre);
conteneur.add(maZoneTexte);
initWidget(conteneur);
}
}
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Communication client-serveur & AjaxCommunication client-serveur & Ajax
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Ajax – Ajax – Diagramme de collaborationDiagramme de collaboration
Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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.
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Communication avec le serveur & AjaxCommunication avec le serveur & Ajax
Le RPC (« Remote Procedure Call »), appel de procédure à Le RPC (« Remote Procedure Call »), appel de procédure à distancedistance
RPC rend facile l'échange d'objets Java ou POJOS (sérialisés) RPC rend facile l'échange d'objets Java ou POJOS (sérialisés) entre le code-client et le code-serveurentre le code-client et le code-serveur
Fournit une procédure automatique de sérialisation des objetsFournit une procédure automatique de sérialisation des objets
Autres outils Ajax :Autres outils Ajax :
HTTPRequestHTTPRequest
RequestBuilderRequestBuilder
FormPanelFormPanel
Support de : Support de :
XMLXML
JSON (JavaScript Object Notation)JSON (JavaScript Object Notation)
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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)
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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)
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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);
}}
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
import com.google.gwt.user.server.rpc.RemoteServiceServlet;import com.google.gwt.user.server.rpc.RemoteServiceServlet;import qc.ets.web2.gwt.client.MesDonneesDO; import qc.ets.web2.gwt.client.MesDonneesDO; import qc.ets.web2.gwt.client.MonService;import qc.ets.web2.gwt.client.MonService;public class MonServiceImpl extends RemoteServiceServlet implements MonService {public class MonServiceImpl extends RemoteServiceServlet implements MonService {
public MesDonneesDO getReponseMonService(String requete) {public MesDonneesDO getReponseMonService(String requete) { if (requete.length() < 1) {if (requete.length() < 1) { throw new IllegalArgumentException("Requete invalide.");throw new IllegalArgumentException("Requete invalide."); }} MesDonneesDO resultat = new MesDonneesDO();MesDonneesDO resultat = new MesDonneesDO(); resultat.setDonnees("...");resultat.setDonnees("..."); if ( isInvalide( resultat )) {if ( isInvalide( resultat )) {
return null;return null;}}
return resultat;return resultat;}}public boolean isInvalide(MesDonneesDO resultat) {public boolean isInvalide(MesDonneesDO resultat) {
Return true; // à modifierReturn true; // à modifier}}
}}
Classe à implémenter du côté serveur hérite de Classe à implémenter du côté serveur hérite de com.google.gwt.user.server.rpc.RemoteServiceServletcom.google.gwt.user.server.rpc.RemoteServiceServlet
RPC - Code-serveurRPC - Code-serveur
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
public class MonClientRPC implements EntryPoint {public class MonClientRPC implements EntryPoint {public void onModuleLoad() {public void onModuleLoad() {
final Button bouton = new Button("Appel RPC");final Button bouton = new Button("Appel RPC");final MonServiceAsync serviceProxy = final MonServiceAsync serviceProxy =
(MonServiceAsync)GWT.create(qc.ets.web2.gwt.client.MonService.class);(MonServiceAsync)GWT.create(qc.ets.web2.gwt.client.MonService.class); ServiceDefTarget pointService = (ServiceDefTarget) serviceProxy;ServiceDefTarget pointService = (ServiceDefTarget) serviceProxy; pointService.setServiceEntryPoint(GWT.getModuleBaseURL() + "/reponseService");pointService.setServiceEntryPoint(GWT.getModuleBaseURL() + "/reponseService");
bouton.addClickListener(new ClickListener( ) {bouton.addClickListener(new ClickListener( ) {public void onClick(Widget emetteur) {public void onClick(Widget emetteur) {
AsyncCallback maProcedureDeRappel = new AsyncCallback() { AsyncCallback maProcedureDeRappel = new AsyncCallback() { public void onSuccess(Object resultat) {public void onSuccess(Object resultat) {
MesDonneesDO resultatDO = (MesDonneesDO) resultat;MesDonneesDO resultatDO = (MesDonneesDO) resultat;System.out.println("*** SUCCES RPC ***\n" + resultatDO.getDonnees());System.out.println("*** SUCCES RPC ***\n" + resultatDO.getDonnees());
}}public void onFailure(Throwable erreur) {public void onFailure(Throwable erreur) {
System.out.println("*** ERREUR RPC ***" + erreur.getMessage());System.out.println("*** ERREUR RPC ***" + erreur.getMessage());}}
};};serviceProxy.getReponseMonService("Requete bidon", maProcedureDeRappel);serviceProxy.getReponseMonService("Requete bidon", maProcedureDeRappel);
}});}});RootPanel.get("emprise1").add(bouton);RootPanel.get("emprise1").add(bouton);
}}}}
Le client n'est pas encore connecté au service. Nous pouvons faire cela en ajoutant un Le client n'est pas encore connecté au service. Nous pouvons faire cela en ajoutant un récepteur (Listener) à un élément de l'interface, ce qui peut être fait avec une classe interne.récepteur (Listener) à un élément de l'interface, ce qui peut être fait avec une classe interne.
RPC - Code-clientRPC - Code-client
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Intégration facile aux APIs GoogleIntégration facile aux APIs Google
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Intégration facile aux APIs GoogleIntégration facile aux APIs Google Google offre un riche écosystème d'APIs en source Google offre un riche écosystème d'APIs en source
librelibre Androïd : plateforme Java en source libre pour la Androïd : plateforme Java en source libre pour la
téléphonie intelligentetéléphonie intelligente AppEngine : hébergement d'applications Java dans le AppEngine : hébergement d'applications Java dans le
nuagenuage OpenSocial : norme libre pour les sites sociauxOpenSocial : norme libre pour les sites sociaux Google Maps : services de cartes et géolocationGoogle Maps : services de cartes et géolocation Google Ajax Searh APIs : le moteur Google SearchGoogle Ajax Searh APIs : le moteur Google Search Google Gears API : BD locale et navigation hors ligneGoogle Gears API : BD locale et navigation hors ligne Google Language API : services de traductionGoogle Language API : services de traduction YouTube widget ?YouTube widget ?
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Démo – Bâtir desDémo – Bâtir des applications GWT applications GWT
GWTGWTen Actionen Action
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Créer un squelette d'application GWTCréer un squelette d'application GWT
public class Bonjour implements EntryPoint {public class Bonjour implements EntryPoint {
public void onModuleLoad() {public void onModuleLoad() {
Button bouton = new Button("Cliquez-moi!",Button bouton = new Button("Cliquez-moi!",
new ClickListener() {new ClickListener() {
public void onClick(Widget sender) {public void onClick(Widget sender) {
Window.alert("Bonjour GWT");Window.alert("Bonjour GWT");
}}
});});
RootPanel.get().add(bouton);RootPanel.get().add(bouton);
}}
}}
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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)
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Créer des applications Web similaires à Créer des applications Web similaires à des applications bureautiques localesdes applications bureautiques locales
Ouverture de plusieurs fenêtres à la fois dans le Ouverture de plusieurs fenêtres à la fois dans le navigateurnavigateur
Déplacement des fenêtres dans le navigateur, Déplacement des fenêtres dans le navigateur, redimensionnement et défilement des fenêtresredimensionnement et défilement des fenêtres
Glisser et déposer des contenusGlisser et déposer des contenus Applications Web se comportant « comme des Applications Web se comportant « comme des
applications bureautiques locales »applications bureautiques locales »
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Qui peut le mieux profiter de GWT ?Qui peut le mieux profiter de GWT ?
J' GWT
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Designers WebDesigners Web– GWT utilise les feuilles de style CSSGWT utilise les feuilles de style CSS
– Doivent apprendre JavaDoivent apprendre Java
Développeurs d'applications Web Développeurs d'applications Web – Une application GWT s'exécute sur le client plutôt que d'être Une application GWT s'exécute sur le client plutôt que d'être
contrôlée entièrement par le serveurcontrôlée entièrement par le serveur
– Doivent maîtriser les technologies du client et de présentation Doivent maîtriser les technologies du client et de présentation
Développeurs Ajax Développeurs Ajax (gourous JavaScript)(gourous JavaScript)
– GWT intègre facilement le code JavaScript grâce à JSNIGWT intègre facilement le code JavaScript grâce à JSNI
– Doivent laisser tomber certaines habitudes du codage JS Doivent laisser tomber certaines habitudes du codage JS
Développeurs d'applications JavaDéveloppeurs d'applications Java– Réaliser des Web-app. avec des outils et un environnement familierRéaliser des Web-app. avec des outils et un environnement familier
– Doivent apprendre CSS & les restrictions particulières des Web-app.Doivent apprendre CSS & les restrictions particulières des Web-app.
Qui peut le mieux profiter de GWT ?Qui peut le mieux profiter de GWT ?
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Des emplois...Des emplois...
* Source : http://www.indeed.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GWT vs autres solutions Web richeGWT vs autres solutions Web riche
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Outils purs JavaScriptOutils purs JavaScript (Scriptaculous, Prototype, DWR, JQuery, YUI, etc.)(Scriptaculous, Prototype, DWR, JQuery, YUI, etc.)
Facilitent beaucoup la programmation JavaScript mais ça reste du JavaScript!Facilitent beaucoup la programmation JavaScript mais ça reste du JavaScript!
JavaServer FacesJavaServer Faces -- Norme JEE, canevas d'applications Web populaire, basé Norme JEE, canevas d'applications Web populaire, basé sur le serveur, plutôt complexe sur le serveur, plutôt complexe
JavaFXJavaFX - - Trop tôt pour se prononcer, exige JVM, langage à scriptTrop tôt pour se prononcer, exige JVM, langage à script
Java AppletJava Applet - - TTrop lourd, exige JVM, doivent beaucoup s'améliorer rop lourd, exige JVM, doivent beaucoup s'améliorer
ZKZK -- Rapide et facile à programmer, basé sur le serveur, licence GPL Rapide et facile à programmer, basé sur le serveur, licence GPL
Adobe Flash, Flex, AIRAdobe Flash, Flex, AIR (Adobe Integrated Runtime) (Adobe Integrated Runtime) et OpenLazslo et OpenLazslo
Basé sur le serveur, +/- propriétaire, exige plugiciel Flash, langage à scriptsBasé sur le serveur, +/- propriétaire, exige plugiciel Flash, langage à scripts
Micro$oft SilverlightMicro$oft Silverlight -- Pas Java, propriétaire & basé Windows Pas Java, propriétaire & basé Windows
Windows...Volta, 5 décembreWindows...Volta, 5 décembre 2007, une copie 2007, une copie GWT pour .NETGWT pour .NEThttp://labs.live.com/voltahttp://labs.live.com/volta
RubyRuby - - Innovateur, mais toujours à base de pages et basé sur le serveur..Innovateur, mais toujours à base de pages et basé sur le serveur..
GWT vs autres solutions Web richeGWT vs autres solutions Web riche
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GWTGWT - - Avantages & inconvénientsAvantages & inconvénients
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GWT - AvantagesGWT - Avantages Bon pour enrichir des applications Web avec Ajax et créer Bon pour enrichir des applications Web avec Ajax et créer
des applications Web de « style bureautique »des applications Web de « style bureautique »
Un seul langage: JAVAUn seul langage: JAVA
Développement et mise au point rapide dans des EDIs Développement et mise au point rapide dans des EDIs
favorisant une bonne productivité et qualité du codefavorisant une bonne productivité et qualité du code
Riche bibliothèque de composants (~ SWING)Riche bibliothèque de composants (~ SWING)
Très bon support AjaxTrès bon support Ajax
Performant & économe en ressources réseau & serveurPerformant & économe en ressources réseau & serveur
Code source libre, licence Apache 2, bien documentéCode source libre, licence Apache 2, bien documenté
Supporté par GOOGLE... et l'écosystème des outils GoogleSupporté par GOOGLE... et l'écosystème des outils Google
Pas magique mais GWT a le potentiel de devenir le Pas magique mais GWT a le potentiel de devenir le
« prochain gros truc »« prochain gros truc »
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GWT - InconvénientsGWT - Inconvénients
JS
Ajax
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
GWT - InconvénientsGWT - Inconvénients Nécessite que le fureteur exécute JavaScriptNécessite que le fureteur exécute JavaScript Exige la connaissance de la programmation JavaExige la connaissance de la programmation Java Exige une séparation nette client et serveurExige une séparation nette client et serveur Les composants (Widgets) sont de sources et de Les composants (Widgets) sont de sources et de
qualités inégalesqualités inégales Dépend des performances du transcompilateurDépend des performances du transcompilateur Quelques problèmes de compatibilité entre les Quelques problèmes de compatibilité entre les
fureteurs Web, surtout au niveau des CSSfureteurs Web, surtout au niveau des CSS Certains problèmes demandent une expertise JSCertains problèmes demandent une expertise JS L'aspect sécurité est à surveillerL'aspect sécurité est à surveiller GWT ne va pas résoudre « magiquement » tous les GWT ne va pas résoudre « magiquement » tous les
problèmes avec Ajax ou le Web 2.0problèmes avec Ajax ou le Web 2.0
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
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
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
Ressources - OutilsRessources - Outils
GWT DesignerGWT Designer
Éditeur graphiqueÉditeur graphique
Plugiciel EclipsePlugiciel Eclipse
www.instantiations.com/gwtdesignerwww.instantiations.com/gwtdesigner
SitesSites http://code.google.com/webtoolkit/http://code.google.com/webtoolkit/
http://groups.google.com/group/Google-Web-Toolkithttp://groups.google.com/group/Google-Web-Toolkit
www.ongwt.comwww.ongwt.com
GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009
QuestionsQuestions
??
* Source Clipart : http://www.clipart.com