Vous êtes sur la page 1sur 33

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.

fr) ]

Introduction GWT

Page 1

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]

Table de matires
1 Rappel.............................................................................................................................................. 4 1.1 1.2 1.3 1.4 1.5 1.6 1.7 2 3 4 5 Internet et Web ....................................................................................................................... 4 Html (Hyper Text Markup Language) .................................................................................... 4 Script ....................................................................................................................................... 4 Java .......................................................................................................................................... 4 JavaScript ................................................................................................................................ 4 XML ........................................................................................................................................ 4 Ajax (Asynchronous JavaScript and XML) ............................................................................ 4

Cest quoi le GWT .......................................................................................................................... 5 A quoi sert le GWT ......................................................................................................................... 5 Les Avantages ................................................................................................................................. 5 Mise en place de GWT .................................................................................................................... 5 5.1 5.2 5.3 5.4 Environnement de dveloppement .......................................................................................... 5 Plate-forme et IDE choisi ........................................................................................................ 5 Installation dEclipse ............................................................................................................... 6 Installation du GWT ................................................................................................................ 7

Anatomie dun projet GWT............................................................................................................. 8 6.1 6.2 6.3 6.4 Les packages et la structure des dossiers ................................................................................. 8 La page HTML hte ................................................................................................................ 8 Le point dentre ..................................................................................................................... 8 Le fichier Module .................................................................................................................... 9

Les widgets et Les Handlers ............................................................................................................ 9 7.1 7.2 Les tapes de cration dun projet GWT ................................................................................. 9 Les widgets ............................................................................................................................ 13 Exemples ....................................................................................................................... 13

7.2.1 7.3 7.4

Les Handlers .......................................................................................................................... 15 Exemples de Widgets et Handlers ......................................................................................... 17 Label .............................................................................................................................. 17

7.4.1

Page 2

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ] 7.4.2 7.4.3 7.4.4 7.4.5 7.4.6 7.4.7 7.4.8 7.4.9 7.4.10 7.5 8 9 10 Button ............................................................................................................................ 18 RadioButton................................................................................................................... 18 CheckBox ...................................................................................................................... 19 ToggleButton ................................................................................................................. 20 TextBox ......................................................................................................................... 20 DatePicker (calendrier) .................................................................................................. 21 ListBox .......................................................................................................................... 22 DialogBox ..................................................................................................................... 23 Image ............................................................................................................................. 24

Conclusion ............................................................................................................................. 24

Hello GWT .................................................................................................................................... 24 Conclusion gnrale ...................................................................................................................... 33 Bibliographie ............................................................................................................................. 33

Page 3

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]

1 Rappel
1.1 Internet et Web
Il ne faut jamais faire confondre internet au web car chacun a sa propre notion. *Internet est un assemblage de multiples rseaux, tous connects entre eux. (Le rseau des rseaux) *Le web est donc un systme de fichiers que toute personne possdant un ordinateur (ou bien un Tlphone) connect Internet peut consulter.

1.2 Html (Hyper Text Markup Language)


Langage basic de description de pages Web. Utilis par les navigateurs web pour lire des documents visuels et audibles.

1.3 Script
Le script permet de lancer et coordonner lexcution dun programme.

1.4 Java
Cest un langage de programmation informatique orient objet.

1.5

JavaScript
Le JavaScript nest pas Java, en effet, cest Langage de script utilis pour fournir des

fonctionnalits interactives aux pages Web (validation de formulaires, communication avec le serveur,) utilis ct client, comme ct serveur.

1.6 XML
Cest un langage de balisage extensible qui permet de faciliter lchange des donnes complexes entres les systmes dinformations htrognes.

1.7 Ajax (Asynchronous JavaScript and XML)


Une manire de construire des applications web en se basant sur diverses technologies comme JavaScript, XML, DOM, XMLHTTPRequest et permet dchanger avec le serveur et de mettre jour une ou plusieurs parties dune page web sans recharger toute la page.

Page 4

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]

2 Cest quoi le GWT


Cest un ensemble doutils logiciels qui utilise le langage java dvelopp par Google qui permet de crer des applications web dynamiques en utilisant le JavaScript. Il permet aussi de crer des applications web en Ajax.

3 A quoi sert le GWT


Il permet de dvelopper des applications web purement en JavaScript en utilisant des Widgets communs tels que les zones de textes, les boutons radio, etc, afin dacclrer le dveloppement web. En effet, il permet dviter la gestion des diffrences entre les navigateurs.

4 Les Avantages
Les principaux avantages de GWT sont : Logiciel libre (Open source) Optimise le script Utilisation facile (programmation java) Assure le fonctionnement de lapplication avec tous les navigateurs

5 Mise en place de GWT


5.1 Environnement de dveloppement
Une des caractristiques de GWT cest quil nimpose aucun outil spcifique au dveloppeur, puisque le dveloppement se fait en java. Quelque soit votre IDE ; Eclipse, NetBeans ou
tout autre IDE, le dveloppement avec GWT ne se diffrencie que trs peu du dveloppement dune application Java classique. On crit du code Java, on le compile ( lIDE sen charge automatiquement), on lexcute et on le dbogue directement comme nimporte quel code Java. La conversion en JavaScript nest ncessaire que pour le dploiement de lapplication.

5.2 Plate-forme et IDE choisi


Le GWT est publi par Google dans trois plates-formes variantes :
Windows

(2000 ou ultrieure) ;

Page 5

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]


Mac

OS (versions 10.4 ou ultrieure) ; (x86, ncessite GTK+ version 2.2.1 ou ultrieure).

