Prsentation de GWT GWT Google Web Toolkit g

Yves Bekkers
Outil dvelopp par Google depuis 2006 Principe
Utilisation massive dappels distance asynchrones Dveloppement WEB orient composants pp p Dvelopper en un seul langage : Java Lors du dploiement un compilateur traduit le code client crit en Java vers une application WEB classique (HTML+Javascript) Abstraction complte de la complexit lie HTML, Javascript, CSS
1 GWT - Yves Bekkers 2

GWT - Yves Bekkers

Application WEB dynamique RIA

Comme une application AJAX : pas de rechargement de page html entre les requtes Dvelopper une application AJAX sans crire de code Javascript
Dveloppement
crire linterface WEB en Java Dbugger linterface en Java dans un mode hte

Portabilit
Les applications GWT sont supportes automatiquement par tous les principaux navigateurs
IE Mozilla Firefox Safari Google Chrome

Production
Dployer lapplication en utilisant le compilateur crois GWT pour gnrer les pages HTML et le code Javascript partir du code Java
GWT - Yves Bekkers 3

GWT - Yves Bekkers

Communication avec le serveur

Deux types de communication
GWT RPC (Remote Procedure Call)
base dune servlet cot serveur asynchrone

Communications RPC
Appel de mthodes distance bas sur les servlet Esprit RMI
Crer une interface qui spcifie les mthodes distantes Implmenter linterface cot serveur p

HTTP XML, JSON (JavaScript Object Notation)

Droulement dun appel de mthode distance

Srialisation des arguments Appel de la mthode distante Srialisation du rsultat Le client dsrialise le rsultat

change dobjets java srialiss au dessus du protocole HTTP, asynchrone

GWT - Yves Bekkers 5 GWT - Yves Bekkers 6

Gwt Yves Bekkers

Format XML
<menu id="file" value="File"> <popup> <menuitem value="New" onclick="CreateNewDoc()" / () /> <menuitem value="Open" onclick="OpenDoc()" /> <menuitem value="Close" onclick="CloseDoc()" /> </popup> </menu> GWT - Yves Bekkers

