Cours du soir GWT

  • View
    25

  • Download
    0

Embed Size (px)

DESCRIPTION

Mardi 3 Juin 2008 Anthony Dahanne anthony.dahanne@valtech.fr http://blog.dahanne.net http://blog.valtech.fr. Cours du soir GWT. Sommaire du cours. Prsentation de GWT (TP) Mise en place de lenvironnement de dv. (TP) Ecriture dun 1 er module GWT Prsentation de widgets (+TP) - PowerPoint PPT Presentation

Transcript

  • Cours du soir GWTMardi 3 Juin 2008Anthony Dahanne anthony.dahanne@valtech.frhttp://blog.dahanne.nethttp://blog.valtech.fr

  • Sommaire du coursPrsentation de GWT(TP) Mise en place de lenvironnement de dv.(TP) Ecriture dun 1er module GWTPrsentation de widgets (+TP)Prsentation des panels (+TP)Prsentation dextensions GWT (GXT, GWT Ext)Cration dun Widget (+TP)Appels distants via RPC (+TP)Plus loin dans GWT : cycle de vie du compilateur, tests unitaires, etc...

  • Prsentation (1/5) : Pourquoi GWT ?Problme : Difficult dcriture du code JavaScript dbug compliqu (alert !) interprtation diffrente selon le navigateur manque de comptence JS etcSolution : Gnrer du code JavaScript partir de code JavaComptences nombreuses (!)IDE (ex: Eclipse) au point, nombreux et richesPossibilit de dbug pas pas1 code source pour tous les navigateurs !Optimisation (code JS compact, gnration de ce qui est utile uniquement)

  • Projet rachet 1 start upCr par Bruce JohnsonPropos en Open source fin 2006Ds le dbut, une forte communaut, nombreuses bibliothques dont EXT GWT,

    Prsentation (2/5) : Historique

  • Optimisation (temps de chargement rduits) au coeur de GWT :Fichiers changs compresss avec gzipAllgement de la taille des fichiers grce aux noms raccourcis de variables et fonctions JSChargement des scripts dans une iframe cache en tche de fondUtilisation de la mise en cache des navigateursLe navigateur ne charge que les fonctions dont il a besoinLors de la compilation, le code JS pour chacun des navigateurs est gnr : le navigateur gardera en cache le code appropriPrsentation (3/5) : Performances

  • GWT supporte les primitives Java, lexception de Long (pas de support 64 bits en JS) qui est mapp en floatLinterprteur JS est mono threadGWT ne supporte pas le chargement dynamique de classesClass c = Class.forName();Object o =c.getInstance();EtcStyles dfinis dans feuille CSS et rutiliss via GWTPrsentation (4/5) : Des limitations

  • Microsoft Volta (C# , VB.NET) trs en retard (moins performant)Morfik (http://www.morfik.com) approche oriente BDD et XML (!)GWT est aujourdhui le framework de gnration dapplication web riches le plus avanc.Prsentation (5/5) : Des concurrents

  • Environnement de dveloppementNous utiliserons :Eclipse 3.3Une jdk Sun moderne (>=5.0)Windows ou Linux ou Mac OSGWT 1.5 RC1 (sortie le 28/05/2008)Tomcat (embarqu dans le projet GWT)Navigateur Web (Firefox et ses plugins comme Firebug sera bienvenue !)

  • Mon premier projet GWT !Un projet GWT sous Eclipse en quelques commandes partir de la racine de gwt-1.5.0 frachement dcompress :Cration dun rpertoire contenant le projet :>mkdir MonProjetGwt puis >cd MonProjetGwtCration du projet Eclipse :..\projectCreator.cmd -eclipse MaPremiereApplicationGwtCration de lapplication :..\applicationCreator.cmd -eclipse MaPremiereApplicationGwt fr.valtech.client.MonAppIl ny a plus qu lancer Eclipse et importer le projet cre !

  • Structure du projet : Pour lancer le projet, il suffit dutiliser le MonApp.launch et de lelancer en cliquant droit dessus Run as Java ApplicationLa console GWT ainsi quunnavigateur GWT se lancent !Mon premier projet GWT !

  • Mon premier projet GWT2 modes de lancement :Hosted (ou gr) : application excute en tant que bytecode Java : permet de faciliter le code-compile-test-debug (console de debug, permet dexploiter les points darrt dans Eclipse, etc)Web : Le navigateur lit simplement le code gnr par le compilateur GWT et linterprte naturellement

  • Mon 1er module GWTReprsent par un fichier XML (MonApp.gwt.xml), il est compos de :Un ou plusieurs modules hritsUn point dentre (le main)Un chemin des sources, un autre des ressourcesScripts JS et CSSConfig vers les servlets RPCEtc

  • Prsentation de widgetsPleins de Widget : boutons, labels, cases cocher, listes, arbres, etcUIObject est la super classe , qui gre coordonnes, titre, visibilit et taille de tout objet graphiqueLes widgets hritent de la super classe Widget qui proposent en plus des oprations hirarchiques attachement au parent, etc)Les widgets proposent des vnements bass sur des listeners JavaFocusListener, MouseListener, KeyBoardListener, etc

  • Prsentation de WidgetsTextBox : zone de saisieButton : bouton HTMLLabel : crer une zone de texteHyperlink :lien interneListBox : liste de valeursHTMLTable, FlexTable, GridMenuBar : cration de menu pop-upTree : dcomposition dune liste sous un arbreSuggestBox : interroge un oracle pour prdiction

  • HTML : permet de place du code HTMLImage : insre une portion dimage ou une image entireImageBundle : permet dattnuer les latences rseaux en vitant les aller et retourRegroupe plusieurs images en une : en JS + CSS, les images seront charges sous la forme de portion dune unique grosse imageNous rappelle le Keep Alive HTTP !Prsentation de Widgets

  • Prsentation des PanelsA comparer Swing ou Windows.formEn GWT, on a plutt fusionn la notion de Layout et de Panel4 types de Panel :SimpleComplexeTableSplit

  • FocusPanel : les lments fils grent le focusFormPanel : simule soumission dun form. HTML ?PopUpPanel et DialogBoxAbsolutePanelLes enfants de CellPanel : DockPanel, HorizontalPanel, VerticalPanelFlowPanel, StackPanelHTMLPanel : intgration de GWT dans sites existantsDisclosurePanel : une encoche dmasque les filsPrsentation des Panels

  • Prsentation dextension GWTGWT plutt sobre par rapport Flex et SilverLightLes extensions rajoutent de lAJAX (DnD, transitions, etc)2 familles dextensions : Les wrapper, widgets qui encapsulent du code JavaScriptLes natives, directement crites en GWT, nimportent pas de code JavaScript supplmentaire (permettent loptimisation du code, dtre paramtres, etc)Des problmes de licence apparaissent !GWT sappuie sur GWT-WL, bas sur, entre autres, Scriptaculous

  • GWT-DnD : le clbre Glisser/DplacerGWT-Ext, wrapper ExtJS la plus impressionnante, mais au coeur dune polmique suite son changement de licence Apache 2.0 vers double licence GPL + commercialeGXT ou ExtGWT, librairie native GWT, en retard par rapport GWT-ExtGWT Window ManagerPrsentation dextension GWT

  • Cration de WidgetsDriver de la classe Widget ou dune de ses sous classesBien observer la classe DOMBien rflchir aux vnements grs, notamment en utilisant sinkEvent, gestion unifie des vnements entre navigateursUIObject ferait laffaire, mais ne gre pas les vnementsOu driver de la classe Composite, pour contenir dautres Widgets

  • Appels distantsTout appel distant passe par Remote Procedure Call, qui sappuie sur JEEAppels asynchrones !Rappelle Corba !Une interface de service (signature de mthodes distantes)Implmente ct serveurUne interface plus technique, reprsente linterface de service mais en plus technique, faisant apparatre un AsyncCallBack qui contiendra les rponses de lappel

  • Appels distantsAttention aux types de retour des services!JavaScript nest pas aussi riche que Java (long, etc)Ils doivent tre srialisables Ne pas oublier le fichier des module XML dans lequel on explicite le service utilise et son implmentation

  • Mais encore , GWT cest I18NDynamic Binding : Chargement dynamique des classesRflexionImpl I = Class.forName(ClassName).newInstance();Deferred BindingAlimentation de variables lexcution (runtime)Imp I = GWT.create(ClassName);Le compilateur a la visibilit du code lors de la compilation, il peut loptimiserGWT gnre le JS pour chaque navigateur, pour chaque dimplmentation de DOM.java

  • Mais encore , GWT cest Des tests unitaires, travers GWTTestCase que lon hriteOn implmente getModuleName() pour rcuprer son moduleOn le teste (assertions)

  • FIN Mais peut tre ne sagit il que du dbut !

  • RfrencesCours GWT par Sami Jaber (Valtech Training)http://www.dng-consulting.comGWT DnD :http://code.google.com/p/gwt-dnd/wiki/GettingStartedWith2_xGXT (ext GWT)http://extjs.com/products/gxt/Ongwt.comUne appli GWT richehttp://www.queweb.comLa dmo de GWThttp://gwt.google.com/samples/KitchenSink/KitchenSink.html

  • Licence du documentCe document est protg par le contrat :Creative Commons Paternit-Pas d'Utilisation Commerciale-Partage des Conditions Initiales l'Identique 2.0 France License.