Linux

Afin dillustrer les exemples et introduire les diffrentes fonctionnalits de GWT, nous avons opt pour Eclipse 3.6 (Hlios) sur Windows 7, noter bien quil faut avoir le jdk(Java Developpment Kit) installer au pralable sur votre machine. Voici un lien pour tlcharger la version convenable pour vous

http://www.oracle.com/technetwork/java/javase/downloads/index.html

5.3

Installation dEclipse
Eclipse existe en plusieurs versions selon le type de dveloppement quon souhaite faire.

La distribution qui nous intresse doit au minimum intgrer le dveloppement web JEE qui inclut entre autres tous les outils web. Cette version peut se tlcharger depuis la page : http://www.eclipse.org/downloads/packages/release/Hlios Il nexiste pas dinstalleur pour Eclipse (dans les versions standard) ; le tlchargement consiste simplement en un fichier ZIP qui contient un unique dossier eclipse quil suffit de lextraire un endroit de votre choix. Le dossier eclipse que vous venez dextraire contient lapplication ellemme, qui sappelle eclipse.exe .

Page 6

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]

5.4 Installation du GWT

Le plugin GWT pour Eclipse de Google se trouve ladresse suivante : http://code.google.com/eclipse/ Si votre machine de dveloppement est connecte lInternet, il est prfrable dutiliser le gestionnaire de tlchargements intgr Eclipse pour installer ce plugin. 1. Dmarrez Eclipse 2. Slectionnez le menu Help/Install New Software... 3. Cliquez sur le bouton Add... 4. Entrez lURL du plugin : http://dl.google.com/eclipse/plugin/3.6 et validez avec OK. 5. Cliquer sur le bouton Select All

6. Validez avec Next . 7. Acceptez la licence qui vous est propose. 8. Laissez le tlchargement et linstallation se drouler. Sil vous est propos de redmarrer Eclipse pour prendre en compte les nouvelles fonctionnalits, il est prfrable daccepter.

Page 7

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ] 9. Vous devriez maintenant avoir des icnes supplmentaires dans Eclipse

6 Anatomie dun projet GWT


6.1 Les packages et la structure des dossiers
La structure dun projet GWT contient une partie constitue des fichiers et les pages statiques ainsi que le code Java compil, la deuxime partie contient le code GWT qui doit tre transform en JavaScript par le compilateur GWT. Dans notre package principal, le code GWT doit se trouver, par convention, dans un sous package nomm client . Par exemple, si le package principal de lapplication est tel.stage.intro , le code GWT doit se trouver dans le package tel.stage.intro.client Les ressources, ainsi que le code Java se trouvent sous un dossier src. Les fichiers et pages statiques (HTML, JSP, ...) se placent dans un dossier war, Dans ce dossier war, on trouve galement un sous-dossier WEB-INF qui contient un certain nombre de ressources ncessaires au bon dploiement : le fichier web.xml permettant de configurer lapplication et les ventuels servlets. le sous-dossier lib contenant les bibliothques Java utilises (fichiers .JAR). le sous-dossier classes contenant les classes Java compiles et les ressources.

6.2 La page HTML hte


Le code GWT, une fois il est crit, il est destin tourner lintrieur dune page web sous forme de JavaScript. Par consquent, mme si lapplication va occuper tout lcran, il lui faut une page web pour laccueillir : cest ce quon appelle la page HTML hte (HTML host page).

6.3 Le point dentre


Tout comme une application Java classique, une application GWT possde un point dentre. Dans le cas dune application Java classique, il sagit dune mthode public static void main(String

Page 8

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ] args[]) dans une classe quelconque, quon fait passer en paramtre la commande java pour dmarrer lapplication. Dans le cas de GWT, il sagit dune mthode public void onModuleLoad().

6.4 Le fichier Module


Un module est une unit de configuration de GWT. Il comprend tout ce qui est ncessaire pour compiler, excuter, dployer et rutiliser le projet GWT. Le module est dfini a travers un fichier XML contenant :

La liste des classes contenant un point dentrer instancier. Les modules hrits. Le source path qui doit contenir la liste des packages qui doivent tres convertis en JavaScript lors de la compilation de GWT.

Le fichier de module a un suffixe .gwt.xml .

7 Les widgets et Les Handlers


7.1 Les tapes de cration dun projet GWT
On va vous prsenter comment crer un nouveau projet GWT pour vous permettre de tester les exemples quon va introduire. 1-Cliquer sur licone de GWT et choisissez New Web Application Project

2-Donner un nom pour votre projet ainsi que le package principal de votre application (exemple : telecom.stage.test ) et cliquer sur Finish pour terminer lopration.

Page 9

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]

Remarque : Pour le moment, veuillez ne modifier les autres options 3-votre Projet est enfin crer

4-modifier le fichier Intro.java (qui est votre point dentr) dune faon quil contiendrait que la fonction onModuleLoad () 5-Modifier le fichier Intro.html en gardant que le squelette html et les liens vers les pages JavaScript et css. Pour commencer, nous allons placer notre premier widget : un bouton. Un widget doit tre plac dans Un panel (un support), le panel de base (celui qui "couvre" toute votre page HTML) s'appelle Page 10

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ] RootLayoutPanel, il est cr en utilisant la mthode statique "get". Nous allons "dposer" un bouton dans Le RootLayoutPanel. Un bouton est objet au sens POO du terme.
package telecom.stage.test.client; import import import import com.google.gwt.core.client.EntryPoint; com.google.gwt.user.client.ui.Button; com.google.gwt.user.client.ui.RootLayoutPanel; com.google.gwt.user.client.ui.VerticalPanel;

