46
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 Java AJAX et Web 2.0 pour programmeurs Java GTI-780 / MTI-780 GTI-780 / MTI-780 Sujets spéciaux en TI Le Web 2.0 : concepts et outils École de technologie supérieure par Claude Coulombe ETS - Montréal - 2009 ETS - Montréal - 2009

Introduction à GWT - GTI780 & MTI780 - ETS - A09

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Introduction à GWT - GTI780 & MTI780 - ETS - A09

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

GTI-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

ETS - Montréal - 2009ETS - Montréal - 2009

Page 2: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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/

Page 3: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 4: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Pourquoi GWT ?Pourquoi GWT ? - - Problèmes avec JavaScriptProblèmes avec JavaScript

Beaucoup d'efforts pour contourner les incompatibilités des fureteurs, Beaucoup d'efforts pour contourner les incompatibilités des fureteurs, les fuites de mémoire et les longs chargementsles 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 statique mais typage dynamiquePas de typage statique mais typage dynamique

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 un JS n'a pas été conçu pour de gros logiciels, mais juste pour mettre un peu d'interactivité dans une page webpeu 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

Rareté des experts en JavaScriptRareté des experts en JavaScript

Page 5: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

GWT – le « prochain gros truc! » GWT – le « prochain gros truc! »

GWTGWT

* Source : http://www.google.com

Page 6: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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 fureteur Webmais qui tournent dans un fureteur Web

Page 7: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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 Riche écosystèmeRiche écosystème ““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

Page 8: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

GWT – Quelques exemplesGWT – Quelques exemples 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

Exemples et démos du Google Web TookitExemples et démos du Google Web Tookit

http://code.google.com/intl/fr-FR/webtoolkit/examples/http://code.google.com/intl/fr-FR/webtoolkit/examples/

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 Demo

http://desktop.gwtapps.comhttp://desktop.gwtapps.com

Gpokr (jeu de poker en ligne)Gpokr (jeu de poker en ligne)www.gpokr.comwww.gpokr.com

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

Page 9: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

GWT – AGWT – Avantages pour les utilisateursvantages pour les utilisateurs

* Source Clipart : http://www.clipart.com

Page 10: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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 fureteurs Web récentsCompatible avec tous les fureteurs 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 en L'utilisateur conserve le contrôle du navigateur Web en

tout tempstout 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

Page 11: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

aniaqueGWT

GWTGWT – – AAvantages pour les développeursvantages pour les développeurs

* Source Clipart : http://www.clipart.com

Page 12: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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 fureteurs WebGère les différences entre les fureteurs 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

Page 13: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Comprendre GWTComprendre GWT

GWTGWT

* Source Clipart : http://www.clipart.com

Page 14: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 15: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 16: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 17: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 18: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 19: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 20: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 21: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 22: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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 }} });});

Page 23: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 24: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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');

}-*/;}-*/;

Page 25: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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;}}

Page 26: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

I18N – InternationalisationI18N – Internationalisation

Page 27: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 28: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Communication avec le serveur & AjaxCommunication avec le serveur & Ajax

Le RPC (« Remote Procedure Call »), appel de procédure à Le RPC (« Remote Procedure Call »), appel de procédure à distancedistance

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)

Page 29: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

GWT en « mode hôte »GWT en « mode hôte » - D - Débogageébogage

Dans Eclipse, une application GWT peut Dans Eclipse, une application GWT peut

s'exécuter en « mode hôte » (“Hosted Mode”) s'exécuter en « 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

Le « mode hôte » facilite la mise-au-point :Le « mode hôte » facilite la mise-au-point :

Éditer le code-sourceÉditer le code-source

RafraîchirRafraîchir

Examiner les résultatsExaminer les résultats

Page 30: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

GWT + EDIs Java => Génie logiciel pour GWT + EDIs Java => Génie logiciel pour les applications Web riches & Ajaxles applications Web riches & 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

Page 31: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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)

Page 32: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Démo – Bâtir desDémo – Bâtir des applications GWT applications GWT

GWTGWTen Actionen Action

* Source Clipart : http://www.clipart.com

Page 33: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 34: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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)

Page 35: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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 »

Page 36: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

Qui peut le mieux profiter de GWT ?Qui peut le mieux profiter de GWT ?

J' GWT

* Source Clipart : http://www.clipart.com

Page 37: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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 ?

Page 38: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

GWT vs autres solutions Web richeGWT vs autres solutions Web riche

* Source Clipart : http://www.clipart.com

Page 39: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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 .NET

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

Page 40: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

GWTGWT - - Avantages & inconvénientsAvantages & inconvénients

* Source Clipart : http://www.clipart.com

Page 41: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 42: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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 »

Page 43: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 44: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 45: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

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

Page 46: Introduction à GWT - GTI780 & MTI780 - ETS - A09

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009

QuestionsQuestions

??

* Source Clipart : http://www.clipart.com