• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction à GWT - GTI780 & MTI780 - ETS - A09
 

Introduction à GWT - GTI780 & MTI780 - ETS - A09

on

  • 2,649 views

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

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

Statistics

Views

Total Views
2,649
Views on SlideShare
2,621
Embed Views
28

Actions

Likes
1
Downloads
82
Comments
0

2 Embeds 28

http://www.slideshare.net 27
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction à GWT - GTI780 & MTI780 - ETS - A09 Introduction à GWT - GTI780 & MTI780 - ETS - A09 Presentation Transcript

    • Le Google Web Toolkit (GWT): réalisation facile d'applications AJAX et Web 2.0 pour programmeurs Java Sujets spéciaux en TI Le Web 2.0 : concepts et outils École de technologie supérieure par Claude Coulombe GTI-780 / MTI-780 ETS - Montréal - 2009
    • But Dans cette présentation vous verrez comment le Google Web Toolkit (GWT) permet le développement rapide en Java d'applications Web 2.0 et AJAX. http://code.google.com/webtoolkit/ GTI-780 / MTI-780 ETS - Montréal - 2009
    • Pourquoi GWT ? - Problèmes avec JavaScript Euh!..., il ne connaissait pas assez le JavaScript... GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • Pourquoi GWT ? - Problèmes avec JavaScript Beaucoup d'efforts pour contourner les incompatibilités des fureteurs, les fuites de mémoire et les longs chargements JS n'est pas un véritable langage à objets Pas de typage statique mais typage dynamique Sensible à la moindre coquille formulaire.montnat = document.getElementById(''montant''); Quelques subtilités : “null” vs “undefined” vs “false” vs “” Débogage à l'exécution pas à la compilation JS n'a pas été conçu pour de gros logiciels, mais juste pour mettre un peu d'interactivité dans une page web Manque de modularité et de capacité à grandir Mise au point et réutilisation difficiles des composants JS et Ajax Support inégal des outils JavaScript et Ajax Rareté des experts en JavaScript GTI-780 / MTI-780 ETS - Montréal - 2009
    • GWT – le « prochain gros truc! » GWT GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009
    • Qu'est-ce que GWT ?  En mai 2006 Google lance son Google Web Toolkit – Bruce Johnson & Joel Webber  Logiciel libre (licence Apache 2), canevas d'applications Web riches, entièrement basé Java, « orienté client »  Transcompilateur (cross-compiler) de Java à JavaScript  Développement rapide d'applications Web riches par des programmeurs Java qui ne maîtrisent pas JavaScript  Bon à la fois pour enrichir des applications Web avec des composants Ajax et pour créer des applications « similaires à des applications bureautiques locales » mais qui tournent dans un fureteur Web GTI-780 / MTI-780 ETS - Montréal - 2009
    • Qu'est-ce que GWT ? - Du pur Java!  Plus de 6 millions de développeurs Java  Riche écosystème  “Write Once, Run Anywhere”  Windows, Linux, Mac OS X  Véritable langage de POO  Utilise un EDI* Java usuel  Débogage du code-client avec EDI Java  Communication client-server d'objets Java  Code-client beaucoup plus léger qu'avec des applets Java * EDI : environnement de développement intégré (en anglais IDE) GTI-780 / MTI-780 * Source image : http://www.sun.com ETS - Montréal - 2009
    • GWT – Quelques exemples  Lombardi Blueprint (outil de gestion des flux de travail) http://www.lombardisoftware.com/bpm-blueprint-product.php  Exemples et démos du Google Web Tookit http://code.google.com/intl/fr-FR/webtoolkit/examples/  GWT-Ext 2.0 Showcase http://www.gwt-ext.com/demo/  Google Web Toolkit Applications (site d'un livre) Widget DeskTop Demo http://desktop.gwtapps.com  Gpokr (jeu de poker en ligne) www.gpokr.com  OpenSyllabus (éditeur structuré de plan de cours) http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home GTI-780 / MTI-780 ETS - Montréal - 2009
    • GWT – Avantages pour les utilisateurs GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • GWT – Avantages pour les utilisateurs  Réponses rapides aux actions de l'utilisateur  La vitesse est vitale, spécialement au démarrage  Ne requiert pas de plugiciel, Web Start, ni même de JVM  Pas de long téléchargement, ni d'installation  Compatible avec tous les fureteurs Web récents  Donne la préférence aux composants natifs de l'IU  L'utilisateur conserve le contrôle du navigateur Web en tout temps  Gestion de l'historique de navigation  Produit des applications Web riches, rapides et légères GTI-780 / MTI-780 ETS - Montréal - 2009
    • GWT – Avantages pour les développeurs aniaque GWT GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • GWT – Avantages pour les développeurs  Un unique langage, le “Java”  Bien que le code-serveur peut être en n'importe quel langage  Gère les différences entre les fureteurs Web  Bibliothèque OO de composants IUG  Semblable à SWING ou AWT  Encourage les bonnes pratiques du génie logiciel en s'appuyant sur des outils Java matures et performants  Eclipse, NetBeans. IntelliJ  Communications Ajax faciles via RPC  S'intègre aux technologies Web standards  Réduit la charge sur le serveur et le réseau  Le code-client est beaucoup plus léger qu'un Applet Java GTI-780 / MTI-780 ETS - Montréal - 2009
    • Comprendre GWT GWT GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • Application GWT – Client & Serveur Le code-serveur (en Java ou tout autre langage) s'exécute sur le serveur. L'application Web utilise le serveur pour charger ou sauvegarder des données. Le code-client en JavaScript est transmis sur le réseau vers un ordinateur-client, où il s'exécute dans un logiciel de navigation Web GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • Vue d'ensemble de l'architecture GWT Trans compilateur Interface Java à Bibliothèque Native JavaScript d'émulation JavaScript JRE JSNI GWT API Bibliothèque Communication IUG avec le serveur Analyseur Gestion de Intégration Widgets & RPC & Ajax XML l'historique à JUnit Panels GTI-780 / MTI-780 ETS - Montréal - 2009
    • Transcompilateur Java à JavaScript GWT version 1.4 supporte : Java * Firefox 1.0, 1.5, 2, 3.x * Internet Explorer 6, 7 * Safari 2.0, 3.0 * Opera 9.0 Write Once... JavaScript Run Everywhere! GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • Transcompilateur Java à JavaScript  Transcompilateur GWT prend du code-client en Java et le traduit en JavaScript optimisé  Bibliothèque d'émulation JRE supporte un grand nombre de classes de java.lang & java.util http://code.google.com/webtoolkit/documentation/jre.html  Maintenant pour Java 1.5 ou Java 5  Tout le code-client va être compilé en JavaScript. Donc, il faut seulement des bibliothèques et du code Java qu'on peut traduire en JavaScript du côté client  Le code-serveur n'a pas ce type de contraintes  Emploi de la liaison différée (“Deferred Binding”) pour produire du code JavaScript optimal « Ne payez que pour ce que vous utilisez » GTI-780 / MTI-780 ETS - Montréal - 2009
    • Transcompilateur Java à JavaScript  Du JavaScript plus rapide que du code écrit à la main !!! Ainsi, ceci public static void onModuleLoad() { Button b = (new Button()).Button(); b.setText("Java vers JavaScript"); } après compilation donnera quelque chose comme cela... function onModuleLoad(){ var b; b = $Button(new Button()); $setInnerText(b.element, 'Java vers JavaScript'); } GTI-780 / MTI-780 ETS - Montréal - 2009
    • Transcompilateur- Liaison différée Copyright Google 2008 « Ne payez que pour ce que vous utilisez » GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009
    • Vue d'ensemble de la bibliothèque de composants d'interface utilisateur Composants d'interface-utilisateur Gestion des événements Support des CSS I18N Support du glisser-déposer GTI-780 / MTI-780 ETS - Montréal - 2009
    • Interface Utilisateur - Composants Balises HTML usuelles, comme img, anchor, hyperlink Bouton, bouton radio, bouton à bascule, case à cocher Menu, sous-menu, menu déroulant Champ de texte, zone de texte Onglets, liste déroulante, boîte de dialogue Séparateurs de fenêtre Widgets complexes comme des tables, boîte de téléversement de fichier, widget d'arbres, éditeur de texte enrichi, Différents panneaux très utiles pour la disposition GTI-780 / MTI-780 ETS - Montréal - 2009
    • Gestion des événements  GWT utilise le concept de récepteur (« listener interface ») pour traiter les événements  Semblable à d'autres canevas d'applications graphiques comme SWING  Le récepteur via l'interface “listener interface” définit une ou plusieurs méthodes que le widget appelle en réaction à un événement Button unBouton = new Button("Cliquez moi!"); unBouton.addClickListener(new ClickListener() { public void onClick(Widget emetteur) { // traitement du Clic } }); GTI-780 / MTI-780 ETS - Montréal - 2009
    • JSNI : JavaScript Native Interface  GWT permet l'intégration facile avec des bibliothèques JavaScript externes grâce à son JavaScript Native Interface (JSNI)  Interagir directement avec JavaScript à partir de Java et vice-versa  Inclusion automatique des bibliothèques JavaScript  GWT 1.5 introduit le concept de JavaScript Overlay pour simplifier l'intégration de prototypes JavaScript dans GWT GTI-780 / MTI-780 ETS - Montréal - 2009
    • JSNI : JavaScript Native Interface  GWT permet l'intégration facile avec des bibliothèques JavaScript externes grâce à son JavaScript Native Interface (JSNI)  Interagir directement avec JavaScript à partir de Java et vice-versa  Inclusion automatique des bibliothèques JavaScript // Déclaration de la méthode en Java... native String inverserNomPrenom(String nom) /*-{ // Implémentation en JavaScript var re = /(w+)s(w+)/; return name.replace(re, '$2, $1'); }-*/; GTI-780 / MTI-780 ETS - Montréal - 2009
    • Support des CSS  Séparation du code et de la présentation  Code Java : public ListWidget(String Item) { ... setStyleName(“gwt-ListWidget”); }  Fichier CSS : .gwt-ListWidget { background-color:black; color:lime; } GTI-780 / MTI-780 ETS - Montréal - 2009
    • I18N – Internationalisation GTI-780 / MTI-780 ETS - Montréal - 2009
    • I18N  Le transcompilateur GWT utilise la liaison différée (« Deferred Binding ») pour générer une version différente de l'application Web pour chaque langue  Par exemple, puisque GWT supporte 4 navigateurs différents, si votre application doit fonctionner en 3 langues, le transcompilateur de GWT produira 12 versions différentes de votre application au moment de la compilation À l'exécution, GWT choisira la bonne version de l'application à montrer à l'utilisateur GTI-780 / MTI-780 ETS - Montréal - 2009
    • Communication avec le serveur & Ajax Le RPC (« Remote Procedure Call »), appel de procédure à distance RPC rend facile l'échange d'objets Java (sérialisés) entre le code- client et le code-serveur Fournit une procédure automatique de sérialisation des objets Autres outils Ajax : HTTPRequest RequestBuilder FormPanel Support de : XML JSON (JavaScript Object Notation) GTI-780 / MTI-780 ETS - Montréal - 2009
    • GWT en « mode hôte » - Débogage Dans Eclipse, une application GWT peut s'exécuter en « mode hôte » (“Hosted Mode”) En « mode hôte », la JVM exécute le code GWT comme du bytecode Java à l'intérieur d'une fenêtre de navigateur Web Le « mode hôte » facilite la mise-au-point : Éditer le code-source Rafraîchir Examiner les résultats GTI-780 / MTI-780 ETS - Montréal - 2009
    • GWT + EDIs Java => Génie logiciel pour les applications Web riches & Ajax  Support du cycle de vie complet du logiciel  Patrons de conception OO éprouvés  EDIs* Java matures  Cycle : édition / test / débogage /  restructuration (refactoring)  Support au débogage  Détection d'erreurs à la compilation  Mise au point & débogage en mode hôte  Journalisation (logging)  Support de JUnit * EDI : environnements de développement intégrés (en anglais IDE) GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • GWT en « Mode Web » - Déploiement  Une fois testé en « Mode Hôte », vous pouvez compiler votre code source Java en JavaScript et déployer votre application Web  Une application Web GWT qui a été déployée est dite en « Mode Web »  Une fois compilé le code-client est uniquement du pur JavaScript et du HTML  Afin de déployer votre application Web en production, vous devez déplacer les fichiers du répertoire www/... sur le serveur Web, i.e. Tomcat (ou Apache) GTI-780 / MTI-780 ETS - Montréal - 2009
    • Démo – Bâtir des applications GWT GWT en Action GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • Créer un squelette d'application GWT  GWT crée automatiquement un code-client rudimentaire  Vous pouvez ensuite mettre de la chair sur ce squelette dans le but de créer une application Web plus sophistiquée GWT GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • Enrichir une page web  GWT permet d'ajouter des composants graphiques interactifs dans une page Web  Un composant GWT peut être intégré dans n'importe quelle page HTML, ainsi l'application continue à ressembler à une page Web  Tout fichier HTML incluant un certain jeu de balises peut servir de support à une application GWT  GWT ne cherche pas exclusivement à ressembler à une application bureautique en exécution locale  Le résultat est juste une meilleure application Web  Exemple : application d'ouverture de session (login) GTI-780 / MTI-780 ETS - Montréal - 2009
    • Créer des applications Web similaires à des applications bureautiques locales  Ouverture de plusieurs fenêtres à la fois dans le navigateur  Déplacement des fenêtres dans le navigateur, redimensionnement et défilement des fenêtres  Glisser et déposer des contenus  Applications Web se comportant « comme des applications bureautiques locales » GTI-780 / MTI-780 ETS - Montréal - 2009
    • Qui peut le mieux profiter de GWT ? J' GWT GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • Qui peut le mieux profiter de GWT ?  Designers Web – GWT utilise les feuilles de style CSS – Doivent apprendre Java  Développeurs d'applications Web – Une application GWT s'exécute sur le client plutôt que d'être contrôlée entièrement par le serveur – Doivent maîtriser les technologies du client et de présentation  Développeurs Ajax (gourous JavaScript) – GWT intègre facilement le code JavaScript grâce à JSNI – Doivent laisser tomber certaines habitudes du codage JS  Développeurs d'applications Java – Réaliser des Web-app. avec des outils et un environnement familier – Doivent apprendre CSS & les restrictions particulières des Web-app. GTI-780 / MTI-780 ETS - Montréal - 2009
    • GWT vs autres solutions Web riche GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • GWT vs autres solutions Web riche Outils purs JavaScript (Scriptaculous, Prototype, DWR, JQuery, YUI, etc.) Facilitent beaucoup la programmation JavaScript mais ça reste du JavaScript! JavaServer Faces - Norme JEE, canevas d'applications Web populaire, basé sur le serveur, plutôt complexe JavaFX - Trop tôt pour se prononcer, exige JVM, langage à script Java Applet - Trop lourd, exige JVM, doivent beaucoup s'améliorer ZK - Rapide et facile à programmer, basé sur le serveur, licence GPL Adobe Flash, Flex, AIR (Adobe Integrated Runtime) et OpenLazslo Basé sur le serveur, +/- propriétaire, exige plugiciel Flash, langage à script Micro$oft Silverlight - Pas Java, propriétaire & basé Windows Windows...Volta, 5 décembre 2007, une copie GWT pour .NET Ruby - Toujours à base de pages et basé sur le serveur.. GTI-780 / MTI-780 ETS - Montréal - 2009
    • GWT - Avantages & inconvénients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
    • GWT - Inconvénients  Nécessite que le fureteur exécute JavaScript  Exige la connaissance de la programmation Java  Exige une séparation nette client et serveur  Les composants (Widgets) sont de sources et de qualités inégales  Dépend des performances du transcompilateur  Quelques problèmes de compatibilité entre les fureteurs Web, surtout au niveau des CSS  Certains problèmes demandent une expertise JS  L'aspect sécurité est à surveiller  GWT ne va pas résoudre « magiquement » tous les problèmes avec Ajax ou le Web 2.0 GTI-780 / MTI-780 ETS - Montréal - 2009
    • GWT - Avantages Bon pour enrichir des applications Web avec Ajax et créer des applications Web de « style bureautique » Un seul langage: JAVA Développement et mise au point rapide dans des EDIs favorisant une bonne productivité et qualité du code Riche bibliothèque de composants (~ SWING) Très bon support Ajax Performant & économe en ressources réseau & serveur Code source libre, licence Apache 2, bien documenté Supporté par GOOGLE... et l'écosystème des outils Google Pas magique mais GWT a le potentiel de devenir le « prochain gros truc » GTI-780 / MTI-780 ETS - Montréal - 2009
    • Ressources - Livres GWT in Action: Easy Ajax with the Google Web Toolkit par Robert Hanson, Adam Tacy 600 pages Manning Publications (5 juin, 2007) www.manning.com/hanson/ Google Web Toolkit Applications par Ryan Dewsbury 608 pages Prentice Hall (15 décembre, 2007) www.gwtapps.com GTI-780 / MTI-780 ETS - Montréal - 2009
    • Ressources - Livres Google Web Toolkit Solutions : More Cool & Useful Stuff par David Geary, Rob Gordon 408 pages Prentice Hall (17 novembre, 2007) www.coolandusefulgwt.com GWT in Practice par Robert T. Cooper, Charlie E. Collins 358 pages Manning Publications (12 mai, 2008) www.manning.com/cooper/ GTI-780 / MTI-780 ETS - Montréal - 2009
    • Ressources - Outils GWT Designer – Éditeur graphique – Plugiciel Eclipse – www.instantiations.com/gwtdesigner/ Sites http://code.google.com/webtoolkit/ http://groups.google.com/group/Google-Web-Toolkit www.ongwt.com GTI-780 / MTI-780 ETS - Montréal - 2009
    • Questions ? GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009