public class Intro implements EntryPoint { public void onModuleLoad() { final Button bouton =new Button(); bouton.setText("Cliquer ici!!!"); final VerticalPanel Panel = new VerticalPanel (); Panel.add(bouton); RootLayoutPanel.get().add(Panel);}}} final: notre widget ne sera pas modifier en cours dexcution, il permet doptimiser le code(prend

moins de place mmoire)


setText: permet dcrire un texte dans le bouton. Panel : il existe deux types : VerticalPanel et HorizontalPanel.

Pour tester cet exemple, cliquer sur Run Run asWeb Application

Aprs une attente, une adresse devrait apparatre dans l'onglet "Development Mode". Cliquer sur ce lien ou bien copier-coller cette adresse dans votre navigateur prfr. Votre navigateur devrait vous demander d'installer un plugin supplmentaire: acceptez. (NB : vous devez tre connecter internet)

Page 11

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ] Voici ce quaffiche le navigateur.

Il est bien sr possible de "dplacer" le VerticalPanel dans la page (pour l'instant il se trouve en haut et gauche). Nous avons par exemple les mthodes : setWidgetLeftRight et setWidgetTopBottom La mthode setWidgetLeftRight vous permet de spcifier la distance entre les bords verticaux de la page et votre widget (notre widget sera un VerticalPanel). La mthode setWidgetTopBottom vous permet de spcifier la distance entre les bords horizontaux de la page et votre widget. Si on a:
RootLayoutPanel.get().setWidgetTopBottom(monPanel,40,Unit.PCT,40,Unit.PCT);

Il est possible de choisir diffrents types d'units, ici, nous utilisons "le pourcentage de la taille totale de l'cran" (d'o le Unit.PCT).

Page 12

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ] Il existe d'autres mthodes pour placer votre Panel dans le RootLayoutPanel : *setWidgetLeftWidth *setWidgetTopHeight N'hsitez pas "balader" "Panel" sur l'cran pour vous familiariser avec tout cela.

7.2 Les widgets


En GWT, il existe beaucoup de widget disponible, citons par exemple ; les boutons, les zone de texte, les boutons radio, les checkbox, les boite de dialogue 7.2.1 Exemples

package telecom.stage.test.client; import import import import import import com.google.gwt.core.client.EntryPoint; com.google.gwt.dom.client.Style.Unit; com.google.gwt.user.client.ui.Button; com.google.gwt.user.client.ui.HorizontalPanel; com.google.gwt.user.client.ui.RootLayoutPanel; com.google.gwt.user.client.ui.TextBox;

public class Intro implements EntryPoint { public void onModuleLoad() { final TextBox TB=new TextBox(); final Button B=new Button(); B.setText("Cliquer ICI!!!!!!"); final HorizontalPanel HP=new HorizontalPanel(); HP.add(TB); HP.add(B); RootLayoutPanel.get().add(HP); RootLayoutPanel.get().setWidgetLeftRight(HP, 5, Unit.PCT, 40, Unit.PCT); } }

Rsultat :

Page 13

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ] Selon votre choix, vous pouvez aussi utiliser le VerticalPanel. Il existe un grand nombre de Panel en GWT, sitons par exemple le DockPanel :

Il est possible, laide du DockPanel, dintgrer un panel dans un autre. Exemple :


package telecom.stage.test.client; import import import import import import import import import com.google.gwt.core.client.EntryPoint; com.google.gwt.dom.client.Style.Unit; com.google.gwt.user.client.ui.Button; com.google.gwt.user.client.ui.DockLayoutPanel; com.google.gwt.user.client.ui.DockPanel; com.google.gwt.user.client.ui.HorizontalPanel; com.google.gwt.user.client.ui.RootLayoutPanel; com.google.gwt.user.client.ui.TextBox; com.google.gwt.user.client.ui.VerticalPanel;

public class Intro implements EntryPoint { public void onModuleLoad() { final Button w=new Button("West"); final Button e=new Button("east"); final Button n=new Button("north"); final Button s=new Button("south"); final HorizontalPanel south=new HorizontalPanel(); final HorizontalPanel north=new HorizontalPanel(); final VerticalPanel east=new VerticalPanel(); final VerticalPanel west=new VerticalPanel(); east.add(e); west.add(w); north.add(n); south.add(s); final DockLayoutPanel dp=new DockLayoutPanel(Unit.PCT); dp.addNorth(north,20); dp.addSouth(south, 60); dp.addWest(west, 20); dp.addEast(east, 80); RootLayoutPanel.get().add(dp);

Page 14

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]


RootLayoutPanel.get().setWidgetTopBottom (dp,30,Unit.PCT,5,Unit.PCT); RootLayoutPanel.get().setWidgetLeftRight (dp,5,Unit.PCT,5,Unit.PCT); } }

Rsultat :

7.3 Les Handlers


Les handlers sont un peu l'quivalent des listeners en Java, ils servent grer les clics de souris sur les boutons grce la mthode onClick et la classe anonyme ClickHandler. Exemple 1:
public void onModuleLoad() { final Button bouton_1=new Button(); bouton_1.setText("Bouton"); bouton_1.addClickHandler(new ClickHandler (){ public void onClick (ClickEvent event) { Window.alert("Bonjour bouton 1"); } }); RootLayoutPanel.get().add(bouton_1); RootLayoutPanel.get().setWidgetLeftWidth (bouton_1,40,Unit.PCT,15,Unit.PCT); RootLayoutPanel.get().setWidgetTopHeight (bouton_1,45,Unit.PCT,10,Unit.PCT);} }

