Présentation dans le but d'approfondir les connaissances sur GWT dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'Ecole de technologie supérieure, Montréal, Automne 2009
1. GWT (Google Web Toolkit)
Approfondissement
Sujets spéciaux en TI
Le Web 2.0 : concepts et outils
École de technologie supérieure
par
Claude Coulombe
GTI-780 / MTI-780 ETS - Montréal - 2009
2. But
Dans cette présentation vous verrez comment
le Google Web Toolkit (GWT) permet le
développement rapide en Java d'applications
Web 2.0 et AJAX à la fois complexes et
performantes.
http://code.google.com/webtoolkit/
GTI-780 / MTI-780 ETS - Montréal - 2009
3. Pourquoi GWT ? - Problèmes avec JavaScript
Euh!..., il ne connaissait pas
assez le JavaScript...
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
4. Pourquoi GWT ? - Problèmes avec JavaScript
Problèmes de portabilité, incompatibilités des fureteurs, fuites de
mémoire & longs chargements
Pas de typage statique des variables en JavaSript
Le type d'une variable peut changer lorsqu'une nouvelle valeur lui est
affectée (typage dynamique). var unNombre = 2; unNombre = "deux";
Sensible à la moindre coquille, sensible à la casse
formulaire.montnat = document.getElementById(''montant'');
Quelques subtilités : null vs undefined vs false vs ""
Débogage à l'exécution pas à la compilation
Support inégal des outils et IDEs
Problème de sécurité XSS (injection de scripts)
Rareté des « programmeurs experts » en JavaScript
GTI-780 / MTI-780 ETS - Montréal - 2009
5. Pourquoi GWT ? - JS pas conçu pour de gros logiciels
Made in
Jav aScript
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
6. Pourquoi GWT ? - JS pas conçu pour de gros logiciels
Excellente pour l'écriture rapide de petites applications, la souplesse de
JavaScript devient un handicap pour l'écriture de gros logiciels et de
logiciels complexes
Le typage dynamique représente une source importante d'erreurs pour de
gros logiciels
Pas d'espace de nommage (collision de variables), manque de modularité
et de capacité à grandir, pas un véritable langage à objets
Mise au point et réutilisation difficiles
Normal, car JS n'a pas été conçu pour de gros logiciels, mais juste pour
mettre un peu d'interactivité dans une page web
On peut voir le JavaScript comme le langage d'assemblage (assembleur)
du fureteur
GTI-780 / MTI-780 ETS - Montréal - 2009
8. Pourquoi GWT ? - Si on pouvait utiliser Java!
Conçu pour le génie logiciel
Véritable langage de POO
Typage statique, compilé, complet
Espace de nommage, notion de paquet (Package)
Répandu, connu et imité!
Langage le plus répandu – 6 millions de développeurs
Multiplateforme - “Write Once, Run Anywhere” - Windows, Linux, OS X
Abondante documentation, livres et cours
Nombreux outils et EDIs
Le plus grand nombre de bibliothèques et canevas d'applications
Le plus grand nombre d'outils en source libre dont Java lui-même
Puissants EDIs*
Eclipse, NetBeans ou IntelliJ
Débogueur / éditeur de code évolué / outil de refactorisation / outil
d'analyse du code
GTI-780 / MTI-780 ETS - Montréal - 2009
10. Qu'est-ce que GWT ?
En mai 2006 Google lance son Google Web Toolkit
Bruce Johnson & Joel Webber
Canevas d'applications Web riches, entièrement basé
Java, « orienté client » et en logiciel libre (Apache 2)
Transcompilateur (cross-compiler) de Java à JavaScript
Développement rapide d'applications Web riches par
des programmeurs Java qui ne maîtrisent pas
JavaScript
Bon à la fois pour enrichir des applications Web avec
des composants Ajax et pour créer des applications
« similaires à des applications bureautiques locales »
mais qui tournent dans un navigateur Web
GTI-780 / MTI-780 ETS - Montréal - 2009
11. Qu'est-ce que GWT ? - Du pur Java!
Plus de 6 millions de développeurs Java
“Write Once, Run Anywhere”
Windows, Linux, Mac OS X
Véritable langage de POO
Utilise un EDI* Java usuel
Débogage du code-client avec EDI
Communication client-server d'objets Java
Code-client plus léger que des applets Java
* EDI : environnement de développement
intégré (en anglais IDE)
GTI-780 / MTI-780 * Source image : http://www.sun.com ETS - Montréal - 2009
12. GWT – Quelques exemples
Lombardi Blueprint (outil de gestion des flux de travail)
http://www.lombardisoftware.com/bpm-blueprint-product.php
Exemples et démos du Google Web Tookit
http://code.google.com/intl/fr-FR/webtoolkit/examples/
GWT-Ext 2.0 Showcase
http://www.gwt-ext.com/demo/
Google Web Toolkit Applications (site d'un livre)
Widget DeskTop Demo
http://desktop.gwtapps.com
Gpokr (jeu de poker en ligne)
www.gpokr.com
OpenSyllabus (éditeur structuré de plan de cours)
http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home
GTI-780 / MTI-780 ETS - Montréal - 2009
13. Google Wave – Un exemple qui fait des vagues!
Source : http://googleblog.blogspot.com/2009/05/went-walkabout-brought-back-google-wave.html
GTI-780 / MTI-780 ETS - Montréal - 2009
14. OpenSyllabus – Un exemple Québécois!
OpenSyllabus : un éditeur structuré de plan de cours
http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home
GTI-780 / MTI-780 ETS - Montréal - 2009
16. GWT – Avantages pour les utilisateurs
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
17. GWT – Avantages pour les utilisateurs
Réponses rapides aux actions de l'utilisateur
La vitesse est vitale, spécialement au démarrage
Ne requiert pas de plugiciel, Web Start, ni même de
JVM
Pas de long téléchargement, ni d'installation
Compatible avec tous les fureteurs Web récents
Donne la préférence aux composants natifs de l'IU
L'utilisateur conserve le contrôle du navigateur Web en
tout temps
Gestion de l'historique de navigation
Produit des applications Web riches, rapides et légères
GTI-780 / MTI-780 ETS - Montréal - 2009
19. GWT – Avantages pour les développeurs
Un unique langage, le “Java”
Bien que le code-serveur peut être en n'importe quel langage
Gère les différences entre les fureteurs Web
Bibliothèque OO de composants IUG
Semblable à SWING ou AWT
Encourage les bonnes pratiques du génie logiciel en s'appuyant
sur des outils Java matures et performants
Eclipse, NetBeans. IntelliJ
Communications Ajax faciles via RPC
S'intègre aux technologies Web standards
Réduit la charge sur le serveur et le réseau
Le code-client est beaucoup plus léger qu'un Applet Java
GTI-780 / MTI-780 ETS - Montréal - 2009
21. Application GWT – Client & Serveur
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.
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
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
22. Transcompilateur Java à JavaScript
GWT version 1.5 supporte :
* Firefox 1.0, 1.5, 2, 3.x
Java * Internet Explorer 6, 7, 8
* Safari 2.0, 3.0
* Opera 9.0
Write Once...
JavaScript
Run Everywhere!
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
23. Transcompilateur Java à JavaScript
Transcompilateur GWT prend du code-client en Java et
produit du code JavaScript optimisé
JavaScript devient le code assembleur du fureteur
Élimination du code non-utilisé dans les bibliothèques,
inférence de type, retrait du polymorphisme,
compression “agressive” du code, « Obfuscation »
Le JavaScript produit est généralement plus rapide
que du JavaScript écrit à la main*
Emploi de la liaison différée (“Deferred Binding”) pour
produire du code JavaScript optimal pour chaque
fureteur (i.e. génère du code spécifique à chaque
fureteur)
« Ne payez que pour ce que vous utilisez »
GTI-780 / MTI-780 * Note : sauf si code < 100 lignes ETS - Montréal - 2009
24. Transcompilateur- Liaison différée
Générer du code optimal et spécifique à chaque fureteur
Copyright Google 2008
« Ne payez que pour ce que vous utilisez »
GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009
26. Transcompilateur – Code optimisé!
Copyright Google 2008
« Ne payez que pour ce que vous utilisez »
GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009
28. Vue d'ensemble de l'architecture GWT
Trans
compilateur
Interface Java à Bibliothèque
Native JavaScript d'émulation
JavaScript JRE
JSNI
GWT API
Bibliothèque
Communication
IUG avec le serveur
Analyseur Gestion de Intégration
Widgets & RPC & Ajax XML l'historique à JUnit
Panels
GTI-780 / MTI-780 ETS - Montréal - 2009
29. GWT – Structure bibliothèque & API
La structure du gwt-user.jar de GWT 1.5.3 Note : Transcompilateur GWT
Trans
dans gwt-dev-windows.jar
compilateur
Interface Java à Bibliothèque
Native JavaScript d'émulation
JavaScript
JRE
JSNI
GWT API
Bibliothèque
Communication
IUG Analyseur Gestion de Intégration
avec le serveur
Widgets & XML l'historique à JUnit
RPC & Ajax
Panels
GTI-780 / MTI-780 ETS - Montréal - 2009
30. Transcompilateur Java à JavaScript
Code Java
MonProjet
.java Code
JavaScript
MonProjet.js
Ressources
MonProjet. html
MonProjet.css,
RessourcesMonPr
.png, .jpg, .gif
Transcompilateur ojet.
html
MonProjet.css,
Configuration .png, .jpg, .gif
Module
MonProjet.gwt
.xml
Autres .jar
Gwt-dev-
gwt-user.jar Compatibles
windows.jar
avec GWT
GTI-780 / MTI-780 ETS - Montréal - 2009
31. Transcompilateur Java à JavaScript
Du JavaScript plus rapide que du code écrit à la main !!!
Ainsi, ceci
public static void onModuleLoad() {
Button b = (new Button()).Button();
b.setText("Java vers JavaScript");
}
après compilation, donnera quelque chose comme cela...
function onModuleLoad(){
var b;
b = $Button(new Button());
$setInnerText(b.element, 'Java vers JavaScript');
}
GTI-780 / MTI-780 ETS - Montréal - 2009
32. Emulation – JRE (Java Runtime Environment)
Le transcompilateur de GWT fournit l'émulation en
JavaScript d'un sous-ensemble du langage Java (JRE)
généralement utilisé pour la programmation de base
java.lang, java.util, java.io, java.sql
Restriction pour le code client
devant être traduit en JavaScript.
Aucune restriction n'est imposée
du côté du code serveur : Java
(JSP/JSF/Servlet), PHP,
ASP .NET, Perl, RoR, Python, Perl, ...
GTI-780 / MTI-780 * Source image : http://www.sun.com ETS - Montréal - 2009
33. JSNI : JavaScript Native Interface
GWT permet l'intégration facile avec des bibliothèques
JavaScript externes grâce à son JavaScript Native
Interface (JSNI)
Interagir directement avec JavaScript (accès natif) à
partir de Java et vice-versa
Inclusion automatique des bibliothèques JavaScript
GWT 1.5 introduit le concept de JavaScript Overlay
pour simplifier l'intégration de prototypes JavaScript
dans GWT
GTI-780 / MTI-780 ETS - Montréal - 2009
34. JSNI : JavaScript Native Interface
GWT permet l'intégration facile avec des bibliothèques
JavaScript externes grâce à son JavaScript Native
Interface (JSNI)
Interagir directement avec JavaScript à partir de Java
et vice-versa
Inclusion automatique des bibliothèques JavaScript
// Déclaration de la méthode en Java...
native String inverserNomPrenom(String nom)
/*-{
// Implémentation en JavaScript
var re = /(w+)s(w+)/;
return name.replace(re, '$2, $1');
}-*/;
GTI-780 / MTI-780 ETS - Montréal - 2009
35. JSNI : Type Overlay JavaScript
GWT 1.5 introduit le concept de JavaScript Overlay pour simplifier
l'intégration de prototypes JavaScript dans GWT
Une structure de données JSON (JavaScript Object Notation)
var electionsJSON = [
{ "Prenom" : "Pauline", "NomFamille" : "Marois" }, { "Prenom" : "Amir", "NomFamille" : "Khadir" },
{ "Prenom" : "Mario", "NomFamille" : "Dumont" }, { "Prenom" : "Jean", "NomFamille" : "Charest" }
];
// Un type Overlay JavaScript
class PoliticienQC extends JavaScriptObject {
// Un type Overlay JS a toujours un constructeur protected, à zéro argument
protected PoliticienQC() { }
// Les méthodes dans un Overlay JavaScript sont en JSNI
public final native String getPrenom() /*-{ return this.Prenom; }-*/;
public final native String getNomFamille() /*-{ return this.NomFamille; }-*/;
// Notez, toutefois, que toutes les méthodes ne sont pas obligatoirement en JSNI
public final String getNomComplet() {
return getPrenom() + " " + getNomFamille();
}
}
GTI-780 / MTI-780 * Source : http://googlewebtoolkit.blogspot.com ETS - Montréal - 2009
36. JSNI : Type Overlay JavaScript
// Obtenir un prototype JavaScript pour l'Overlay
class MonModuleEntryPoint implements EntryPoint {
public void onModuleLoad() {
PoliticienQC p = getPremierPoliticien();
// Youppi! Maintenant j'ai un prototype JavaScript qui est aussi un PoliticienQC
Window.alert("Bonjour, " + p.getPrenom());
}
// Utilisation de JSNI pour obtenir le prototype JSON que nous désirons
// Le prototype JSON object reçoit un type Java implicitement
// en se basant sur le type retourné par la méthode
private native PoliticienQC getPremierPoliticien() /*-{
// Obtenir une référence au premier PoliticienQC dans le tableau JSON
return $wnd.electionsJSON[0];
}-*/;
}
GTI-780 / MTI-780 * Source : http://googlewebtoolkit.blogspot.com ETS - Montréal - 2009
37. Génie logiciel pour les applications Web
riches & Ajax
Support du cycle de vie complet du logiciel
Patrons de conception OO éprouvés
EDIs* Java matures
Cycle : édition / test / débogage /
Restructuration (refactoring)
Support au débogage
Détection d'erreurs à la compilation
Mise au point & débogage en mode hôte
Journalisation (logging)
Support de JUnit
* EDI : environnement de développement
intégré (en anglais IDE)
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
40. GWT en « mode hôte » - Débogage
Application GWT peut s'exécuter en « mode
hôte » (“Hosted Mode”)
En « mode hôte », la JVM exécute le code GWT
comme du bytecode Java à l'intérieur d'une
fenêtre de navigateur Web
L'exécution en « mode hôte » facilite le
débogage :
Éditer le code-source
Rafraîchir
Examiner les résultats
GTI-780 / MTI-780 ETS - Montréal - 2009
43. GWT en « Mode Web » - Déploiement
Une fois testé en « Mode Hôte », vous pouvez
compiler votre code source Java en JavaScript
et déployer votre application Web
Une application Web GWT qui a été déployée
est dite en « Mode Web »
Une fois compilé le code-client est uniquement
du pur JavaScript et du HTML
Afinde déployer votre application Web en
production, vous déplacez les fichiers du
répertoire « war » sur le serveur Web, i.e.
Tomcat (ou Apache)
GTI-780 / MTI-780 ETS - Montréal - 2009
44. Vue d'ensemble de la bibliothèque de
composants d'interface utilisateur (IU)
Composants d'interface-utilisateur
Programmation par événements
Exemples d'événements
Gestion des événements
Panneaux
Bouton simple
Case à cocher
Bouton radio
Boîte de texte
Liste déroulante
Arbre
Éditeur de textes
Support des CSS
I18N
Gestion de l'historique
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
45. IU - Composants
Balises HTML usuelles, comme img, anchor, hyperlink
Bouton, bouton radio, bouton à bascule, case à cocher
Menu, sous-menu, menu déroulant
Champ de texte, zone de texte
Onglets, liste déroulante, boîte de dialogue
Séparateurs de fenêtre
Widgets complexes comme des tables, boîte de
téléversement de fichier, widget d'arbres, éditeur de
texte enrichi,
Différents panneaux très utiles pour la disposition
GTI-780 / MTI-780 ETS - Montréal - 2009
46. IU – Programmation par événements
Essentiellement de la programmation par événements
Une méthode ou procédure s'exécute quand un
événement est déclenché
Dans une IU, un événement est déclenché chaque fois
que l'utilisateur clique sur la souris, appuie sur une
touche du clavier, sélectionne un élément dans un
menu, ouvre ou ferme une fenêtre, etc.
À chaque composant de l'IU appelé aussi contrôle ou
widget (comme un bouton, un menu, etc.) est associé
un ou plusieurs gestionnaires d'événements (Listener
ou Handler) qui peuvent comporter des paramètres
GTI-780 / MTI-780 ETS - Montréal - 2009
47. IU – Exemples d'événements
OnClick – déclenché quand l'usager clique un élément
OnBlur – déclenché quand un élément perd le focus du clavier
OnChange - déclenché quand le contenu de la saisie change
OnFocus – déclenché quand un élément reçoit le focus clavier
OnKeyDown – déclenché quand l'usager appuie sur une touche
OnKeyUp – déclenché quand l'usager relâche une touche
OnKeyPress – déclenché quand un caractère est généré
OnMouseOver – déclenché quand la souris passe au-dessus
OnMouseMove – déclenché quand la souris entre dans la zone
OnMouseOut – déclenché quand la souris sort de la zone
OnScroll – déclenché quand un élément avec défilement bouge
OnLoad – déclenché quand un élément termine de se charger
OnDblClick – déclenché quand l'usager double-clique - Montréal - 2009
GTI-780 / MTI-780 ETS
48. IU – Récepteur / gestionnaire d'événements
GWT utilise le concept de récepteur ou gestionnaire («
listener interface ») pour traiter les événements
Semblable à d'autres canevas d'applications
graphiques comme SWING
Le récepteur via l'interface “listener interface” définit
une ou plusieurs méthodes que le widget appelle en
réaction à un événement
Button unBouton = new Button("Cliquez moi!");
unBouton.addClickListener(new ClickListener() {
public void onClick(Widget emetteur) {
// traitement du Clic
}
});
GTI-780 / MTI-780 ETS - Montréal - 2009
49. Interface Utilisateur - Composants
Éléments statiques: étiquette (Label), HTML, Image, hyperlien (Hyperlink), champ
caché (Hidden)
Widgets (E/S) : bouton (Button), bouton poussoir (PushButton), bouton à bascule
(ToggleButton), case à cocher (CheckBox), bouton radio (RadioButton), menu déroulant
(ListBox), zone de texte (TextBox), zone de texte avec suggestions (SuggestBox),
zone d'entrée de mot de passe (PasswordTextBox), zone de texte multiligne (TextArea),
zone d'édition de texte enrichi (RichTextArea)
Widgets complexes : arbre (Tree), barre de menus (MenuBar), téléversement de
fichiers (FileUpload)
Panneaux de disposition simple : panneau en file (FlowPanel), panneau horizontal
(Horizontal Panel), panneau vertical (VerticalPanel), panneau à coulisse
(HorizontalSplitPanel, VerticalSplitPanel), panneau HTML (HTMLPanel), panneau
superposé (DeckPanel)
Panneaux de disposition complexe : table flexible* (FlexTable), grille (Grid), panneau
polyptyque* (DockPanel), panneau à onglets (TabPanel), panneau en pile (StackPanel)
Panneaux conteneurs simples : panneau composite ou composite (Composite) panneau
simple (SimplePanel), panneau à barre de défilement (ScrollPanel), panneau de focus
(FocusPanel)
Panneaux conteneurs complexes : panneau de formulaire (FormPanel), panneau à
dévoilement* (DisclosurePanel), panneau surprise* (PopupPanel), boîte de dialogue
(DialogBox)
http://gwt.google.com/samples/Showcase/Showcase.html
GTI-780 / MTI-780 ETS - Montréal - 2009
51. Interface Utilisateur – Bouton simple
Bouton (Button)
// 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() {
public void onClick(Widget sender) {
Window.alert("Bonjour GWT");
}
});
GTI-780 / MTI-780 ETS - Montréal - 2009
52. Interface Utilisateur – Case à cocher
Case à cocher (CheckBox)
// Création d'une case à cocher
CheckBox caseResidentMtl = new CheckBox("Résident de Montréal");
// La case est cochée par défaut
caseResidentMtl.setChecked(true);
// Attacher un récepteur de clic à la case
caseResidentMtl.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
boolean estMontrealais = ((CheckBox) sender).isChecked();
Window.alert( (estMontrealais ? "" : "non") + " Montréalais");
}
});
GTI-780 / MTI-780 ETS - Montréal - 2009
53. Interface Utilisateur – Bouton radio
Bouton radio (RadioButton)
// Création d'un groupe de boutons radio
RadioButton rbBleu = new RadioButton("groupeRbCouleurs", "bleu");
RadioButton rbBlanc = new RadioButton("groupeRbCouleurs", "blanc");
RadioButton rbRouge = new RadioButton("groupeRbCouleurs", "rouge");
// Cocher le bouton bleu par défaut
rbBleu.setChecked(true);
// Ajouter le groupe de boutons radio à un panneau
FlowPanel panneau = new FlowPanel();
panneau.add(rbBleu);
panneau.add(rbBlanc);
panneau.add(rbRouge);
GTI-780 / MTI-780 ETS - Montréal - 2009
55. Interface Utilisateur – Liste déroulante
• Liste déroulante (ListBox)
// Créer une liste, et lui ajouter quelques items
ListBox listeChoix = new ListBox();
listeChoix.addItem("Pied-De-Vent");
listeChoix.addItem("Notre-Dame-des-Neiges");
listeChoix.addItem("Migneron");
listeChoix.addItem("Riopelle de l'Isle");
listeChoix.addItem("Bleu Bénédictin");
// Faire assez de place pour les 6 items
listeChoix.setVisibleItemCount(6);
// Ajouter un gestionnaire sur les événements de sélection
listeChoix.addChangeHandler(new ChangeHandler() {
public void onChange(ChangeEvent event) {
alert(listeChoix.getSelectedIndex().getValue());
}
});
GTI-780 / MTI-780 ETS - Montréal - 2009
56. Interface Utilisateur – Arbre
• Arbre (Tree) : une hiérarchie déployable de widgets
TreeItem tronc = new TreeItem("Racine");
tronc.addItem("item 0");
tronc.addItem("item 1");
tronc.addItem("item 2");
// Ajouter une case à cocher à l'arbre
TreeItem item = new TreeItem(new CheckBox("item 3"));
tronc.addItem(item);
Tree arbre = new Tree();
arbre.addItem(tronc);
GTI-780 / MTI-780 ETS - Montréal - 2009
57. Interface Utilisateur – Éditeur de textes
Éditeur de textes riche (RichTextArea)
// Crée la zone d'édition et sa barre de menu
RichTextArea editeur = new RichTextArea();
editeur.setSize("100%", "14em");
RichTextToolbar barreMenu =
new RichTextToolbar(editeur);
barreMenu.setWidth("100%");
// Ajoutez les composants à un panneau
Grid panneauGrille = new Grid(2, 1);
panneauGrille.setStyleName("editeur");
panneauGrille.setWidget(0, 0, barreMenu);
panneauGrille.setWidget(1, 0, editeur);
GTI-780 / MTI-780 ETS - Montréal - 2009
58. Support des CSS
Séparation du code et de la présentation
Code Java :
public ListWidget(String Item) {
...
setStyleName(“gwt-ListWidget”);
}
Fichier CSS :
.gwt-ListWidget {
background-color:black;
color:lime;
}
GTI-780 / MTI-780 ETS - Montréal - 2009
59. Support des CSS - conseils
Code Java : (usage de CSS primaire et dépendant)
MonPetitWidget monPW = new MonPetitWidget();
monPW.setStylePrimaryName("monPetitWidget");
monPW.addStyleDependentName("selected");
Fichier CSS :
.monpetitWidget {
background-color:black;
color:lime;
}
.monPetitWidget .monPetitWidget-selected {
color:red;
}
Permet de faire varier facilement l'apparence en fonction de l'état
Note : Ne pas utiliser les CSS pour la disposition (ex.
.monPetitWidget { position: absolute; } )
GTI-780 / MTI-780 ETS - Montréal - 2009
61. I18N
Le transcompilateur GWT utilise la liaison différée
(« Deferred Binding ») pour générer une version
différente de l'application Web pour chaque langue
Par exemple, puisque GWT supporte 4 navigateurs
différents, si votre application doit fonctionner en
3 langues, le transcompilateur de GWT produira
12 versions différentes de votre application au
moment de la compilation
À l'exécution, GWT choisira la bonne version de
l'application à montrer à l'utilisateur
GTI-780 / MTI-780 ETS - Montréal - 2009
62. I18N – mécanismes de localisation
“Constants” pour des chaînes constantes et des réglages
“Messages” pour les chaînes avec des arguments
“DateTimeFormat” pour les dates et l'heure
“NumberFormat” pour les nombres et les unités de mesure
Pas de processus dynamique (tout est statique et fait à la
compilation), sinon il faut développer son propre mécanisme
GTI-780 / MTI-780 ETS - Montréal - 2009
63. Gestion de l'historique du navigateur
La gestion de l'historique du navigateur s'occupe des
boutons « avancer » et « reculer » et des liens
Une API simple de gestion de l'historique basée sur
une pile de jetons
– Lorsque l'application démarre, la pile est vide
– Lorsque l'utilisateur clique sur quelque chose
• Vous pouvez ajouter des jetons sur la pile
History.newItem(“nouveauJeton”)
• Classe Hyperlink ajoute des jetons automatiquement
– Vous pouvez aussi réagir aux événements “History
events” en utilisant un HistoryListener
History.addHistoryListener(controle)
GTI-780 / MTI-780 ETS - Montréal - 2009
65. GUI – Patrons de conception - MVC
Patron MVC
Client MVC
Vue: Présentation découplée
Affiche les Échages de
événements données
informations et
achemine les
actions de l'usager
V C
mise à jour
no
es
not
né
tiifii
acc
Contrôleur:
fc
ccè do
on
de ur
atti
sd
nt jo
a o
s e onné
s e nné
me e à
on
Établit les liens
n ll es
n
n
d
ge is
ect es
et
an m
entre le Modèle et
ure
ue
M la Vue
au
aux
ch
x
Reçoit les
événements de la
Modèle:
Vue et gère les
Données de l'application actions de l'usager
(POJOs) Notifie les
changements du modèle
par des événements
transmis aux vues
abonnées
GTI-780 / MTI-780 ETS - Montréal - 2009
66. GUI – Patrons de conception - Observateur
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*
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
quelque sorte abonnés aux modifications des données du modèle.
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
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).
* Patron observateur relie MV et VC dans le patron MVC
GTI-780 / MTI-780 Source figure : R. Dewsbury 2008 – Chap.2, p.96 ETS - Montréal - 2009
67. GUI – Patrons de conception - Composite
Patron Composite (ou Object Composite)
* Source : http://www.google.com
* Source : http://fr.wikipedia.org/wiki/Objet_composite
Facilite la création de Widgets
S'utilise chaque fois qu'on crée un nouveau widget à partir de widgets existants
Offre un meilleur contrôle sur l'API exposé
Généralement préférable à l'utilisation de l'héritage
GTI-780 / MTI-780 ETS - Montréal - 2009
68. GUI – Patrons de conception - Composite
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-780 ETS - Montréal - 2009
71. Ajax – Diagramme de séquence
En mode synchrone, le fureteur est gelé en attendant
la réponse du serveur.
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.
Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php
GTI-780 / MTI-780 ETS - Montréal - 2009
72. Communication avec le serveur & Ajax
Le RPC (« Remote Procedure Call »), appel de procédure à
distance
RPC rend facile l'échange d'objets Java ou POJOS (sérialisés)
entre le code-client et le code-serveur
Fournit une procédure automatique de sérialisation des objets
Autres outils Ajax :
HTTPRequest
RequestBuilder
FormPanel
Support de :
XML
JSON (JavaScript Object Notation)
GTI-780 / MTI-780 ETS - Montréal - 2009
74. Client léger HTML vs client riche Ajax
Client HTML
(fureteur)
Serveur
sans état avec état
(stateless) (statefull)
Pas d'état persistant
entre les transactions qui sont
considérées comme indépendantes
Client JavaScript
(fureteur) Serveur
avec état sans état
(statefull) (stateless)
Pas d'état persistant
entre les transactions qui sont
considérées comme indépendantes
GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009
75. Appel de procédure à distance
GWT 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
J
hébergés sur un serveur JEE. Client et serveur parlent alors le même langage,
i.e. le Java
GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009
76. RPC (Remote Procedure Call)
Un objet Java MesDonneesDO à échanger
import com.google.gwt.user.client.rpc.IsSerializable;
public class MesDonneesDO implements IsSerializable {
//...
}
Une première interface définit le service
import com.google.gwt.user.client.rpc.RemoteService;
public interface MonService extends RemoteService {
MesDonneesDO getReponseMonService(String requete);
}
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
appeler le service.
import com.google.gwt.user.client.rpc.AsyncCallback;
public interface MonServiceAsync {
public void getReponseMonService(String requete,
AsyncCallback maProcedureDeRappel);
}
GTI-780 / MTI-780 ETS - Montréal - 2009
77. RPC - Code-serveur
Classe à implémenter du côté serveur hérite de 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.MonService;
public class MonServiceImpl extends RemoteServiceServlet implements MonService {
public MesDonneesDO getReponseMonService(String requete) {
if (requete.length() < 1) {
throw new IllegalArgumentException("Requete invalide.");
}
MesDonneesDO resultat = new MesDonneesDO();
resultat.setDonnees("...");
if ( isInvalide( resultat )) {
return null;
}
return resultat;
}
public boolean isInvalide(MesDonneesDO resultat) {
Return true; // à modifier
}
}
GTI-780 / MTI-780 ETS - Montréal - 2009
78. RPC - Code-client
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.
public class MonClientRPC implements EntryPoint {
public void onModuleLoad() {
final Button bouton = new Button("Appel RPC");
final MonServiceAsync serviceProxy =
(MonServiceAsync)GWT.create(qc.ets.web2.gwt.client.MonService.class);
ServiceDefTarget pointService = (ServiceDefTarget) serviceProxy;
pointService.setServiceEntryPoint(GWT.getModuleBaseURL() + "/reponseService");
bouton.addClickListener(new ClickListener( ) {
public void onClick(Widget emetteur) {
AsyncCallback maProcedureDeRappel = new AsyncCallback() {
public void onSuccess(Object resultat) {
MesDonneesDO resultatDO = (MesDonneesDO) resultat;
System.out.println("*** SUCCES RPC ***n" + resultatDO.getDonnees());
}
public void onFailure(Throwable erreur) {
System.out.println("*** ERREUR RPC ***" + erreur.getMessage());
}
};
serviceProxy.getReponseMonService("Requete bidon", maProcedureDeRappel);
}});
RootPanel.get("emprise1").add(bouton);
}
}
GTI-780 / MTI-780 ETS - Montréal - 2009
80. Intégration facile aux APIs Google
Google offre un riche écosystème d'APIs en source
libre
Androïd : plateforme Java en source libre pour la
téléphonie intelligente
AppEngine : hébergement d'applications Java dans le
nuage
OpenSocial : norme libre pour les sites sociaux
Google Maps : services de cartes et géolocation
Google Ajax Searh APIs : le moteur Google Search
Google Gears API : BD locale et navigation hors ligne
Google Language API : services de traduction
YouTube widget ?
GTI-780 / MTI-780 ETS - Montréal - 2009
82. Créer un squelette d'application GWT
GWT crée automatiquement un code-client
rudimentaire
Vous pouvez ensuite mettre de la chair sur ce
squelette dans le but de créer une application Web
plus sophistiquée
GWT
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
83. Créer un squelette d'application GWT
public class Bonjour implements EntryPoint {
public void onModuleLoad() {
Button bouton = new Button("Cliquez-moi!",
new ClickListener() {
public void onClick(Widget sender) {
Window.alert("Bonjour GWT");
}
});
RootPanel.get().add(bouton);
}
}
GTI-780 / MTI-780 ETS - Montréal - 2009
84. Enrichir une page web
GWT permet d'ajouter des composants graphiques
interactifs dans une page Web
Un composant GWT peut être intégré dans n'importe
quelle page HTML, ainsi l'application continue à
ressembler à une page Web
Tout fichier HTML incluant un certain jeu de balises
peut servir de support à une application GWT
GWT ne cherche pas exclusivement à ressembler à
une application bureautique en exécution locale
Le résultat est juste une meilleure application Web
Exemple : application d'ouverture de session (login)
GTI-780 / MTI-780 ETS - Montréal - 2009
85. Créer des applications Web similaires à
des applications bureautiques locales
Ouverture de plusieurs fenêtres à la fois dans le
navigateur
Déplacement des fenêtres dans le navigateur,
redimensionnement et défilement des fenêtres
Glisser et déposer des contenus
Applications Web se comportant « comme des
applications bureautiques locales »
GTI-780 / MTI-780 ETS - Montréal - 2009
86. Qui peut le mieux profiter de GWT ?
J'
GWT
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
87. Qui peut le mieux profiter de GWT ?
Designers Web
– GWT utilise les feuilles de style CSS
– Doivent apprendre Java
Développeurs d'applications Web
– Une application GWT s'exécute sur le client plutôt que d'être
contrôlée entièrement par le serveur
– Doivent maîtriser les technologies du client et de présentation
Développeurs Ajax (gourous JavaScript)
– GWT intègre facilement le code JavaScript grâce à JSNI
– Doivent laisser tomber certaines habitudes du codage JS
Développeurs d'applications Java
– Réaliser des Web-app. avec des outils et un environnement familier
– Doivent apprendre CSS & les restrictions particulières des Web-app.
GTI-780 / MTI-780 ETS - Montréal - 2009
89. GWT vs autres solutions Web riche
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
90. GWT vs autres solutions Web riche
Outils purs JavaScript (Scriptaculous, Prototype, DWR, JQuery, YUI, etc.)
Facilitent beaucoup la programmation JavaScript mais ça reste du JavaScript!
JavaServer Faces - Norme JEE, canevas d'applications Web populaire, basé
sur le serveur, plutôt complexe
JavaFX - Trop tôt pour se prononcer, exige JVM, langage à script
Java Applet - Trop lourd, exige JVM, doivent beaucoup s'améliorer
ZK - Rapide et facile à programmer, basé sur le serveur, licence GPL
Adobe Flash, Flex, AIR (Adobe Integrated Runtime) et OpenLazslo
Basé sur le serveur, +/- propriétaire, exige plugiciel Flash, langage à scripts
Micro$oft Silverlight - Pas Java, propriétaire & basé Windows
Windows...Volta, 5 décembre 2007, une copie GWT pour .NET
http://labs.live.com/volta
Ruby - Innovateur, mais toujours à base de pages et basé sur le serveur..
GTI-780 / MTI-780 ETS - Montréal - 2009
92. GWT - Avantages
Bon pour enrichir des applications Web avec Ajax et créer
des applications Web de « style bureautique »
Un seul langage: JAVA
Développement et mise au point rapide dans des EDIs
favorisant une bonne productivité et qualité du code
Riche bibliothèque de composants (~ SWING)
Très bon support Ajax
Performant & économe en ressources réseau & serveur
Code source libre, licence Apache 2, bien documenté
Supporté par GOOGLE... et l'écosystème des outils Google
Pas magique mais GWT a le potentiel de devenir le
« prochain gros truc »
GTI-780 / MTI-780 ETS - Montréal - 2009
94. GWT - Inconvénients
Nécessite que le fureteur exécute JavaScript
Exige la connaissance de la programmation Java
Exige une séparation nette client et serveur
Les composants (Widgets) sont de sources et de
qualités inégales
Dépend des performances du transcompilateur
Quelques problèmes de compatibilité entre les
fureteurs Web, surtout au niveau des CSS
Certains problèmes demandent une expertise JS
L'aspect sécurité est à surveiller
GWT ne va pas résoudre « magiquement » tous les
problèmes avec Ajax ou le Web 2.0
GTI-780 / MTI-780 ETS - Montréal - 2009
95. Ressources - Livres
GWT in Action: Easy Ajax with the Google Web
Toolkit
par Robert Hanson, Adam Tacy
600 pages
Manning Publications
(5 juin, 2007)
www.manning.com/hanson/
Google Web Toolkit Applications
par Ryan Dewsbury
608 pages
Prentice Hall
(15 décembre, 2007)
www.gwtapps.com
GTI-780 / MTI-780 ETS - Montréal - 2009
96. Ressources - Livres
Google Web Toolkit Solutions : More Cool &
Useful Stuff
par David Geary, Rob Gordon
408 pages
Prentice Hall
(17 novembre, 2007)
www.coolandusefulgwt.com
GWT in Practice
par Robert T. Cooper, Charlie E. Collins
358 pages
Manning Publications
(12 mai, 2008)
www.manning.com/cooper/
GTI-780 / MTI-780 ETS - Montréal - 2009