cours_du_soir_gwt_maj_15_12_2008.ppt
Upcoming SlideShare
Loading in...5
×
 

cours_du_soir_gwt_maj_15_12_2008.ppt

on

  • 1,360 views

 

Statistics

Views

Total Views
1,360
Views on SlideShare
1,358
Embed Views
2

Actions

Likes
0
Downloads
22
Comments
0

1 Embed 2

http://www.slideshare.net 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • Ajouter une image : code source java -> code javascript compilé -> interprétation par navigateur
  • Ne pas oublier de retrouver la date de sortie de 1.5.3
  • À déplcaer vers la fin ?

cours_du_soir_gwt_maj_15_12_2008.ppt cours_du_soir_gwt_maj_15_12_2008.ppt Presentation Transcript

  • After Work GWT Mercredi 17 Décembre 2008 Anthony Dahanne - Pascal Ognibene [email_address] , pascal.ognibene@valtech.fr http://blog.valtech.fr
  • Sommaire du cours
    • Présentation de GWT
    • (TP) Mise en place de l’environnement de dév, écriture d'un premier module GWT
    • Présentation de widgets (avec démo)‏
    • Création d’un Widget et gestion des évènements (+TP)‏
    • Les appels distants via RPC (+TP)‏
    • Plus loin dans GWT : cycle de vie du compilateur, tests unitaires, les librairies additionnelles, etc...
  • Présentation (1/5) : Pourquoi GWT ?
    • Il est difficile d’écriture du code JavaScript
      • Outillage (IDE) encore immature, debug compliqué (alert !)‏
      • Interprétation différente selon le navigateur
      • Manque de compétence Javascript
      • Langage peu adapté à la réalisation de grosses applications
    • La solution : générer du code JavaScript à partir de code Java
    • IDE (comme Eclipse) nombreux et puissants, debug aisé
    • Un seul code source pour tous les navigateurs !
    • Optimisation (code JS “compacté”, génération de ce qui est utile uniquement)‏
    • Compétences faciles à trouver sur le marché
    • Projet racheté à une start up créée par Bruce Johnson,
    • Proposé en Open source fin 2006,
    • Dès le début, une forte communauté et de nombreuses bibliothèques dont EXT GWT
    • Egalement, intégration (wrappers) de librairies javascript existantes (scriptaculous, DOJO)
    • Aujourd'hui, un écosystème s'est cristallisé autour du projet.
    Présentation (2/5) : Historique
    • Optimisation (temps de chargement réduits) au coeur de GWT :
      • Fichiers échangés compressés avec gzip (selon le serveur WEB)
      • Allégement de la taille des fichiers grâce aux noms raccourcis de variables et fonctions Javascript
      • Chargement des scripts dans une iframe cachée en tâche de fond
      • Utilisation de la mise en cache des navigateurs
      • Le navigateur ne charge que les fonctions dont il a besoin
      • Lors de la compilation, le code Javascript pour chacun des navigateurs est généré : le navigateur gardera en cache le code approprié
      • Protocole spécifique pour communiquer avec le serveur, orienté performance
      • Du code en général plus performant que s'il était écrit à la main
    Présentation (3/5) : Performances
    • Microsoft Volta (C# , VB.NET) très en retard (moins performant)‏
    • Morfik ( http://www.morfik.com ) approche orientée BDD et XML (!)‏
    • GWT est aujourd’hui le framework de génération d’application web riches le plus avancé, ne nécessitant pas de plug-in additionnel (au contraire de Flash ou Silverlight).
    Présentation (5/5) : Des concurrents…
  • Qu'est-ce que GWT ?
    • GWT est :
      • Un ensemble de librairies Java
      • Un traducteur de code Java vers Javascript (avec optimisation du code généré)
      • Un outil permettant de générer une application cliente riche (RIA)
    • GWT n'est pas :
      • Une librairie Javascript (comme Scriptaculous ou YUI ou Jquery)
      • Un framework de développement Web (comme Struts ou JSF ou Rails)
      • Un outil pour générer un site web avec du contenu (wiki, blog, CMS, etc...)
  • Environnement de développement
    • Nous utiliserons :
      • Eclipse 3.3 ou supérieur
      • Une jdk Sun moderne (>=5.0)‏
      • Windows ou Linux ou Mac OS
      • GWT 1.5.3 (dernière version en date)
      • Tomcat (embarqué dans le projet GWT)‏
      • Navigateur Web (Firefox et ses plugins comme Firebug seront bienvenue, mais aussi Internet Explorer > 6, Safari, Chrome, etc.)‏
  • Notre premier projet GWT : le Projet RH
    • Nous avons été sélectionné pour une refonte du module de recherche d'emplois
    • Le client a entendu beaucoup de bien de GWT et a choisi cette technologie pour cette refonte
    • Nous disposons de 3 itérations :
      • Itération 0 : prise de connaissance avec l'outil
      • Itération 1 : création de la partie cliente
      • Itération 2 : lien avec la partie serveur
  • ProjetRh : Iteration0
    • ProjetRh : Une application permettant aux visiteurs de consulter les offres d'emploi selon des critères
    • Product Backlog de la première Itération :
      • Création du projet avec les outils GWT
      • Intégration du projet dans Eclipse
      • Tour du propriétaire
  • Itération 0 : création du projet
    • Un projet GWT avec (ou sans) Eclipse en quelques commandes :
    • Création d’un répertoire contenant le projet :
      • >mkdir ProjetRh
      • >cd ProjetRh
    • Création du projet Eclipse :
      • >GWT_HOMEprojectCreator.cmd -eclipse ApplicationRh
      • (il faut positionner la variable GWT_HOME sur le répertoire d'installation de GWT. Pour Linux/Mac, le script s'appelle simplement projectCreator)
    • Création de l’application :
      • >GWT_HOMEapplicationCreator.cmd -eclipse ApplicationRh fr.valtech.client.MonApp
    • Il n’y a plus qu’à lancer Eclipse et importer le projet créé !
    • Structure du projet :
      • Pour lancer le projet, il suffit d’utiliser le ProjetRh.launch et de le lancer en cliquant droit dessus “Run as Java Application”
      • Il est aussi possible de le lancer en ligne de commande avec ApplicationRh-shell
      • La console GWT ainsi que le navigateur GWT se lancent !
    Itération 0 : Tour du propriétaire
  • Itération 0 : tour du propriétaire
    • 2 modes de lancement :
      • Hosted (ou géré) : application exécutée en mode Java : permet de faciliter le code-compile-test- debug (permet d’exploiter les points d’arrêt dans Eclipse par exemple)‏
      • Web : Le navigateur lit simplement le code javascript généré par le compilateur GWT et l’interprète. Dans ce mode, par contre, on est en dehors d'eclipse donc pour débugger il faut utiliser un débugger Javascript
      • On essaiera donc au maximum de rester dans le monde Java et de ne déployer qu'au dernier moment en javascript.
  • Itération 0 : tour du propriétaire
    • Le module principal est représenté par un fichier XML ApplicationRh.gwt.xml , il est composé de :
      • Un ou plusieurs modules hérités
      • Un point d’entrée (le “main”)‏
      • Un chemin des sources, un autre des ressources
      • Scripts Javascript et CSS
      • Config vers les servlets RPC
      • Etc…
  • Iteration 1 : Création du GUI
    • Dans cette itération, nous allons :
      • Utiliser des widgets pour créer l'interface graphique
      • Utiliser un ImageBundle pour rassembler les images
      • Créer un tableau pour accueillir les résultats
      • Dans un premier temps, remplir ce tableau dans le code « client » (c'est-à-dire sans faire appel au serveur)
      • Dans l'itération suivante le code qui fournit les données sera déplacé côté serveur.
  • Iteration 1 : Présentation des Widgets
    • Pleins de Widget : boutons, labels, cases à cocher, listes, arbres, etc…
    • UIObject est la super classe , qui gère coordonnées, titre, visibilité et taille de tout objet graphique
    • Les widgets héritent de la super classe Widget qui proposent en plus des opérations hiérarchiques attachement au parent, etc…)‏
    • Les widgets proposent des événements basés sur des listeners Java, de manière similaire à AWT ou SWING
      • FocusListener, MouseListener, KeyBoardListener, etc…
  • Iteration 1 : Présentation des Widgets
    • TextBox : zone de saisie
    • Button : bouton HTML
    • Label : créer une zone de texte
    • Hyperlink :lien “interne”
    • ListBox : liste de valeurs
    • HTMLTable, FlexTable, Grid
    • MenuBar : création de menu pop-up
    • Tree : décomposition d’une liste sous un arbre
    • SuggestBox : interroge un oracle pour prédiction
    • HTML : permet de placer du code HTML
    • Image : insère une portion d’image ou une image entière
    • ImageBundle :
      • Permet d’atténuer les latences réseau en évitant les aller et retour
      • Regroupe plusieurs images en une : en JS + CSS, les images seront chargées sous la forme de portion d’une unique grosse image
      • Permet d'éviter de surcharger le serveur avec des petites requêtes multiples
    Iteration 1 : Présentation des Widgets
  • Iteration 1 : Présentation des Widgets
    • A comparer à Swing ou Windows.form
    • En GWT, on a plutôt fusionné la notion de Layout et de Panel
    • 4 types de Panel :
      • Simple
      • Complexe
      • Table
      • Split
    • FocusPanel : les éléments fils gèrent le focus
    • FormPanel : simule soumission d’un form. HTML ?
    • PopUpPanel et DialogBox
    • AbsolutePanel
    • Les enfants de CellPanel : DockPanel, HorizontalPanel, VerticalPanel
    • FlowPanel, StackPanel
    • HTMLPanel : intégration de GWT dans sites existants
    • DisclosurePanel : une encoche démasque les fils
    Iteration 1 : Présentation des Panels
  • Itération 1 : Création de Widgets
    • Dériver de la classe Widget ou d’une de ses sous classes
      • Bien observer la classe DOM
      • Bien réfléchir aux événements gérés, notamment en utilisant sinkEvent, gestion unifiée des événements entre navigateurs
      • UIObject ferait l’affaire, mais ne gère pas les événements
    • Ou dériver de la classe Composite, pour contenir d’autres Widgets
    • Pour débuter, il vaut mieux utiliser la classe Composite!
  • Utilisation de librairies externes
    • GWT est plutôt sobre par rapport à Flex et SilverLight
    • Les extensions rajoutent des effets graphiques (DnD, transitions, etc…)‏
    • 2 familles d’extensions :
      • Les wrapper, widgets qui encapsulent du code JavaScript
      • Les natives, directement écrites en GWT, n’importent pas de code JavaScript supplémentaire (permettent l’optimisation du code, d’être paramétrées, etc…)‏
    • Des problèmes de licence apparaissent !
    • GWT peut s'étendre avec GWT-WL, basé sur, entre autres, Scriptaculous, ou GXT
    • GWT-DnD : le célèbre Glisser/Déplacer
    • GWT-Ext, wrapper ExtJS
    • GXT ou ExtGWT, librairie native GWT, en retard par rapport à GWT-Ext
    • GWT Window Manager
    Présentation d’extension GWT
  • Itération 3 : appel de services distants
    • GWT apporte d'origine une fonctionnalité d'appels distants de méthode, RPC (Remote Procedure Call)
    • Nous allons utiliser GWT RPC pour lancer nos recherches sur le serveur Tomcat embarqué dans la console GWT
  • Itération 3 : Appels distants via GWT RPC
    • Appels asynchrones uniquement
      • Après tout, GWT utilise le support Ajax du navigateur
    • Rappelle un peu Corba !
      • Une interface de service (signature de méthodes distantes)‏
      • Une interface similaire à l'interface de service, mais asynchrone : c'est elle qui sera utilisée dans le code du client GWT
      • Une implémentation du service, située côté serveur
      • Point faible : couplage fort entre le code client et le code serveur car le contrat d'interface utilise une interface Java (et non un langage de type IDL).
  • Diagramme de classes GWT RPC
  • Appels distants
    • Attention aux types de retour des services ! Il doivent être sérialisables !
    • JavaScript n’est pas aussi riche que Java !
    • Ne pas oublier le fichier des module XML dans lequel on explicite le service utilisée et son implémentation
    • Déroulement du TP:
    • Examinez le code des interfaces de service
    • Implémentez la logique du service
    • GWT ne supporte pas toute l'API Java
    • L’interpréteur JS est mono thread
    • GWT ne supporte pas le chargement dynamique de classes
      • Class c = Class.forName(“”);
      • Object o =c.getInstance();
    • Une application GWT (ou Ajax) n'est pas référencée par les moteurs de recherche (sauf si elle dispose d'une page d'accueil)
    Conclusion : Des limitations…
  • Conclusion : Mais encore , GWT c’est …
    • I18N (internationalisation)
    • Dynamic Binding :
      • Chargement dynamique des classes
      • Réflexion primitive
      • Impl I = Class.forName(ClassName).newInstance();
    • Deferred Binding
      • Alimentation de variables à l’exécution (runtime)‏
      • Imp I = GWT.create(ClassName);
      • Le compilateur a la visibilité du code lors de la compilation, il peut l’optimiser
      • GWT génère le JS pour chaque navigateur, pour chaque d’implémentation de DOM.java (principe de permutation)
  • Mais encore , GWT c’est …
    • Des tests unitaires, à travers GWTTestCase que l’on hérite
    • On implémente getModuleName() pour récupérer son module
    • On le teste (assertions)‏
  • FIN
    • Mais peut être ne s’agit il que du début !
  • Références
    • Cours GWT par Sami Jaber (Valtech Training)‏
      • http://www.dng-consulting.com
    • GWT DnD :
      • http://code.google.com/p/gwt-dnd/wiki/GettingStartedWith2_x
    • GXT (ext GWT)‏
      • http://extjs.com/products/gxt/
    • Who's using GWT ?
    • http://code.google.com/intl/fr/webtoolkit/app_gallery.html
    • Une appli GWT riche
      • http://www.queweb.com
    • La démo de GWT
      • http://gwt.google.com/samples/KitchenSink/KitchenSink.html
  • Licence du document
    • Ce document est protégé par le contrat :
    • Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 2.0 France License.