Your SlideShare is downloading. ×
0
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Gwt intro-101
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Gwt intro-101

1,805

Published on

Introduction à GWT (Google Web Toolkit) à l'occasion du lancement du GTUG Montréal, le jeudi 7 avril 2011 par Claude Coulombe

Introduction à GWT (Google Web Toolkit) à l'occasion du lancement du GTUG Montréal, le jeudi 7 avril 2011 par Claude Coulombe

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,805
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
45
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. GWT 101 réalisation facile dapplications Web riches Présentation au GTUG Montréal par Claude CoulombeGTUG 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 dapplications 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 – « Lexpé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 2005GTUG 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  Aujourdhui, Ajax désigne les technologies Web du fureteur : JavaScript, HTML/DOM, CSSGTUG 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 contenusGTUG Montréal 7 avril 2011
  • 8. GWT = Ajax + Génie Logiciel AJAX GWT = + Génie logicielGTUG Montréal * Source : http://www.google.com, http://www.sun.com, htttp://www.clipart.com 7 avril 2011
  • 9. Quest-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 dapplications 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 dIU ( GWT Designer)  Outil de construction dIU 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 derreurs à 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 GoogleGTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
  • 11. Intégration à Eclipse – débogueurGTUG Montréal 7 avril 2011
  • 12. GWT en « mode dev » Dans Eclipse, une application GWT peut sexécuter en « mode dev » (“Development Mode”)‫‏‬ En « mode dev », la JVM exécute le code GWT comme du bytecode Java à lintérieur dune fenêtre de navigateur Web Le « mode dev » facilite la mise-au-point : Éditer le code-source Rafraîchir Examiner les résultatsGTUG Montréal 7 avril 2011
  • 13. Speed Tracer (extension dans Chrome)GTUG Montréal * Source : http://code.google.com/webtoolkit/ 7 avril 2011
  • 14. GWT DesignerGTUG Montréal * Source : http://code.google.com/webtoolkit/ 7 avril 2011
  • 15. Comprendre GWT GWTGTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
  • 16. Application GWT – Client & Serveur Le code (en Java ou tout autre langage) qui sexécute sur le serveur est responsible de la logique de lapplication 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 sexécute dans un fureteur WebGTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
  • 17. Vue densemble de larchitecture 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 lhistorique à JUnit PanelsGTUG 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 vaScriptGTUG 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 lintégration de prototypes JavaScript dans GWT // Déclaration dune 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
  • 22. Bibliothèque de composants dIUGTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
  • 23. Bibliothèque de composants dIU 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 darbres, éditeur de texte enrichi, etc.GTUG Montréal 7 avril 2011
  • 24. Interface Utilisateur - Panneaux DisclosurePanel VerticalPanel HorizontalSplitPanel HorizontalPanel VerticalSplitPanel FlowPanel DockPanel TabPanel PopupPanelGTUG Montréal http://gwt.google.com/samples/Showcase/Showcase.html 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 à dautres bibliothèques Java pour la programmation dIU comme SWING  Le gestionnaire via linterface “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
  • 27. I18N – InternationalisationGTUG Montréal * Source Clipart : http://www.clipart.com 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 lapplication 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 À lexécution, GWT choisira la bonne version de lapplication à montrer à lutilisateurGTUG Montréal 7 avril 2011
  • 29. Communication client-serveur & AjaxGTUG Montréal * Source Clipart : http://www.clipart.com 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épendantesGTUG 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 dobjets 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 GoogleGTUG Montréal * Source : http://code.google.com/webtoolkit/ 7 avril 2011
  • 33. Intégration facile aux APIs Google  Google a un riche écosystème dAPIs en source libre  AppEngine : déploiement facile dapplications GWT dans le nuage  Androïd : réalisation dapplications 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 cGTUG Montréal 7 avril 2011
  • 35. GUI – Patrons de conceptionGTUG 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 lapplication Les composants émettent et reçoivent des événements (events). Les composants peuvent réagir différemment selon le type dévénement reçusGTUG Montréal 7 avril 2011
  • 37. Contrôleur de lapplication Le contrôleur de lapplication (Application Controller) est en quelque sorte le chef dorchestre de lapplication. Le contrôleur de lapplication contient la logique de lapplicationGTUG 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 lapplication 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 lusagerGTUG 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 daffichage. Les données envoyées à la vue sont des primitives. Certains composants sont reliés au bus dévénements alors que dautres sont reliés à la couche de servicesGTUG 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 dIU. 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 lapplication 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 dAffichageGTUG Montréal 7 avril 2011
  • 41. Des applications GWT GWT en ActionGTUG 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+HomeGTUG Montréal 7 avril 2011
  • 43. GWT – Avantages pour les utilisateursGTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011
  • 44. GWT – Avantages pour les utilisateurs  Réponses rapides aux actions de lutilisateur  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 dinstallation  Compatible avec tous les fureteurs  Donne la préférence aux composants natifs de lIU  Lutilisateur conserve le contrôle du navigateur Web en tout temps  Gestion de lhistorique de navigation  Produit des applications Web riches, rapides et légèresGTUG Montréal 7 avril 2011
  • 45. GWT – Avantages pour les développeurs aniaque GWTGTUG 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 nimporte 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 sappuyant sur des outils Java matures et performants  Eclipse, NetBeans, IntelliJ  Communications Ajax faciles via RPC  Sintègre aux technologies Web standards  Réduit la charge sur le serveur et le réseau  Le code-client est beaucoup plus léger quun Applet JavaGTUG Montréal 7 avril 2011
  • 47. Qui peut le mieux profiter de GWT ? J GWTGTUG 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 dapplications Web – Une application GWT sexé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 dapplications 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 richeGTUG 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 .NETGTUG Montréal 7 avril 2011
  • 51. GWT - Avantages & inconvénientsGTUG Montréal * Source Clipart : http://www.clipart.com 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  Laspect sécurité est à surveillerGTUG 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.0GTUG 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 dapplication 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 30GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011

×