Cours%20du%20soir%20GWT - PowerPoint PPT Presentation
Title:
Cours%20du%20soir%20GWT
Description:
(TP) Mise en place de l'environnement de d v. (TP) Ecriture d'un 1er module GWT ... Des probl mes de licence apparaissent ! GWT s'appuie sur GWT-WL, bas ... – PowerPoint PPT presentation
Number of Views:344
Avg rating:3.0/5.0
Title: Cours%20du%20soir%20GWT
1
Cours du soir GWT
- Mardi 3 Juin 2008
- Anthony Dahanne
- anthony.dahanne_at_valtech.fr
- http//blog.dahanne.net
- http//blog.valtech.fr
2
Sommaire du cours
- Présentation de GWT
- (TP) Mise en place de lenvironnement de dév.
- (TP) Ecriture dun 1er module GWT
- Présentation de widgets (TP)?
- Présentation des panels (TP)?
- Présentation dextensions GWT (GXT, GWT Ext)?
- Création dun Widget (TP)?
- Appels distants via RPC (TP)?
- Plus loin dans GWT cycle de vie du compilateur,
tests unitaires, etc...
3
Présentation (1/5) Pourquoi GWT ?
- Problème Difficulté décriture du code
JavaScript - débug compliqué (alert !)?
- interprétation différente selon le navigateur
- manque de compétence JS
- etc
- Solution Générer du code JavaScript à partir de
code Java - Compétences nombreuses (!)?
- IDE (ex Eclipse) au point, nombreux et riches
- Possibilité de débug pas à pas
- 1 code source pour tous les navigateurs !
- Optimisation (code JS compacté, génération de
ce qui est utile uniquement)?
4
Présentation (2/5) Historique
- Projet racheté à 1 start up
- Créé par Bruce Johnson
- Proposé en Open source fin 2006
- Dès le début, une forte communauté, nombreuses
bibliothèques dont EXT GWT,
5
Présentation (3/5) Performances
- Optimisation (temps de chargement réduits) au
coeur de GWT - Fichiers échangés compressés avec gzip
- Allégement de la taille des fichiers grâce aux
noms raccourcis de variables et fonctions JS - 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 JS pour chacun
des navigateurs est généré le navigateur
gardera en cache le code approprié
6
Présentation (4/5) Des limitations
- GWT supporte les primitives Java, à lexception
de Long (pas de support 64 bits en JS) qui est
mappé en float - Linterpréteur JS est mono thread
- GWT ne supporte pas le chargement dynamique de
classes - Class c Class.forName()
- Object o c.getInstance()
- Etc
- Styles définis dans feuille CSS et réutilisés via
GWT
7
Présentation (5/5) Des concurrents
- Microsoft Volta (C , VB.NET) très en retard
(moins performant)? - Morfik (http//www.morfik.com) approche orientée
BDD et XML (!)? - GWT est aujourdhui le framework de génération
dapplication web riches le plus avancé.
8
Environnement de développement
- Nous utiliserons
- Eclipse 3.3
- Une jdk Sun moderne (gt5.0)?
- Windows ou Linux ou Mac OS
- GWT 1.5 RC1 (sortie le 28/05/2008)?
- Tomcat (embarqué dans le projet GWT)?
- Navigateur Web (Firefox et ses plugins comme
Firebug sera bienvenue !)?
9
Mon premier projet GWT !
- Un projet GWT sous Eclipse en quelques commandes
à partir de la racine de gwt-1.5.0 fraîchement
décompressé - Création dun répertoire contenant le projet
- gtmkdir MonProjetGwt puis gtcd MonProjetGwt
- Création du projet Eclipse
- ..\projectCreator.cmd -eclipse MaPremiereApplicati
onGwt - Création de lapplication
- ..\applicationCreator.cmd -eclipse
MaPremiereApplicationGwt fr.valtech.client.MonApp - Il ny a plus quà lancer Eclipse et importer le
projet créée !
10
Mon premier projet GWT !
- Structure du projet
- Pour lancer le projet, il suffit d
- utiliser le MonApp.launch et de le
- lancer en cliquant droit dessus
- Run as Java Application
- La console GWT ainsi quun
- navigateur GWT se lancent !
11
Mon premier projet GWT
- 2 modes de lancement
- Hosted (ou géré) application exécutée en tant
que bytecode Java permet de faciliter le
code-compile-test-debug (console de debug, permet
dexploiter les points darrêt dans Eclipse,
etc)? - Web Le navigateur lit simplement le code généré
par le compilateur GWT et linterprète
naturellement
12
Mon 1er module GWT
- Représenté par un fichier XML (MonApp.gwt.xml),
il est composé de - Un ou plusieurs modules hérités
- Un point dentrée (le main)?
- Un chemin des sources, un autre des ressources
- Scripts JS et CSS
- Config vers les servlets RPC
- Etc
13
Présentation de 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 - FocusListener, MouseListener, KeyBoardListener,
etc
14
Présentation de 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 dune liste sous un arbre
- SuggestBox interroge un oracle pour prédiction
15
Présentation de Widgets
- HTML permet de place du code HTML
- Image insère une portion dimage ou une image
entière - ImageBundle
- permet datténuer les latences réseaux en évitant
les aller et retour - Regroupe plusieurs images en une en JS CSS,
les images seront chargées sous la forme de
portion dune unique grosse image - Nous rappelle le Keep Alive HTTP !
16
Présentation des Panels
- 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
17
Présentation des Panels
- FocusPanel les éléments fils gèrent le focus
- FormPanel simule soumission dun 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
18
Présentation dextension GWT
- GWT plutôt sobre par rapport à Flex et
SilverLight - Les extensions rajoutent de lAJAX (DnD,
transitions, etc)? - 2 familles dextensions
- Les wrapper, widgets qui encapsulent du code
JavaScript - Les natives, directement écrites en GWT,
nimportent pas de code JavaScript supplémentaire
(permettent loptimisation du code, dêtre
paramétrées, etc)? - Des problèmes de licence apparaissent !
- GWT sappuie sur GWT-WL, basé sur, entre autres,
Scriptaculous
19
Présentation dextension GWT
- GWT-DnD le célèbre Glisser/Déplacer
- GWT-Ext, wrapper ExtJS
- la plus impressionnante, mais au coeur dune
polémique suite à son changement de licence
Apache 2.0 vers double licence GPL commerciale - GXT ou ExtGWT, librairie native GWT, en retard
par rapport à GWT-Ext - GWT Window Manager
20
Création de Widgets
- Dériver de la classe Widget ou dune 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 laffaire, mais ne gère pas les
événements - Ou dériver de la classe Composite, pour contenir
dautres Widgets
21
Appels distants
- Tout appel distant passe par Remote Procedure
Call, qui sappuie sur JEE - Appels asynchrones !
- Rappelle Corba !
- Une interface de service (signature de méthodes
distantes)? - Implémentée côté serveur
- Une interface plus technique, représente
linterface de service mais en plus technique,
faisant apparaître un AsyncCallBack qui
contiendra les réponses de lappel
22
Appels distants
- Attention aux types de retour des services!
- JavaScript nest pas aussi riche que Java (long,
etc)? - Ils doivent être sérialisables
- Ne pas oublier le fichier des module XML dans
lequel on explicite le service utilisée et son
implémentation
23
Mais encore , GWT cest
- I18N
- Dynamic Binding
- Chargement dynamique des classes
- Réflexion
- Impl I Class.forName(ClassName).newInstance()
- Deferred Binding
- Alimentation de variables à lexécution
(runtime)? - Imp I GWT.create(ClassName)
- Le compilateur a la visibilité du code lors de la
compilation, il peut loptimiser - GWT génère le JS pour chaque navigateur, pour
chaque dimplémentation de DOM.java
24
Mais encore , GWT cest
- Des tests unitaires, à travers GWTTestCase que
lon hérite - On implémente getModuleName() pour récupérer son
module - On le teste (assertions)?
25
FIN
- Mais peut être ne sagit il que du début !
26
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/GettingStart
edWith2_x - GXT (ext GWT)?
- http//extjs.com/products/gxt/
- Ongwt.com
- Une appli GWT riche
- http//www.queweb.com
- La démo de GWT
- http//gwt.google.com/samples/KitchenSink/KitchenS
ink.html
27
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.
Recommended
CrystalGraphics Presentations