Format JSON
{"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value":"New","onclick":"CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }}
GWT - Yves Bekkers 8

Pourquoi GWT
Pas besoin de connaitre Javascript Javacript est un faux langage objet Typage statique de votre application
Dtection de bug la compilation

Gwt et les applets

Mme ide de dpart
Dporter lactivit sur le client Dcharger le serveur Limiter les changes dinformation

On reste dans un mme univers de dveloppement : Java

Mise au point du code client en Java

Code plus simple avec GWT GWT offre en plus un mcanisme de RPC
Remote Procedure Call : appel de mthode distance Srialisation automatique des objets changs GWT - Yves Bekkers 10

Support des outils de dveloppement javascript/Ajax laisse dsirer

GWT - Yves Bekkers 9

Composants de GWT
le compilateur Java vers JavaScript un navigateur spcialement modifi pour permettre l'excution (et le dbogage) de code Java natif sans ncessiter la compilation JavaScript une bibliothque d'mulation JRE: il s'agit d'une q g implmentation en JavaScript d'un sous-ensemble de la bibliothque de classes Java standard (en particulier quasiment tout le package java.lang et une partie de java.util) une bibliothque de composants graphiques contenant des Widgets de base permettant la construction d'une interface graphique
GWT - Yves Bekkers 11

Un outil de dveloppement sous Eclipse

Un plugin pour Eclipse 3.4 site de mise jour
http://dl.google.com/eclipse/plugin/3.4

GWT - Yves Bekkers

12

Gwt Yves Bekkers

Structure dun nouveau projet sous Eclipse

Conventions
Module sous Eclipse
Deux fichiers avec une nommage cohrant
monMudule.gwt.xml le descripteur de module monModule.html la page html hte du module

Plusieurs modules sont autoriss dans un mme projet, ils ont chacun leur descripteur, point dentre et leur page HTML Hte Un module na quune page HTML hte Si un module a plusieurs points dentre ils apparaissent tous dans la mme page
GWT - Yves Bekkers 13 GWT - Yves Bekkers 14

Le dossier war
Le dossier war, reprsente larchive WAR qui sera exporte/dploye. Lors de la compilation du projet, les fichiers seront crs dans un sousdossier de celui-l.
Le rpertoire lib du WEB-INF contient les librairies p GWT.

Le dossier src
On trouve deux packages
Client Server

O trouve aussi un fichier On t i fi hi GWTDemo.gwt.xml

Toutes les ressources (images, css, ) doivent tre places dans le rpertoire war linstar dune application Web classique.
GWT - Yves Bekkers 15 GWT - Yves Bekkers 16

GWT en mode hte mise au point

Application peut sexcuter en mode hte hosted mode
La JVM excute le code client lintrieur d une dune fentre de navigateur hte Mise au point facilite
diter le source Rafraichir Examiner les rsultats Recommencer
GWT - Yves Bekkers 17

GWT en mode WEB dploiement

Une fois test le code en mode hte on le compile et on le dploie sur un serveur (Tomcat dApache par exemple) Une application dploye est dite en mode WEB Une fois dploy le code client est du pur HTML+Javacript

GWT - Yves Bekkers

18

Gwt Yves Bekkers

Support des CSS

Sparation du code et de la prsentation Code Java
Public ListWidget(String Item) { setStyleName("gwt-ListWidget"); }

Interface graphique

Fichier CSS
.gwt-ListWidget { background-color:black; color:red; } GWT - Yves Bekkers

19

GWT - Yves Bekkers

20

Composants graphiques (Widgets) disponibles

Des composants graphiques classiques
Panneaux Boutons Cases cocher Tables / Grilles Botes de dialogues Primitive HTML (dont les images et les hyperliens) Menus et barres de menus Fentres dfilantes Onglets Arbres

Un exemple : le compteur

Plusieurs composants non disponibles dans GWT ont t implmentes dans des librairies tierces, comme Ext GWT, GWT Component Library, GWT-Ext,GWT Widget Library,GWTiger,Rocket GWT,dojo etc .
GWT - Yves Bekkers 21 GWT - Yves Bekkers 22

Structure de linterface
VerticalPanel

Structure de lapplication sous Eclipse

HorizontalPanel

HorizontalPanel

Label

TextBox

Button

Button

Button

GWT - Yves Bekkers

23

GWT - Yves Bekkers

24

Gwt Yves Bekkers

Notion de module
Un module est un ensemble de services cohrents rutilisables Toute application est incluse dans un module Un module comporte
Un nom de module Un descripteur de module (document Monmodule.gwt.xml) Une page HTML hte Un ventuel point dentre
GWT - Yves Bekkers 25

Nom du document descripteur

Sous Eclipse par dfaut si le projet sappelle monProjet le descripteur sappelle MonProjet.gwt.xml Le nom du document descripteur peut tre chang

GWT - Yves Bekkers

26

Le document Compteur.gwt.xml
placer dans le rpertoire src/fr/ifsic/gwt/compteur
<module rename-to='compteur'> <inherits name='com.google.gwt.user.User'/> <inherits name='com.google.gwt.user.theme.standard.Standard'/> g g g <entry-point class='fr.ifsic.gwt.compteur.client.Compteur'/> </module>

Nom dun module

Sous Eclipse si un projet sappelle monProjet que le module se trouve dans la paquetage fr.ifsic.test le module s appelle sappelle par dfaut fr.ifsic.test.MonProjet On peut renommer un module dans le fichier de configuration MonProjet.gwt.xml grce lattribut rename-to de llment <module>

Dclaration du point dentre du module

GWT - Yves Bekkers

27

GWT - Yves Bekkers

28

La page html hte

<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <link type="text/css" rel="stylesheet" href="Compteur.css"/> <title>Compteur</title> <script type="text/javascript" language="javascript" src="compteur/compteur.nocache.js"></script> </head> <body> <h1>Compteur</h1> <div id="mainCompteur" align="center"/> </body> </html>

La classe Compteur
public class Compteur implements EntryPoint { public void onModuleLoad() { } }

Point dentre du module : la mthode onModuleLoad

Remplace la mthode main dune application java

Llment <body> peut tre totalement vide

GWT - Yves Bekkers 29 GWT - Yves Bekkers 30

Gwt Yves Bekkers

Structure de linterface
mainPanel visuPanel bouttonPanel

Dclaration des composants de linterface

VerticalPanel mainPanel = new VerticalPanel(); HorizontalPanel visuPanel = new HorizontalPanel(); HorizontalPanel buttonPanel = new HorizontalPanel(); TextBox visuCompteurTextBox = new TextBox(); Button addButton = new Button("+1"); Button zeroButton = new Button("0"); Button subButton = new Button("-1"); Label label = new Label("Compteur");

label

visuCompteurTextBox p

addButton

zeroButton

subButton

Composants de la librairie
com.google.gwt.user.client.ui

GWT - Yves Bekkers

31

GWT - Yves Bekkers

32

Placement des composants de linterface

mainPanel.setHorizontalAlignment( HasHorizontalAlignment.ALIGN_CENTER); visuPanel.add(label); visuPanel.add(visuCompteurTextBox); buttonPanel.setSpacing(20); buttonPanel.add(addButton); buttonPanel.add(zeroButton); buttonPanel.add(subButton); mainPanel.add(visuPanel); mainPanel.add(buttonPanel); RootPanel.get("mainCompteur").add(mainPanel);
GWT - Yves Bekkers 33

Placement dans la page HTML

Dans le code Java
RootPanel. get("mainCompteur").add(mainPanel);

D Dans l page ht l la html

<div id="mainCompteur"/>

GWT - Yves Bekkers

34

Placement par dfaut

RootPanel.get().add(mainPanel);

Mmorisation de la valeur du compteur

Attribut cpt de la classe Compteur
public class Compteur implements EntryPoint { private int cpt = 0; public void onModuleLoad() { } }
GWT - Yves Bekkers 36

mainPanel est ajout au composant <body> de la

page html

GWT - Yves Bekkers

35

Gwt Yves Bekkers

Gestion des vnements sur les boutons

addButton.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { cpt++; refresh(); } });