Notre classe anonyme ClickHandler possde une seule mthode : onClick. Rsultat : En cas de clic sur "bouton_1", une fentre d'alerte s'affiche. On peut aussi crire une classe charg de la gestion des handlers. Exemple : Classe Handler Page 15

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]


package telecom.stage.test.client; import import import import com.google.gwt.event.dom.client.ClickEvent; com.google.gwt.event.dom.client.ClickHandler; com.google.gwt.user.client.Window; com.sun.java.swing.plaf.windows.resources.windows;

public class Handler implements ClickHandler { @Override public void onClick(ClickEvent event) { Window.alert("Bouton 1"); } }

Classe Intro
package telecom.stage.test.client; import import import import import import import com.google.gwt.core.client.EntryPoint; com.google.gwt.dom.client.Style.Unit; com.google.gwt.event.dom.client.ClickEvent; com.google.gwt.event.dom.client.ClickHandler; com.google.gwt.user.client.Window; com.google.gwt.user.client.ui.Button; com.google.gwt.user.client.ui.RootLayoutPanel;

public class Intro implements EntryPoint { public void onModuleLoad() { final Button bouton_1=new Button(); bouton_1.setText("Bouton"); Handler han=new Handler(); bouton_1.addClickHandler(han); RootLayoutPanel.get().add(bouton_1); RootLayoutPanel.get().setWidgetLeftWidth (bouton_1,40,Unit.PCT,15,Unit.PCT); RootLayoutPanel.get().setWidgetTopHeight (bouton_1,45,Unit.PCT,10,Unit.PCT);} }

Si on a, par exemple deux boutons, on peut utiliser la mthode getSource(). Exemple :


public void onModuleLoad() { bouton_1.setText("Bouton 1"); bouton_1.addClickHandler(this); bouton_2.setText("Bouton 2"); bouton_2.addClickHandler(this); HorizontalPanel monPanel = new HorizontalPanel(); monPanel.add(bouton_1); monPanel.add(bouton_2);

Page 16

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]


RootLayoutPanel.get().add(monPanel); RootLayoutPanel.get().setWidgetLeftWidth (monPanel,40,Unit.PCT,15,Unit.PCT); RootLayoutPanel.get().setWidgetTopHeight (monPanel,45,Unit.PCT,10,Unit.PCT); } public void onClick (ClickEvent event){ if (event.getSource()==bouton_1){ Window.alert("Bonjour bouton 1"); } else { Window.alert("Bonjour bouton 2"); } }

Si on veut vrifier si un champs est vide et ventuellement on veut avertir lutilisateur on peut ajouter la mthode getValue(). Exemple:
public void onClick (ClickEvent event){ if (nom.getValue()==""){ Window.alert ("Entrer votre nom SVP"); } else { Window.alert("Bonjour "+nom.getValue()); } }

Noter bien que nom est une zone de text


final TextBox nom=new TextBox(); final Button tester=new Button("valider"); tester.addClickHandler(this);

7.4 Exemples de Widgets et Handlers


Voisi une liste de widgets utilisable avec GWT. 7.4.1 Label

Classe : Label ("votre texte") Label vous permet d'afficher un texte l'cran

public class Intro implements EntryPoint { final Label labelNom =new Label("Ceci est un Label"); public void onModuleLoad() { RootLayoutPanel.get().add(labelNom); RootLayoutPanel.get().setWidgetLeftWidth (labelNom,40,Unit.PCT,15,Unit.PCT);

Page 17

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]


RootLayoutPanel.get().setWidgetTopHeight (labelNom,45,Unit.PCT,15,Unit.PCT); } }

7.4.2

Button

Classe : Button (Titre de votre bouton)


public class Intro implements EntryPoint { public void onModuleLoad() { final Button bouton_1=new Button(); bouton_1.setText("Bouton"); bouton_1.addClickHandler(new ClickHandler (){ public void onClick (ClickEvent event) { Window.alert("Bonjour bouton 1"); } }); RootLayoutPanel.get().add(bouton_1); RootLayoutPanel.get().setWidgetLeftWidth (bouton_1,40,Unit.PCT,10,Unit.PCT); RootLayoutPanel.get().setWidgetTopHeight (bouton_1,45,Unit.PCT,6,Unit.PCT); } }

7.4.3

RadioButton

Classe : RadioButton ("nom du groupe","valeur") Un seul bouton par "groupe" peut tre coch (ici tous les boutons appartiennent au groupe "rG"). Une interface ("ValueChangeHandler") permet de suivre votre choix.

public class Intro implements EntryPoint ,ValueChangeHandler<Boolean> { final RadioButton r1 = new RadioButton ("rG","un" ); final RadioButton r2 = new RadioButton ("rG","deux"); final RadioButton r3 = new RadioButton ("rG","trois"); public void onModuleLoad() { final VerticalPanel monPanel = new VerticalPanel ();

Page 18

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]


monPanel.add (r1); monPanel.add (r2); monPanel.add (r3); r1.addValueChangeHandler(this); r2.addValueChangeHandler(this); r3.addValueChangeHandler(this); RootLayoutPanel.get().add(monPanel); RootLayoutPanel.get().setWidgetTopBottom (monPanel,40,Unit.PCT,40,Unit.PCT); RootLayoutPanel.get().setWidgetLeftRight (monPanel,40,Unit.PCT,50,Unit.PCT); } public void onValueChange (ValueChangeEvent<Boolean> event){ if (event.getSource()==r1){ Window.alert("hello Un"); } if (event.getSource()==r2){ Window.alert("hello Deux"); } if (event.getSource()==r3){ Window.alert("hello Trois"); } } }

