Normes de base du Web - GTI780 & MTI780 - ETS - A08
Gwt intro-101
1. GWT 101
réalisation facile
d'applications Web riches
Présentation au GTUG Montréal
par
Claude Coulombe
GTUG Montréal 7 avril 2011
2. But
Dans cette présentation vous verrez comment
le Google Web Toolkit (GWT) permet le
développement rapide et facile d'applications
Web 2.0 et AJAX.
GTUG Montréal * Source : http://code.google.com/webtoolkit/ 7 avril 2011
3. Web 1.0 – Cliquez & attendez!
GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
4. Web 2.0 – « L'expérience-utilisateur »
GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
5. Ajax – Une véritable percée!
AJAX
Le premier à utiliser le terme AJAX
fut Jesse James Garrett en février 2005
GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
6. Ajax – Une véritable percée!
Ajax (Asynchronous JavaScript & XML)
Fini le pénible rechargement de pages!
Réalise des requêtes asynchrones au serveur
et fait la mise-à-jour de la page Web sans faire
de chargement complet
Applications Web plus réactives et plus
dynamiques
Objet XMLHttpRequest inventé par M$
Basé sur du code-client en JavaScript
Aujourd'hui, Ajax désigne les technologies Web
du fureteur : JavaScript, HTML/DOM, CSS
GTUG Montréal 7 avril 2011
7. Créer des applications Web riches
Applications Web semblables à des applications
bureautiques en exécution locale (Desktop Like)
Interfaces rapides et réactives
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
GTUG Montréal 7 avril 2011
9. Qu'est-ce que GWT ?
En mai 2006 Google lance son Google Web Toolkit
Bruce Johnson & Joel Webber
Boîte à outils Ajax pour des applications Web riches
« orientées client »
Développement rapide d'applications Web riches par des
programmeurs Java ou pour de gros projets où JavaScript
montre ses limites
Transcompilateur (cross-compiler) de Java à JavaScript
Bon à la fois pour enrichir des applications Web avec des
composants Ajax et pour créer des applications similaires à
des applications bureautiques classiques (desktop-like) mais
qui tournent dans un fureteur Web
Logiciel libre (licence Apache 2)
GTUG Montréal 7 avril 2011
10. Génie logiciel pour les appli. Web riches & Ajax
Support du cycle de vie complet du logiciel
Outil interactif de construction d'IU ( GWT Designer)
Outil de construction d'IU déclaratif XML ( UiBinder)
Outil de mesure des performances ( Speed Tracer)
Plugiciel pour Eclipse
Support au débogage
Mise au point & débogage en mode dev
Cycle : édition / test / débogage /
Restructuration / refactorisation (refactoring)
Détection d'erreurs à la compilation
Journalisation (logging)
Patrons de conception OO éprouvés
Composite / MVC / MVP / commande / bus d'événements
Support de JUnit
Support de AppEngine et autres APIs de Google
GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
12. GWT en « mode dev »
Dans Eclipse, une application GWT peut
s'exécuter en « mode dev » (“Development
Mode”)
En « mode dev », la JVM exécute le code GWT
comme du bytecode Java à l'intérieur d'une
fenêtre de navigateur Web
Le « mode dev » facilite la mise-au-point :
Éditer le code-source
Rafraîchir
Examiner les résultats
GTUG Montréal 7 avril 2011
13. Speed Tracer (extension dans Chrome)
GTUG Montréal * Source : http://code.google.com/webtoolkit/ 7 avril 2011
16. Application GWT – Client & Serveur
Le code (en Java ou tout autre
langage) qui s'exécute sur le
serveur est responsible de la
logique de l'application et du
chargement ou de la
sauvegarde 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 fureteur
Web
GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
17. 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
GTUG Montréal * Source : http://code.google.com/webtoolkit/ 7 avril 2011
18. Transcompilateur Java à JavaScript
Java
Write Once...
JavaScript
Run Everywhere!
GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
19. Transcompilateur – Code optimisé!
Copyright Google 2008
« Ne payez que pour ce que vous utilisez »
GTUG Montréal * Source : http://code.google.com/webtoolkit/ 7 avril 2011
20. Pourquoi pas JavaScript?
Made in
Ja vaScript
GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
21. JSNI : JavaScript Native Interface
Intégration facile avec des bibliothèques JavaScript
externes grâce au JavaScript Native Interface (JSNI)
Interagir directement avec JavaScript (accès natif) à partir
de Java et vice-versa
Inclusion automatique des bibliothèques JavaScript
JavaScript Overlay pour simplifier l'intégration de
prototypes JavaScript dans GWT
// Déclaration d'une méthode JavaScript en Java...
native String inverserNomPrenom(String nom)
/*-{
// Implémentation en JavaScript
var re = /(w+)s(w+)/;
return name.replace(re, '$2, $1');
}-*/;
GTUG Montréal 7 avril 2011
23. Bibliothèque de composants d'IU
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
Différents panneaux utilespour la disposition
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, etc.
GTUG Montréal 7 avril 2011
25. Gestion des événements
GWT utilise le concept de gestionnaire d'événement
(handler interface) pour traiter les événements
Semblable à d'autres bibliothèques Java pour la
programmation d'IU comme SWING
Le gestionnaire via l'interface “handler 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.addClickHandler( new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert("Bouton cliqué!");
}
});
GTUG Montréal 7 avril 2011
26. Support des CSS
Séparation du code et de la présentation
Java :
public ListWidget(String Item) {
...
setStyleName(“gwt-ListWidget”);
}
CSS :
.gwt-ListWidget {
background-color:black;
color:lime;
}
GTUG Montréal 7 avril 2011
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 6
navigateurs différents, si votre application doit
fonctionner en 3 langues, le transcompilateur
de GWT produira 18 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
GTUG Montréal 7 avril 2011
30. 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
GTUG Montréal * Source : http://code.google.com/webtoolkit/ 7 avril 2011
31. 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
Procédure automatique de sérialisation des objets
Autres outils Ajax :
HTTPRequest
RequestBuilder
FormPanel
Support de :
XML
JSON (JavaScript Object Notation)
GTUG Montréal 7 avril 2011
32. Intégration facile aux APIs Google
GTUG Montréal * Source : http://code.google.com/webtoolkit/ 7 avril 2011
33. Intégration facile aux APIs Google
Google a un riche écosystème d'APIs en source libre
AppEngine : déploiement facile d'applications GWT
dans le nuage
Androïd : réalisation d'applications mobiles avec GWT
OpenSocial : réalisation facile de gadgets avec GWT
Google Maps APIs : services de cartes et géolocation
Google Ajax Search APIs : le moteur Google Search
Google Gears API : BD locale et navigation hors ligne
Google Language API : services de traduction
...
GTUG Montréal 7 avril 2011
34. GWT – Atelier de Gadgets!
Compiler avec GWT pour générer le code JS du gadget
Déploiement facile sur un serveur Web externe
Intégrer facilement le gadget dans un conteneur OpenSocial
c
GTUG Montréal 7 avril 2011
35. GUI – Patrons de conception
GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
36. Bus d'événements
Bus d'événements (Event Bus) : peut être vu comme
un système téléphonique qui relie les composants de
l'application
Les composants émettent et reçoivent des
événements (events).
Les composants peuvent réagir différemment selon le
type d'événement reçus
GTUG Montréal 7 avril 2011
37. Contrôleur de l'application
Le contrôleur de l'application (Application Controller)
est en quelque sorte le chef d'orchestre de
l'application.
Le contrôleur de l'application contient la logique de
l'application
GTUG Montréal 7 avril 2011
38. Patron de conception - MVP
Modèle-Vue-Présentateur (Model-View-Presenter)
Présentateur:
Communique (reçoit /
émet) avec le reste de
Modèle:
Données du
Modèle l'application via le bus
d'événements.
Bus composant
Reçoit des événements
É
(POJOs).
de la Vue S
V Communique avec le E
É serveur via des services R
N V
E Présentateur
M I
E C
N E
T Vue:
S Affiche les
S
informations et
achemine les Vue
actions
(événements)
de l'usager
GTUG Montréal 7 avril 2011
39. Patron de conception - MVP
Modèle-Vue-Présentation (Model-View-Presenter)
Inventé par Martin Fowler et promu par Google
Meilleur « découplage » / séparation
Plus facile de répartir le code entre développeurs
Plus facile à tester en remplaçant la vue par une vue
factice (MockView)
Le modèle contient les données à afficher
La vue correspond à une interface d'affichage. Les
données envoyées à la vue sont des primitives.
Certains composants sont reliés au bus d'événements
alors que d'autres sont reliés à la couche de services
GTUG Montréal 7 avril 2011
40. Patron de conception - MVP
Le présentateur travaille avec des interfaces pas des
implémentations (HasClickHandlers, HasValue, etc.)
Le présentateur contient la logique du composant d'IU.
Il envoie les données mise-à-jour à la vue et reçoit les
valeurs modifiées par la vue.
Le présentateur reçoit également les événements
envoyés par les autres composants de l'application et
il émet ses propres événements via le bus
d'événements.
Le présentateur reçoit des données du Modèle
Le présenteur et la vue associée sont couplés via une
Interface d'Affichage
GTUG Montréal 7 avril 2011
41. Des applications GWT
GWT
en Action
GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
42. OpenSyllabus – Un exemple Québécois!
OpenSyllabus : un éditeur structuré de plan de cours
http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home
GTUG Montréal 7 avril 2011
43. GWT – Avantages pour les utilisateurs
GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
44. 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, Flash, .Net, ni de JVM
Pas de long téléchargement, ni d'installation
Compatible avec tous les fureteurs
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
GTUG Montréal 7 avril 2011
45. GWT – Avantages pour les développeurs
aniaque
GWT
GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
46. 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
GTUG Montréal 7 avril 2011
47. Qui peut le mieux profiter de GWT ?
J'
GWT
GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
48. 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 riche 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 (Swing)
– Réaliser des Web-app. avec des outils et un environnement familier
– Doivent apprendre CSS & les restrictions particulières des Web-app.
GTUG Montréal 7 avril 2011
49. GWT vs autres solutions Web riche
GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
50. GWT vs autres solutions Web riche
Outils purs JavaScript (jQuery, Scriptaculous, Prototype, YUI, Dojo, etc.)
Facilitent beaucoup la programmation JavaScript mais ça reste du JavaScript!
JavaServer Faces - Norme JEE, basé sur le serveur, plutôt complexe
JavaFX – Trop peu, trop tard! exige JVM
Java Applet – Passé de mode et lourd passé!, exige JVM
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 - propriétaire & basé Windows
Windows...Volta, fin 2007 puis plus rien, une copie GWT pour .NET
GTUG Montréal 7 avril 2011
52. GWT - Inconvénients
Nécessite que le fureteur exécute JavaScript
Connaissance de la programmation Java
Séparation nette entre client et serveur
Les composants (widgets) sont de sources et de
qualités inégales
Dépend des performances du transcompilateur
Lenteur de JavaScript
Quelques problèmes de compatibilité entre fureteurs,
surtout au niveau des CSS
Certains problèmes demandent une expertise JS
L'aspect sécurité est à surveiller
GTUG Montréal 7 avril 2011
53. GWT - Avantages
Bon pour enrichir des applications Web avec Ajax ou créer
des applications Web riches avec des IUs complexes
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é
Vaste communauté (25 000 membres GG GWT)
Supporté par Google... et l'écosystème des outils Google
GWT ne va pas résoudre « magiquement » tous les
problèmes avec Ajax ou le Web 2.0
GTUG Montréal 7 avril 2011
54. Ressources - Livres
Google Web Toolkit Applications
par Ryan Dewsbury
608 pages
Prentice Hall
(15 décembre, 2007)
www.gwtapps.com
GWT in Practice
par Robert T. Cooper, Charlie E. Collins
358 pages
Manning Publications
(12 mai, 2008)
www.manning.com/cooper/
GTUG Montréal 7 avril 2011
55. Ressources - Outils
Sites généralistes
http://code.google.com/webtoolkit
http://code.google.com/webtoolkit/overview.html
Groupe de discussions (25 000 membres)
http://groups.google.com/group/google-web-toolkit
Sites de nouvelles
http://www.ongwt.com/
Socle d'application MVP - GWTP
http://code.google.com/p/gwt-platform/
GTUG Montréal 7 avril 2011
56. Pour en savoir plus...
Présentation plus
complète de GWT
au JUG Montréal
jeudi 14 avril
UQAM, pav. Sherbrooke,
local SH-2140
de 17 h 30 à 19 h 30
GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011