Mise jour de linterface

private void refresh() { visuCompteurTextBox.setText(""+cpt); }

Le mthode refresh() met jour linterface

GWT - Yves Bekkers 37 GWT - Yves Bekkers 38

Gestion des vnement dans la

TextBox
visuCompteurTextBox.addKeyPressHandler( new KeyPressHandler() { public void onKeyPress(KeyPressEvent event) { if (event.getCharCode() == KeyCodes.KEY_ENTER) { String newVal = visuCompteurTextBox getText(); visuCompteurTextBox.getText(); cpt=Integer.parseInt(newVal); } } });

Dmonstration

Modification du compteur lors de la rception dun caractre retourlaligne

GWT - Yves Bekkers 39 GWT - Yves Bekkers 40

Galerie des composants - 1

Galerie des composants - 2

GWT - Yves Bekkers

41

GWT - Yves Bekkers

42

Gwt Yves Bekkers

Galerie des composants - 3

Galerie des composants - 4

GWT - Yves Bekkers

43

GWT - Yves Bekkers

44

Galerie des composants - 5

Galerie des composants - 6

GWT - Yves Bekkers

45

GWT - Yves Bekkers

46

Galerie des composants - 7

Galerie des composants - 8

GWT - Yves Bekkers

47

GWT - Yves Bekkers

48

Gwt Yves Bekkers

Galerie des composants - 9

Galerie des composants - 10

GWT - Yves Bekkers

49

GWT - Yves Bekkers

50

Choisir une date

DatePicker

Texte riche
RichTextArea

GWT - Yves Bekkers

51

GWT - Yves Bekkers

52

Panneau dcor
DecoratorPanel

Panneau extensible
DisclosurePanel

GWT - Yves Bekkers

53

GWT - Yves Bekkers

54

Gwt Yves Bekkers

Hritage - exemple du bouton

Widget attached parent FocusWidget ClickListenerCollection addClickListener Button getHTML setHTML IUObject Size Width toString

Hirarchie des composants

GWT - Yves Bekkers

55

GWT - Yves Bekkers

56

Fabrication dune table

FlexTable table = new FlexTable(); table.setText(0, 0, "Nom"); table.setText(1, 0, "Prnom"); table.setText(2, 0, "Email"); table.setWidget(0,1, new TextBox()); table.setWidget(1,1, new TextBox()); table.setWidget(2,1, new TextBox());

Fabrication dun arbre 1

class Demo extends Composite { public Demo() { Tree tree = new Tree(); initWidget(tree); TreeItem outerRoot = new TreeItem("aaaa"); outerRoot.addItem("bbbb"); outerRoot.addItem("cccc"); outerRoot.addItem("dddd"); outerRoot.addItem(new CheckBox("eeee")); tree.addItem(outerRoot); ...

GWT - Yves Bekkers

57

GWT - Yves Bekkers

58

Fabrication dun arbre 2

... TreeItem innerRoot = new TreeItem("ffff"); innerRoot.addItem("gggg"); innerRoot.addItem("hhhh"); innerRoot.addItem(new CheckBox("iiii")); outerRoot.addItem(innerRoot); } }