L'interface "ValueChangeHandler" doit tre suivie par le type de valeur qui va changer (ici Boolean , le radioButton est coch (true) ou n'est pas coch (false)). La mthode getSource( ) applique l'instance "event" (event.getSource()) renvoie le nom de l'instance qui vient de changer. 7.4.4 CheckBox

Classe : CheckBox ("lgende de la CheckBox")


public class Intro implements EntryPoint ,ValueChangeHandler<Boolean> { final CheckBox maBox = new CheckBox ("La CheckBox n'est pas coche"); String etat; public void onModuleLoad() { etat="La CheckBox n'est pas coche"; maBox.addValueChangeHandler(this); RootLayoutPanel.get().add(maBox); RootLayoutPanel.get().setWidgetTopHeight (maBox,40,Unit.PCT,20,Unit.PCT); RootLayoutPanel.get().setWidgetLeftWidth (maBox,40,Unit.PCT,15,Unit.PCT); } public void onValueChange(ValueChangeEvent<Boolean> event){ if (event.getValue()==true){ etat="La CheckBox est coche"; } else{ etat="La CheckBox n'est pas coche"; }

Page 19

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]


maBox.setText(etat); } }

7.4.5

ToggleButton

ToggleButton est un bouton qui possde 2 tats : "enfonc" ou "non enfonc", il y a donc une possibilit de changer le text du bouton selon ltat.(on a NON pour non enfonc et OUI pour enfonc)
public class Intro implements EntryPoint ,ValueChangeHandler<Boolean> { final ToggleButton tBouton= new ToggleButton ("NON","OUI"); public void onModuleLoad() { tBouton.addValueChangeHandler(this); RootLayoutPanel.get().add(tBouton); RootLayoutPanel.get().setWidgetTopHeight (tBouton,40,Unit.PCT,4,Unit.PCT); RootLayoutPanel.get().setWidgetLeftWidth (tBouton,40,Unit.PCT,3,Unit.PCT); } public void onValueChange(ValueChangeEvent<Boolean> event){ if (event.getValue()==true){ Window.alert("Le bouton est enfonce"); } else{ Window.alert("Le bouton n'est pas enfonce"); } } }

7.4.6

TextBox Cest un champ de saisie. On va introduire un nouveau Handler : KeyUpHandler

public class Intro implements EntryPoint ,KeyUpHandler { final TextBox tBox= new TextBox (); final Label nbr=new Label(); final HorizontalPanel monHPanel=new HorizontalPanel(); public void onModuleLoad() { tBox.addKeyUpHandler(this); tBox.setText("Taper votre texte ici"); monHPanel.add(tBox); monHPanel.add(nbr); RootLayoutPanel.get().add(monHPanel); RootLayoutPanel.get().setWidgetTopHeight (monHPanel,40,Unit.PCT,4,Unit.PCT); RootLayoutPanel.get().setWidgetLeftWidth (monHPanel,40,Unit.PCT,30,Unit.PCT); } public void onKeyUp(KeyUpEvent event){ String nbrT=tBox.getText(); nbr.setText(" Vous avez tape "+nbrT.length()+" caractres"); } }

Page 20

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ] Nous avons utilis ici l'interface KeyUpHandler avec sa mthode associe onKeyUp. Cette mthode est appele aprs chaque appui sur une touche du clavier (il existe aussi les interfaces KeyDownHandler (quand une touche est relche, la mthode onKeyDown est appele) et KeyPressHandler (quand une touche est presse puis relche, la mthode onKeyPress est appele)). Notez aussi l'utilisation de la mthode "length ( )" qui compte le nombre de caractres dans une chane. Il existe aussi la classe PasswordText qui fonctionne exactement comme TextBox (les caractres sont masqus, c'est la seule diffrence). 7.4.7 DatePicker (calendrier) DatePicker fournit un calendrier qui permet de slectionner une date. Exemple :
public class Intro implements EntryPoint, ValueChangeHandler<Date> { final DatePicker calendrier=new DatePicker(); final Label dateLabel = new Label(); final DateTimeFormat formatDate= DateTimeFormat.getFormat("dd/MM/yyyy"); final VerticalPanel vPanel=new VerticalPanel(); public void onModuleLoad() { calendrier.addValueChangeHandler(this); vPanel.add(calendrier); vPanel.add(dateLabel); RootLayoutPanel.get().add(vPanel); RootLayoutPanel.get().setWidgetTopBottom (vPanel,20,Unit.PCT,40,Unit.PCT); RootLayoutPanel.get().setWidgetLeftRight (vPanel,20,Unit.PCT,60,Unit.PCT); } public void onValueChange (ValueChangeEvent<Date> event){ Date choixDate=event.getValue(); dateLabel.setText("Vous avez choisi le "+formatDate.format(choixDate)); } }

Page 21

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ] Rsultat :

7.4.8

ListBox

La listBox vous permet de choisir entre plusieurs possibilits.


