Présentation d\'introduction à 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 2008
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Introduction à GWT - GTI780 & MTI780 - ETS - A08
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 Montréal, novembre 2008
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 Montréal, octobre 2008
3. Biographie
Claude Coulombe (Ph.D. en cours, M.Sc. informatique, B.Sc. en
physique) est un pionnier des applications de l'IA. Après une
carrière d'entrepreneur bien remplie, comme fondateur de
Machina Sapiens inc (Correcteur 101) et plus récemment de
Lingua Technologies (BiTextum), Claude a choisi de pousser plus
loin ses recherches du côté de l'apprentissage statistique et des
applications Web innovatrices.
Familier des méthodologies de développement agiles, de la
programmation par objets et de JEE, Claude est un expert des
technologies émergentes du Web 2.0, des applications Web
riches, d'Ajax et du Google Web Toolkit.
www.ClaudeCoulombe.com
GTI-780 / MTI-780 Montréal, octobre 2008
4. Pourquoi GWT ? - Problèmes avec JavaScript
Euh!..., il ne connaissait pas
assez le JavaScript...
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
5. Pourquoi GWT ? - Problèmes avec JavaScript
Rareté des experts en JavaScript
Beaucoup d'efforts pour contourner les incompatibilités des
navigateurs, les fuites de mémoire et les longs chargements
JS n'est pas un véritable langage à objets
Pas de typage statique
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
GTI-780 / MTI-780 Montréal, octobre 2008
6. GWT – le « prochain gros truc! »
GWT
GTI-780 / MTI-780 * Source : http://www.google.com Montréal, octobre 2008
7. 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 navigateur Web
GTI-780 / MTI-780 Montréal, octobre 2008
8. 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 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 Montréal, octobre 2008
9. GWT – Quelques exemples
Exemples et démos du Google Web Tookit
http://code.google.com/webtoolkit/examples/
http://google-web-toolkit-incubator.googlecode.com/svn/trunk/demo/
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
Lombardi Blueprint (outil de gestion des flux de travail)
http://www.lombardisoftware.com/bpm-blueprint-product.php
OpenSyllabus (éditeur structuré de plan de cours)
http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home
GTI-780 / MTI-780 Montréal, octobre 2008
10. GWT – Avantages pour les utilisateurs
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
11. 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 navigateurs 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 Montréal, octobre 2008
12. GWT – Avantages pour les développeurs
aniaque
GWT
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
13. 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 navigateurs 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 Montréal, octobre 2008
15. 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 Montréal, octobre 2008
16. 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 Montréal, octobre 2008
17. 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 Montréal, octobre 2008
18. 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 Montréal, octobre 2008
19. 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(quot;Java vers JavaScriptquot;);
}
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 Montréal, octobre 2008
20. 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 Montréal, octobre 2008
21. 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 Montréal, octobre 2008
22. 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 Montréal, octobre 2008
23. 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(quot;Cliquez moi!quot;);
unBouton.addClickListener(new ClickListener() {
public void onClick(Widget emetteur) {
// traitement du Clic
}
});
GTI-780 / MTI-780 Montréal, octobre 2008
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
GWT 1.5 introduit le concept de JavaScript Overlay
pour simplifier l'intégration de prototypes JavaScript
dans GWT
GTI-780 / MTI-780 Montréal, octobre 2008
25. 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 Montréal, octobre 2008
26. 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 Montréal, octobre 2008
28. 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 Montréal, octobre 2008
29. Communication avec le serveur & Ajax
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 Montréal, octobre 2008
30. 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 Montréal, octobre 2008
31. 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 Montréal, octobre 2008
32. 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 Montréal, octobre 2008
33. Démo – Bâtir des applications GWT
GWT
en Action
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
34. 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 Montréal, octobre 2008
35. 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 Montréal, octobre 2008
36. 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 Montréal, octobre 2008
37. Qui peut le mieux profiter de GWT ?
J'
GWT
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
38. 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 Montréal, octobre 2008
39. GWT vs autres solutions Web riche
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
40. 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
http://labs.live.com/volta
Ruby - Toujours à base de pages et basé sur le serveur..
GTI-780 / MTI-780 Montréal, octobre 2008
42. 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 Montréal, octobre 2008
43. 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 Montréal, octobre 2008
44. 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 Montréal, octobre 2008
45. 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 Montréal, octobre 2008