Appel de mthodes distance

RPC

GWT - Yves Bekkers

59

GWT - Yves Bekkers

60

Gwt Yves Bekkers

10

Principe de fonctionnement
Code GWT (client)

Crer un service
1. Cot client, dfinir une interface dite synchrone qui tend RemoteService et qui liste toutes les mthodes RPC 2. 2 Cot serveur, implmenter linterface et serveur l interface tendre RemoteServiceServlet 3. Cot client, dfinir une interface asynchrone base sur la premire interface avec le mme nombre de mthodes que la premire interface
61 GWT - Yves Bekkers 62

On demande un service mais on n attend nattend pas la rponse Celle-ci rponse. Celle ci viendra en son temps grce un objet de rappel .

Interface asynchrone

Interface synchrone

Code serveur

GWT - Yves Bekkers

Interface synchrone cot client

Spcification de vos services
import g g g p com.google.gwt.user.client.rpc.RemoteService; public interface MyService extends RemoteService { public T myMethod(T1 p1, T2 p2, T3 p3); }

Implmentation cot serveur

Implmentation de vos services
public class MyServiceImpl extends RemoteServiceServlet implements MyService { public T myMethod(T1 p1, T2 p2, T2 p3) { // return r; } }

GWT - Yves Bekkers

63

GWT - Yves Bekkers

64

Interface asynchrone cot client

Implmentation de vos services
interface MyServiceAsync { public void myMethod(T1 p1 T2 p2 p1, p2, T2 p3, AsyncCallback<T> callback); }

Appel de mthodes asynchrones

Un appel de mthode asynchrone ncessite de passer un objet de rappel (callback object) Lobjet de rappel est notifi lorsque lappel L objet l appel asynchrone est termin En attendant lappelant continu son activit Remarquez que les mthodes asynchrones ont un type rsultat void

GWT - Yves Bekkers

65

GWT - Yves Bekkers

66

Gwt Yves Bekkers

11

Conventions de nommage
Nom des classes et interfaces
MyService interface synchrone MyServiceImpl implementation MyServiceAsync interface asynchrone

Conventions de nommage - bis

Mthode de linterface synchrone public Integer[] myMethod(String s, int i) linterface Mthode de l interface asynchrone public void myMethod(String s, int i, AsyncCallback<Integer[]> callback)

Chaque mthode dans linterface synchrone doit avoir une mthode correspondante dans linterface asynchrone avec un paramtre extra en dernier argument de type AsyncCallback
GWT - Yves Bekkers 67

GWT - Yves Bekkers

68

Utilisation de services
Crer une instance de service
MonServiceAsync monService = GWT .create(MonService.class);

Chemin daccs un service

Le chemin daccs un service est compos de deux parties
/nomDuModule/nomDuService

Appel de mthode distance pp

monService.maMethode(p1,p2, new AsyncCallBack<T>() { public onFailure(Trowable t) {...} public onSuccess(T result) {...} })
GWT - Yves Bekkers 69

Le nom du service peut tre dfini de deux manires p

Statiquement par annotation dans linterface synchrone @RemoteServiceRelativePath("service") Dynamiquement
ServiceAsync service = GWT.create(Service.class); ServiceDefTarget test = (ServiceDefTarget) service test.setServiceEntryPoint("/module/service");
GWT - Yves Bekkers 70

Chemin daccs un service - bis

Les dclarations de path pour la servlet doivent tre cohrentes
Dans le descripteur de module <servlet class= "MaServlet" MaServlet path="/module/service"/> Dans le descripteur web.xml <url-pattern>/module/service</urlpattern>
GWT - Yves Bekkers 71

Un second exemple
La calculette dporte

GWT - Yves Bekkers

72

Gwt Yves Bekkers

12

Interface utilisateur

Structure de linterface
VerticalPanel

HTML

Label

FlexTable Text v1 Text v2 Text result Textbox Textbox Textbox

HorizontalPanel Button Button

Deux oprations addition et multiplication dportes sur le serveur

GWT - Yves Bekkers

73

GWT - Yves Bekkers

74

Dclaration des composants

final VerticalPanel mainPanel = new VerticalPanel(); final TextBox v1Field = new TextBox(); final TextBox v2Field = new TextBox(); final TextBox resultField = new TextBox(); final HorizontalPanel lesBoutons = new HorizontalPanel(); final FlexTable lesFields = new FlexTable(); final HTML titre = new HTML("<h1>Calculette dporte</h1>"); final Label invit = new Label("Entrez deux nombres puis cliquez sur un des boutons");

Remplissage du conteneur vertical

mainPanel.setSpacing(5); mainPanel.setHorizontalAlignment( HasHorizontalAlignment.ALIGN_CENTER); mainPanel.add(titre); mainPanel.add(invit); mainPanel.add(lesFields); mainPanel.add(lesBoutons);

GWT - Yves Bekkers

75

GWT - Yves Bekkers

76

Remplissage de la table
lesFields.setText(0,0,"V1"); lesFields.setText(1,0,"V2"); lesFields.setText(2,0,"Rsultat"); lesFields.setWidget(0,1,v1Field); lesFields.setWidget(1,1,v2Field); lesFields.setWidget(2,1,resultField); resultField.setEnabled(false);

Mise en place des boutons

final Button addButton = new Button("+"); addButton.setWidth("4em"); final Button mulButton = new Button("*"); mulButton.setWidth( 4em ); mulButton.setWidth("4em"); lesBoutons.setSpacing(10); lesBoutons.add(addButton); lesBoutons.add(mulButton);

Insertion dans la page HTML

RootPanel.get().add(mainPanel);

GWT - Yves Bekkers

77

GWT - Yves Bekkers

78

Gwt Yves Bekkers

13

Dclaration du serveur cot client

private final CalculetteServiceAsync calculetteService = GWT .create(CalculetteService.class);

Mise en place des objets de rappel pour ladditionneur

class AddHandler implements ClickHandler { public void onClick(ClickEvent event) { sendValuesToServer(); } private void sendValuesToServer() { int nb1 = Integer.parseInt(v1Field.getText()); int nb2 = Integer.parseInt(v2Field.getText()); calculetteService.addServer(nb1, nb2, new AsyncCallback<Integer>() {... }); } } GWT - Yves Bekkers

GWT - Yves Bekkers

79

80

Mise en place des objets de rappel - suite

new AsyncCallback<Integer>() { public void onFailure(Throwable caught) { } public void onSuccess(Integer result) { resultField.setText(result.toString()); } }

Ajout des deux objets de rappel

addButton.addClickHandler(new AddHandler()); mulButton.addClickHandler(new MulHandler());

GWT - Yves Bekkers

81

GWT - Yves Bekkers

82

Implementation de linterface cot serveur

public class CalculetteServiceImpl extends RemoteServiceServlet implements CalculetteService { public Integer addServer(int nb1, int nb2) { return nb1+nb2; } public Integer mulServer(int nb1, int nb2) { return nb1*nb2; } } GWT - Yves Bekkers 83

VALIDATION

GWT - Yves Bekkers

84

Gwt Yves Bekkers

14

Verifier (1)
public class MaxlengthVerifier { private int taille; public MaxlengthVerifier(int taille) { this.taille = taille; } public boolean isValid(String name) { if (name == null || name.length()==0) { return false; } return name.length() <= taille; } } GWT - Yves Bekkers 85

Verifier (2)
private final Label errorLabel = new Label(); private static final MaxlengthVerifier verif25 = new MaxlengthVerifier(25); errorLabel.setText(""); if (!verif25.isValid(titreField.getText())) { errorLabel.setText("svp entre 1 et 25 lettres dans le titre"); return false; }

GWT - Yves Bekkers

86

Verifier (3)
Mettre la procdure dans un rpertoire shared Dans le fichier monFic.gwt.xml
< <source path="client"/> th " li t"/> <source path="shared"/>

Dmonstration

GWT - Yves Bekkers

87

GWT - Yves Bekkers

88

Notion de session
On utilise les servlets qui implmentent les RPC HttpServletRequest request = this.getThreadLocalRequest(); HTTPSession session = request.getSession(); o = session.getAttribute(key) session.setAttribute(key, o);

Conclusion

GWT - Yves Bekkers

89

GWT - Yves Bekkers

90

Gwt Yves Bekkers

15