public class Intro implements EntryPoint, ClickHandler { final Button valider=new Button(); final ListBox listB=new ListBox(); public void onModuleLoad() { valider.setText("Valider"); valider.addClickHandler(this); listB.addItem("fruit"); listB.addItem("viande"); listB.addItem("lgume"); RootLayoutPanel.get().add(valider); RootLayoutPanel.get().add(listB); RootLayoutPanel.get().setWidgetLeftWidth (valider,10,Unit.PCT,15,Unit.PCT); RootLayoutPanel.get().setWidgetTopHeight (valider,25,Unit.PCT,5,Unit.PCT); RootLayoutPanel.get().setWidgetLeftWidth (listB,10,Unit.PCT,8,Unit.PCT); RootLayoutPanel.get().setWidgetTopHeight (listB,10,Unit.PCT,4,Unit.PCT); } public void onClick (ClickEvent event) { if (listB.isItemSelected(0)){ Window.alert("fruit"); } if (listB.isItemSelected(1)){ Window.alert("viande"); } if (listB.isItemSelected(2)){

Page 22

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]


Window.alert("lgume");}}}

Une fois on a cr une instance de de ListBox, on utilise la mthode addItem pour ajouter des lment notre liste. la mthode isItemSelected(0) renvoi true si vous slectionnez le premier choix, et renvoi false si vous optez pour autre choix. Cest le mme cas pour les autres(Par exemple pour isItemSelected(1) ) Notez Bien que le compteur des lments ajouter dans la liste commence par 0 et non pas 1. 7.4.9 DialogBox La classe DialogBox vous permet de faire apparatre une fentre de nulle part. Votre DialogBox pourra contenir n'importe quel widget, il suffira de crer une instance (DialogBox maBox= new DialogBox( )) et utilis la mthode setWidget(votre widget) . La mthode show( ) permet dafficher le DialogBox. La mthode center( ) le place au centre de lcran. La mthode setAnimationEnabled avec true permet dajouter une animation lors de lapparition et la fermeture de votre DialogBox. La mthode hide( ) fait disparatre la DialogBox.
public class Intro implements EntryPoint, ClickHandler { final DialogBox maBox =new DialogBox(); final Button monBout1=new Button("Cliquez ici"); final Button monBout2=new Button ("OK"); final Label monLabel = new Label("Voici votre DialogBox"); final VerticalPanel vPanelBox= new VerticalPanel(); public void onModuleLoad() { RootLayoutPanel.get().add(monBout1); RootLayoutPanel.get().setWidgetLeftWidth (monBout1,40,Unit.PCT,15,Unit.PCT); RootLayoutPanel.get().setWidgetTopHeight (monBout1,45,Unit.PCT,15,Unit.PCT); vPanelBox.add(monLabel); vPanelBox.add(monBout2); maBox.setText("Ma DialogBox"); maBox.setAnimationEnabled(true); maBox.setGlassEnabled(true); maBox.add(vPanelBox); monBout1.addClickHandler(this); } public void onClick (ClickEvent event) { maBox.center(); monBout2.addClickHandler (new ClickHandler (){

Page 23

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]


public void onClick (ClickEvent event) { maBox.hide(); }}) ;}}

7.4.10 Image Il est possible d'inclure des images dans une page directement en HTML, mais il est aussi possible (et mme conseill) de crer une instance de la classe Image, cette instance pourra tre utilise comme n'importe quel widget. Nos images (format jpeg) devront tre sauvegardes dans un dossier images qu'il faudra crer dans le dossier war.

Au moment de la cration dune instance image, il faut indiquer le chemin de votre image (ici, "images/photo.jpg")
public class Intro implements EntryPoint { public void onModuleLoad() { final Image monImage = new Image ("images/photo.jpg"); final Label monTexte = new Label ("Voici une photo"); final VerticalPanel monPanel = new VerticalPanel (); monPanel.add(monTexte); monPanel.add(monImage); RootLayoutPanel.get().add(monPanel); RootLayoutPanel.get().setWidgetTopHeight (monPanel,0,Unit.PCT,100,Unit.PCT); RootLayoutPanel.get().setWidgetLeftWidth (monPanel,0,Unit.PCT,100,Unit.PCT); } }

7.5 Conclusion
Les widgets, ventuellement les Handlers, prsenter dans ce document ne sont pas les seules, il existe beaucoup dautres.

8 Hello GWT
Pour clturer cette introduction, nous allons crer un site de rservation pour un htel fictif cit Ennasr. Nous dvelpperons uniquement la partie "client". La cration de ce site est un bon moyen

Page 24

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ] pour, non seulement rinvestir toutes les notions vues prcdemment, mais aussi avoir un premier exemple de la mise en place d'un projet plus "complexe". Ce site est visible l'adresse suivante : http://www.jihedv1.appspot.com/ Nous allons voir ensemble comment obtenir ce rsultat (puisque ce site n'a qu'un intrt pdagogique, l'aspect esthtique a t totalement nglig) Si votre tour vous dsirez crer un site accessible depuis internet, il faudra vous crer un compte Gmail pour pouvoir vous crer un compte Google App Engine sur : http://code.google.com/intl/fr-FR/appengine/

Il suffit ensuite d'utiliser l'icne

dans Eclipse pour dployer votre site.

Comme vous pouvez constater, la page est dcouper en deux parties, la partie situer votre droite nest quune simple programmation en utilisant le html-5: Le titre :

La carte indiquant les cordonnes de lhtel :

Page 25

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ] Le marquer vert indique la position de lhtel et votre position sera indiquer par un marquer rouge (Vous devez activer loption dans les paramtres de votre navigateur Autoriser tous les sites suivre ma
position gographique ).

Une galerie de photo quon peut gliss-dposer dans le cadre pour agrandir limage :

Voici le code de cette html de cette page :


