introduction à gwt - gti780 & mti780 - ets - a08
DESCRIPTION
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 2008TRANSCRIPT
Le Google Web Toolkit (GWT): Le Google Web Toolkit (GWT): réalisation facile d'applications réalisation facile d'applications
AJAX et Web 2.0 pour programmeurs JavaAJAX et Web 2.0 pour programmeurs Java
Montréal, novembre 2008Montréal, novembre 2008GTI-780 / MTI-780GTI-780 / MTI-780
Sujets spéciaux en TI
Le Web 2.0 : concepts et outilsÉcole de technologie supérieure
par
Claude Coulombe
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
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. Web 2.0 et AJAX.
http://code.google.com/webtoolkit/
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
BiographieBiographie Claude Coulombe (Ph.D. en cours, M.Sc. informatique, B.Sc. en Claude Coulombe (Ph.D. en cours, M.Sc. informatique, B.Sc. en
physique) est un pionnier des applications de l'IA. Après une physique) est un pionnier des applications de l'IA. Après une carrière d'entrepreneur bien remplie, comme fondateur de carrière d'entrepreneur bien remplie, comme fondateur de Machina Sapiens inc (Correcteur 101) et plus récemment de Machina Sapiens inc (Correcteur 101) et plus récemment de Lingua Technologies (BiTextum), Claude a choisi de pousser plus Lingua Technologies (BiTextum), Claude a choisi de pousser plus loin ses recherches du côté de l'apprentissage statistique et des loin ses recherches du côté de l'apprentissage statistique et des applications Web innovatrices. applications Web innovatrices.
Familier des méthodologies de développement agiles, de la Familier des méthodologies de développement agiles, de la programmation par objets et de JEE, Claude est un expert des programmation par objets et de JEE, Claude est un expert des technologies émergentes du Web 2.0, des applications Web technologies émergentes du Web 2.0, des applications Web riches, d'Ajax et du Google Web Toolkit.riches, d'Ajax et du Google Web Toolkit.
www.ClaudeCoulombe.com
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
Pourquoi GWT ?Pourquoi GWT ? - - Problèmes avec JavaScriptProblèmes avec JavaScript
Rareté des experts en JavaScriptRareté des experts en JavaScript
Beaucoup d'efforts pour contourner les incompatibilités des Beaucoup d'efforts pour contourner les incompatibilités des navigateurs, les fuites de mémoire et les longs chargementsnavigateurs, les fuites de mémoire et les longs chargements
JS n'est pas un véritable langage à objetsJS n'est pas un véritable langage à objets
Pas de typage statiquePas de typage statique
Sensible à la moindre coquilleSensible à la moindre coquille
formulaire.montnat = document.getElementById(''montant'');formulaire.montnat = document.getElementById(''montant'');
Quelques subtilités :Quelques subtilités : ““nullnull” vs “” vs “undefinedundefined” vs “” vs “falsefalse” vs “”” vs “”
Débogage à l'exécution pas à la compilationDébogage à l'exécution pas à la compilation
JS n'a pas été conçu pour de gros logiciels, mais juste pour mettre JS n'a pas été conçu pour de gros logiciels, mais juste pour mettre un peu d'interactivité dans une page webun peu d'interactivité dans une page web
Manque de modularité et de capacité à grandirManque de modularité et de capacité à grandir
Mise au point et réutilisation difficiles des composants JS et AjaxMise au point et réutilisation difficiles des composants JS et Ajax
Support inégal des outils JavaScript et AjaxSupport inégal des outils JavaScript et Ajax
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
GWT – le « prochain gros truc! » GWT – le « prochain gros truc! »
GWTGWT
* Source : http://www.google.com
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
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 Logiciel libre (licence Apache 2), canevas d'applications Logiciel libre (licence Apache 2), canevas d'applications
Web riches, entièrement basé Java, « orienté client »Web riches, entièrement basé Java, « orienté client » 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 Montréal, octobre 2008Montréal, octobre 2008
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 EDI JavaDébogage du code-client avec EDI Java
Communication client-server d'objets JavaCommunication client-server d'objets Java
Code-client beaucoup plus léger qu'avec des applets JavaCode-client beaucoup plus léger qu'avec des applets Java
* Source image : http://www.sun.com
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
GWT – Quelques exemplesGWT – Quelques exemples Exemples et démos du Google Web TookitExemples et démos du Google Web Tookit
http://code.google.com/webtoolkit/examples/http://code.google.com/webtoolkit/examples/http://google-web-toolkit-incubator.googlecode.com/svn/trunk/demo/http://google-web-toolkit-incubator.googlecode.com/svn/trunk/demo/
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 Demohttp://desktop.gwtapps.comhttp://desktop.gwtapps.com
Gpokr (jeu de poker en ligne)Gpokr (jeu de poker en ligne)www.gpokr.comwww.gpokr.com
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
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 Montréal, octobre 2008Montréal, octobre 2008
GWT – AGWT – Avantages pour les utilisateursvantages pour les utilisateurs
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
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 navigateurs Web récentsCompatible avec tous les navigateurs 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 L'utilisateur conserve le contrôle du navigateur Web
en tout tempsen tout 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 Montréal, octobre 2008Montréal, octobre 2008
aniaqueGWT
GWTGWT – – AAvantages pour les développeursvantages pour les développeurs
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
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 navigateurs WebGère les différences entre les navigateurs 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 Montréal, octobre 2008Montréal, octobre 2008
Comprendre GWTComprendre GWT
GWTGWT
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
Transcompilateur Java à JavaScript Transcompilateur Java à JavaScript
Java
JavaScript
GWT version 1.4 supporte :* Firefox 1.0, 1.5, 2, 3.x* Internet Explorer 6, 7* 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 Montréal, octobre 2008Montréal, octobre 2008
Transcompilateur GWT prend du code-client en Java et le Transcompilateur GWT prend du code-client en Java et le traduit en JavaScript optimisétraduit en JavaScript optimisé
Bibliothèque d'émulation JRE supporte un grand nombre de Bibliothèque d'émulation JRE supporte un grand nombre de classes de java.lang & java.utilclasses de java.lang & java.util
http://code.google.com/webtoolkit/documentation/jre.htmlhttp://code.google.com/webtoolkit/documentation/jre.html
Maintenant pour Java 1.5 ou Java 5Maintenant pour Java 1.5 ou Java 5 Tout le code-client va être compilé en JavaScript. Donc, il Tout le code-client va être compilé en JavaScript. Donc, il
faut seulement des bibliothèques et du code Java qu'on faut seulement des bibliothèques et du code Java qu'on peut traduire en JavaScript du côté clientpeut traduire en JavaScript du côté client
Le code-serveur n'a pas ce type de contraintesLe code-serveur n'a pas ce type de contraintes Emploi de la liaison différée (“Deferred Binding”) pour Emploi de la liaison différée (“Deferred Binding”) pour
produire du code JavaScript optimalproduire du code JavaScript optimal
« Ne payez que pour ce que vous utilisez »« Ne payez que pour ce que vous utilisez »
Transcompilateur Java à JavaScript Transcompilateur Java à JavaScript
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
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
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
Vue d'ensemble de la bibliothèque de Vue d'ensemble de la bibliothèque de composants d'interface utilisateurcomposants d'interface utilisateur
Composants d'interface-utilisateurComposants d'interface-utilisateur
Gestion des événementsGestion des événements
Support des CSSSupport des CSS
I18NI18N
Support du glisser-déposerSupport du glisser-déposer
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
Interface Utilisateur - Interface Utilisateur - ComposantsComposantsBalises 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 Montréal, octobre 2008Montréal, octobre 2008
Gestion des événementsGestion des événements GWT utilise le concept de récepteur (« listener GWT utilise le concept de récepteur (« listener
interface ») pour traiter les événementsinterface ») 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 Montréal, octobre 2008Montréal, octobre 2008
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 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 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
I18N – InternationalisationI18N – Internationalisation
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
I18NI18N Le transcompilateur GWT utilise la liaison Le transcompilateur GWT utilise la liaison
différée (« Deferred Binding ») pour générer différée (« Deferred Binding ») pour générer une version différente de l'application Web une version différente de l'application Web pour chaque langue pour chaque langue
Par exemple, puisque GWT supporte 4 Par exemple, puisque GWT supporte 4 navigateurs différents, si votre application doit navigateurs différents, si votre application doit fonctionner en 3 langues, le transcompilateur fonctionner en 3 langues, le transcompilateur de GWT produira 12 versions différentes de de GWT produira 12 versions différentes de votre application au moment de la compilation votre application au moment de la compilation
À l'exécution, GWT choisira la bonne version À l'exécution, GWT choisira la bonne version de l'application à montrer à l'utilisateurde l'application à montrer à l'utilisateur
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
Communication avec le serveur & AjaxCommunication avec le serveur & Ajax
RPC (« Remote Procedure Call »), appel de procédure RPC (« Remote Procedure Call »), appel de procédure à distanceà distance
RPC rend facile l'échange d'objets Java (sérialisés) entre le code-RPC rend facile l'échange d'objets Java (sérialisés) entre le code-
client et le code-serveurclient 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 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
Génie logiciel pour les applications Web Génie logiciel pour les applications Web riches & Ajaxriches & Ajax
* EDI : environnements de développement intégrés (en anglais IDE)
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
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
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 devez déplacer les fichiers du production, vous devez déplacer les fichiers du répertoire www/... sur le serveur Web, i.e. répertoire www/... sur le serveur Web, i.e. Tomcat (ou Apache)Tomcat (ou Apache)
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
GWT vs autres solutions Web richeGWT vs autres solutions Web riche
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
Outils purs JavaScript Outils 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 Faces JavaServer Faces -- Norme JEE, canevas d'applications Web populaire, basé Norme JEE, canevas d'applications Web populaire, basé sur le serveur, plutôt complexesur le serveur, plutôt complexe
JavaFX JavaFX - - Trop tôt pour se prononcer, exige JVM, langage à scriptTrop tôt pour se prononcer, exige JVM, langage à script
Java Applet Java 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, AIR Adobe Flash, Flex, AIR (Adobe Integrated Runtime) (Adobe Integrated Runtime) et OpenLazslo et OpenLazslo
Basé sur le serveur, +/- propriétaire, exige plugiciel Flash, langage à scriptBasé sur le serveur, +/- propriétaire, exige plugiciel Flash, langage à script
Micro$oft Silverlight Micro$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 -- Toujours à base de pages et basé sur le serveur.. 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 Montréal, octobre 2008Montréal, octobre 2008
GWTGWT - - Avantages & inconvénientsAvantages & inconvénients
* Source Clipart : http://www.clipart.com
GTI-780 / MTI-780GTI-780 / MTI-780 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
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 Montréal, octobre 2008Montréal, octobre 2008
Ressources - OutilsRessources - Outils
GWT DesignerGWT Designer
– Éditeur graphiqueÉditeur graphique
– Plugiciel EclipsePlugiciel Eclipse
www.instantiations.com/gwtdesigner/www.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 Montréal, octobre 2008Montréal, octobre 2008
QuestionsQuestions
??
* Source Clipart : http://www.clipart.com