Présentation d'introduction à GWT dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'École de technologie supérieure, Montréal, Automne 2009
1. Le Google Web Toolkit (GWT):
réalisation facile d'applications
AJAX et Web 2.0 pour programmeurs Java
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.
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
Beaucoup d'efforts pour contourner les incompatibilités des fureteurs,
les fuites de mémoire et les longs chargements
JS n'est pas un véritable langage à objets
Pas de typage statique mais typage dynamique
Sensible à la moindre coquille
formulaire.montnat = document.getElementById(''montant'');
Quelques subtilités : “null” vs “undefined” vs “false” vs “”
Débogage à l'exécution pas à la compilation
JS n'a pas été conçu pour de gros logiciels, mais juste pour mettre un
peu d'interactivité dans une page web
Manque de modularité et de capacité à grandir
Mise au point et réutilisation difficiles des composants JS et Ajax
Support inégal des outils JavaScript et Ajax
Rareté des experts en JavaScript
GTI-780 / MTI-780 ETS - Montréal - 2009
6. Qu'est-ce que GWT ?
En mai 2006 Google lance son Google Web Toolkit
– Bruce Johnson & Joel Webber
Logiciel libre (licence Apache 2), canevas d'applications
Web riches, entièrement basé Java, « orienté client »
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 fureteur Web
GTI-780 / MTI-780 ETS - Montréal - 2009
7. Qu'est-ce que GWT ? - Du pur Java!
Plus de 6 millions de développeurs Java
Riche écosystème
“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 Java
Communication client-server d'objets Java
Code-client beaucoup plus léger qu'avec 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
8. 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
9. GWT – Avantages pour les utilisateurs
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
10. 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
12. 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
14. 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
15. 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
16. Transcompilateur Java à JavaScript
GWT version 1.4 supporte :
Java * Firefox 1.0, 1.5, 2, 3.x
* Internet Explorer 6, 7
* 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
17. Transcompilateur Java à JavaScript
Transcompilateur GWT prend du code-client en Java et le
traduit en JavaScript optimisé
Bibliothèque d'émulation JRE supporte un grand nombre de
classes de java.lang & java.util
http://code.google.com/webtoolkit/documentation/jre.html
Maintenant pour Java 1.5 ou Java 5
Tout le code-client va être compilé en JavaScript. Donc, il
faut seulement des bibliothèques et du code Java qu'on
peut traduire en JavaScript du côté client
Le code-serveur n'a pas ce type de contraintes
Emploi de la liaison différée (“Deferred Binding”) pour
produire du code JavaScript optimal
« Ne payez que pour ce que vous utilisez »
GTI-780 / MTI-780 ETS - Montréal - 2009
18. 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
19. Transcompilateur- Liaison différée
Copyright Google 2008
« Ne payez que pour ce que vous utilisez »
GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009
20. Vue d'ensemble de la bibliothèque de
composants d'interface utilisateur
Composants d'interface-utilisateur
Gestion des événements
Support des CSS
I18N
Support du glisser-déposer
GTI-780 / MTI-780 ETS - Montréal - 2009
21. Interface Utilisateur - 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
22. Gestion des événements
GWT utilise le concept de récepteur (« 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
23. 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
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
24. 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
25. 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
27. 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
28. Communication avec le serveur & Ajax
Le RPC (« Remote Procedure Call »), appel de procédure à
distance
RPC rend facile l'échange d'objets Java (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
29. GWT en « mode hôte » - Débogage
Dans Eclipse, une 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
Le « mode hôte » facilite la mise-au-point :
Éditer le code-source
Rafraîchir
Examiner les résultats
GTI-780 / MTI-780 ETS - Montréal - 2009
30. GWT + EDIs Java => 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 : environnements de développement
intégrés (en anglais IDE)
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
31. 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
Afin de déployer votre application Web en
production, vous devez déplacer les fichiers du
répertoire www/... sur le serveur Web, i.e.
Tomcat (ou Apache)
GTI-780 / MTI-780 ETS - Montréal - 2009
33. 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
34. 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
35. 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
36. Qui peut le mieux profiter de GWT ?
J'
GWT
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
37. 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
38. GWT vs autres solutions Web riche
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
39. 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 à script
Micro$oft Silverlight - Pas Java, propriétaire & basé Windows
Windows...Volta, 5 décembre 2007, une copie GWT pour .NET
Ruby - Toujours à base de pages et basé sur le serveur..
GTI-780 / MTI-780 ETS - Montréal - 2009
41. 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
42. 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
43. 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
44. 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