<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="Essai.css" media="screen"> <title>Site de reservation d'htel</title> <script type="text/javascript" src="essai/essai.nocache.js"></script> <script type="text/javascript" src="jq/jquery.min.js"> </script> <script type="text/javascript" src="js/js.js"></script> </head> <body> <noscript> <div id="st1"> Your web browser must have JavaScript enabled in order for this application to display correctly. </div> </noscript> <h1>Site de reservation d'htel a cite Ennasr</h1> <div id="pos"> Notre Htel <table> <tr> <td> <img id="map" alt="Notre Golocalisation" src="http://maps.google.com/maps/api/staticmap? &amp;size=500x300

Page 26

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]


&amp;sensor=false &amp;maptype=roadmap &amp;markers=color:green|label:A|Tunisia+Tunis+Ennasr "> </td> </tr> </table> <table> <tr> <td colspan="5" rowspan="3" id="preview">Agrandir l'image</td> </tr> </table> <table> <tr><td id="images"><img src="images/c.jpg" datalarge="images/cp.jpg" alt="chambre a coucher"draggable="true"></td> <td id="images"><img src="images/caf.jpg" datalarge="images/cafp.jpg" alt="chambre a coucher"draggable="true"></td> <td id="images"><img src="images/a.jpg" datalarge="images/ap.jpg" alt="chambre a coucher"draggable="true"></td></tr> </table> </div> </body> </html>

Le reste est uniquement crit en Java : La classe calendrier :

public class calendrier implements ValueChangeHandler<Date>{ DatePicker date=new DatePicker(); final Label Lab=new Label("Veuillez saisir votre date d'arrivee"); final DateTimeFormat dtf= DateTimeFormat.getFormat("dd/MM/yyyy"); String str; public VerticalPanel afficher() { date.addValueChangeHandler(this); VerticalPanel vp=new VerticalPanel(); vp.add(Lab); vp.add(date); vp.setSpacing(10); return vp; } public void onValueChange(ValueChangeEvent<Date> event) { Date d=event.getValue();

Page 27

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]


if(d.after(new Date())) { str="votre date d'arrivee sera le "+dtf.format(d); Lab.setText(str); } } public String dateGetter() { if(str=="") { Window.alert("entrer une date svp"); return null; } else{return str;} } }

La mthode affiche renvoie un VerticalPanel qui est constitu de 2 widgets (un DatePicker et un Label). La mthode onValueChange est appele lorsque la date slectionne change. Cette mthode cre une chane (str) "Votre date d'arrive : "+la date slectionne sur le calendrier. Cette chane est ensuite utilise pour "remplir" le Label. La condition : if (d.after(new Date()), cette condition permet d'empcher le choix d'une date d'arrive antrieure la date du jour. La mthode dateGetter vrifie si une date a bien t slectionn sinon, une fentre "Entrer une date SVP" apparat. La classe chambre :

public class chambre implements ValueChangeHandler<Boolean> { int ch=0,t=0; final RadioButton r1=new RadioButton("g1","suite"); final RadioButton r2=new RadioButton("g1","familiale"); final RadioButton r3=new RadioButton("g1","couple"); final Label lab= new Label("type de chambre"); public HorizontalPanel hpn() { r1.addValueChangeHandler(this); final HorizontalPanel hp= new HorizontalPanel(); hp.add(lab); hp.add(r1); hp.add(r2); hp.add(r3); hp.setSpacing(10);

Page 28

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]


return hp; } public void onValueChange(ValueChangeEvent<Boolean> event) { if(event.getSource()==r1){ch=1;} else if(event.getSource()==r2){ch=2;} else {ch=3;} } public int tarif() { if(ch==1){t=500;} else if(ch==2){t=180;} else {t=90;} return t; } public String cho(){ String choix; if (ch==1){ choix = "Vous prendrez le suite"; } else if(ch==2){ choix = "Vous prendrez la chambre familiale de 5 personnes"; } else{ choix = "Vous prendrez la chambre de 2 persones"; } return choix; }}

La mthode hpn cre un panel et le retourne. La mthode onValueChange modifie la variable ch selon laquelle on peut laide de la mthode tarif de savoir le cot inclure dans le calcule final de la somme payer. La classe nuit (nombre de nuit estimer) :

public class Nuit { final Label lab=new Label("Nombre de nuits estimees"); final ListBox lbn=new ListBox(); final HorizontalPanel hp=new HorizontalPanel(); public HorizontalPanel nbn() { lbn.addItem("une"); lbn.addItem("deux"); lbn.addItem("trois"); lbn.addItem("quattre"); lbn.addItem("cinq");

Page 29

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]


lbn.addItem("six"); lbn.addItem("sept"); lbn.addItem("huit"); lbn.addItem("neuf"); hp.add(lab); hp.add(lbn); hp.setSpacing(10); return hp; } public int nbj() { int n=1; if(lbn.isItemSelected(0)){ if(lbn.isItemSelected(1)){ if(lbn.isItemSelected(2)){ if(lbn.isItemSelected(3)){ if(lbn.isItemSelected(4)){ if(lbn.isItemSelected(5)){ if(lbn.isItemSelected(6)){ if(lbn.isItemSelected(7)){ if(lbn.isItemSelected(8)){ return n; }}

n=1;} n=2;} n=3;} n=4;} n=5;} n=6;} n=7;} n=8;} n=9;}

La mthode nbn cre un panel et le retourne. La mthode nbj retourne un entier qui symbolise le nombre de nuit passer. La classe nourriture est quasi-quivalente la classe chambre.
public class nourriture implements ValueChangeHandler<Boolean> { final RadioButton r1=new RadioButton("g2","demi pension"); final RadioButton r2=new RadioButton("g2","pension complete"); final Label lab= new Label("type de reservation"); Boolean ch=false; int n=0; public HorizontalPanel hpn() { r1.addValueChangeHandler(this); final HorizontalPanel hp= new HorizontalPanel(); hp.add(lab); hp.add(r1); hp.add(r2); hp.setSpacing(10); return hp; } public int ch() { if(ch==false){n=1;} else {n=2;} return n; } public void onValueChange(ValueChangeEvent<Boolean> event) { if(event.getValue()==true){ch=true;} else{ch=false;} } public String cho(){ String choix; if (ch==false){

Page 30

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]


choix = "Vous prendrez le petit dejeuner et le dinner"; } else { choix = "Vous prendrez le petit dejeuner, le repas et le dinner"; } return choix; } }

Pour terminer, la classe Essai gre l'affichage des panels, le calcul du nombre de chambres, le nombre des nuits, le type daccommodation choisi, le prix du sjour, le montant de l'acompte et la cration de la fentre de rsum.
public class Essai implements EntryPoint, ClickHandler { //liste des choix et les boutons de validation final Button bv=new Button("Valider"); final Label rescal=new Label (); final Label reschamb=new Label (); final Label resnt=new Label (); final Label resnour=new Label (); final Label resprix=new Label (); final Label resac=new Label (); final Button resumValid=new Button("Valider"); final Button val=new Button("valider"); //dfinition des diffrentes instances calendrier cal=new calendrier(); chambre chamb=new chambre(); Nuit nt=new Nuit(); nourriture nour=new nourriture(); //cration des diffrents panel partir des instances cr VerticalPanel vpcal=cal.afficher(); HorizontalPanel hpchamb=chamb.hpn(); HorizontalPanel hpnuit=nt.nbn(); HorizontalPanel hpnour=nour.hpn(); public void onModuleLoad() { val.addClickHandler(this); //Mise en place des Panels RootLayoutPanel.get().add(vpcal); RootLayoutPanel.get().setWidgetLeftWidth (vpcal,3,Unit.PCT,20,Unit.PCT); RootLayoutPanel.get().setWidgetTopHeight (vpcal,10,Unit.PCT,40,Unit.PCT); RootLayoutPanel.get().add(hpnuit); RootLayoutPanel.get().setWidgetLeftWidth (hpnuit,3,Unit.PCT,20,Unit.PCT); RootLayoutPanel.get().setWidgetTopHeight (hpnuit,70,Unit.PCT,10,Unit.PCT); RootLayoutPanel.get().add(hpchamb); RootLayoutPanel.get().setWidgetLeftWidth (hpchamb,3,Unit.PCT,20,Unit.PCT); RootLayoutPanel.get().setWidgetTopHeight (hpchamb,50,Unit.PCT,10,Unit.PCT); RootLayoutPanel.get().add(hpnour); RootLayoutPanel.get().setWidgetLeftWidth (hpnour,3,Unit.PCT,20,Unit.PCT);

Page 31

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]


RootLayoutPanel.get().setWidgetTopHeight (hpnour,60,Unit.PCT,10,Unit.PCT); RootLayoutPanel.get().add(val); RootLayoutPanel.get().setWidgetLeftWidth (val,3,Unit.PCT,20,Unit.PCT); RootLayoutPanel.get().setWidgetTopHeight (val,85,Unit.PCT,10,Unit.PCT); } //La mthode onClick est appele en cas de validation de la rservation public void onClick(ClickEvent event) { if(cal.dateGetter()!=null) { //mise en place des labels du rsum int prix=0,t=0,n=0,c=0; rescal.setText(cal.dateGetter()); reschamb.setText(chamb.cho()); resnt.setText("vous avez choisi "+nt.nbj()+" nuit(s)"); resnour.setText(nour.cho()); t=chamb.tarif(); n=nt.nbj(); c=nour.ch(); //Calcul du prix du sjour prix=n*c*t; //Calcul du montant de l'acompte double prixAcDouble=prix*0.2; int prixAc=(int)prixAcDouble; resprix.setText("Le prix de votre sejour s'eleve a "+prix+" euros par personnes"); resac.setText("Accompte a verser : "+prixAc+" euros (20% du montant par personnes)"); //cration du Panel "rsum" VerticalPanel vpr=new VerticalPanel(); vpr.add(rescal); vpr.add(reschamb); vpr.add(resnour); vpr.add(resnt); vpr.add(resprix); vpr.add(resac); vpr.add(resumValid); vpr.setSpacing(10); //cration de la fentre "rsum" final DialogBox db=new DialogBox(); db.setAnimationEnabled(true); db.setGlassEnabled(true); db.setText("Recapitulation de votre reservation"); db.setWidget(vpr); db.center(); resumValid.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { db.hide(); //appel de la page www.google.fr Window.Location.assign("http://www.google.fr");}});}}}

Page 32

[Elaborer par Chabbeh Jihed (jihed_525@hotmail.fr) ]

9 Conclusion gnrale
Le GWT est un outil mergent qui vient de conqurir le domaine de dveloppement web tout en fixant un nouveau plafond de concurrence. Je tiens, la fin de ce document, de remercier la communaut des dveloppeurs open source qui nhsitent jamais de publi des documents de valeurs.

10 Bibliographie
https://developers.google.com/ https://www.wikipedia.org/ http://www.codes-sources.com/ Le livre programmation gwt 2 de Sami Jabeur

Page 33