introduction à gwt

[Elaborer par Chabbeh Jihed ([email protected]) ]

Introduction à GWT


Table de matières1 Rappel...............................................................................................................................................4

1.1 Internet et Web........................................................................................................................4

1.2 Html (Hyper Text Markup Language)......................................................................................4

1.3 Script.........................................................................................................................................4

1.4 Java...........................................................................................................................................4

1.5 JavaScript..................................................................................................................................4

1.6 XML.........................................................................................................................................4

1.7 Ajax (Asynchronous JavaScript and XML).............................................................................4

2 C’est quoi le GWT............................................................................................................................5

3 A quoi sert le GWT..........................................................................................................................5

4 Les Avantages...................................................................................................................................5

5 Mise en place de GWT.....................................................................................................................5

5.1 Environnement de développement...........................................................................................5

5.2 Plate-forme et IDE choisi.........................................................................................................5

5.3 Installation d’Eclipse................................................................................................................6

5.4 Installation du GWT.................................................................................................................7

6 Anatomie d’un projet GWT..............................................................................................................8

6.1 Les packages et la structure des dossiers..................................................................................8

6.2 La page HTML hôte.................................................................................................................8

6.3 Le point d’entrée.......................................................................................................................8

6.4 Le fichier Module.....................................................................................................................9

7 Les widgets et Les Handlers.............................................................................................................9

7.1 Les étapes de création d’un projet GWT..................................................................................9

7.2 Les widgets.............................................................................................................................13

7.2.1 Exemples........................................................................................................................13

7.3 Les Handlers...........................................................................................................................15

7.4 Exemples de Widgets et Handlers..........................................................................................17

7.4.1 Label...............................................................................................................................17


7.4.2 Button.............................................................................................................................18

7.4.3 RadioButton....................................................................................................................18

7.4.4 CheckBox.......................................................................................................................19

7.4.5 ToggleButton..................................................................................................................20

7.4.6 TextBox..........................................................................................................................20

7.4.7 DatePicker (calendrier)...................................................................................................21

7.4.8 ListBox...........................................................................................................................22

7.4.9 DialogBox.......................................................................................................................23

7.4.10 Image..............................................................................................................................24

7.5 Conclusion..............................................................................................................................24

8 Hello GWT.....................................................................................................................................24

9 Conclusion générale.......................................................................................................................33

10 Bibliographie..............................................................................................................................33


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 réseaux, tous connectés entre eux. (Le réseau des réseaux)

*Le web est donc un système de fichiers que toute personne possédant un ordinateur (ou bien un

Téléphone) 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 l’exécution d’un programme.

1.4 Java

C’est un langage de programmation informatique orienté objet.

1.5 JavaScript

Le JavaScript n’est pas Java, en effet, c’est Langage de script utilisé pour fournir des

fonctionnalités interactives aux pages Web (validation de formulaires, communication avec le

serveur,…) utilisé côté client, comme côté serveur.

1.6 XML

C’est un langage de balisage extensible qui permet de faciliter l’échange des données

complexes entres les systèmes d’informations hétérogènes.

1.7 Ajax (Asynchronous JavaScript and XML)

Une manière de construire des applications web en se basant sur diverses technologies comme

JavaScript, XML, DOM, XMLHTTPRequest et permet d’échanger avec le serveur et de mettre à jour

une ou plusieurs parties d’une page web sans recharger toute la page.


2 C’est quoi le GWT

C’est un ensemble d’outils logiciels qui utilise le langage java développé par Google qui permet

de créer des applications web dynamiques en utilisant le JavaScript. Il permet aussi de créer des

applications web en Ajax.

3 A quoi sert le GWT

Il permet de développer des applications web purement en JavaScript en utilisant des Widgets

communs tels que les zones de textes, les boutons radio, etc, afin d’accélérer le développement web.

En effet, il permet d’éviter la gestion des différences 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 l’application avec tous les navigateurs

5 Mise en place de GWT

5.1 Environnement de développement

Une des caractéristiques de GWT c’est qu’il n’impose aucun outil spécifique au développeur,

puisque le développement se fait en java. Quelque soit votre IDE ; Eclipse, NetBeans ou

tout autre IDE, le développement avec GWT ne se différencie que très peu du

développement d’une

application Java classique. On écrit du code Java, on le compile ( l’IDE s’en charge

automatiquement),

on l’exécute et on le débogue directement comme n’importe quel code Java. La

conversion en JavaScript

n’est nécessaire que pour le déploiement de l’application.


5.2 Plate-forme et IDE choisi

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

• Windows (2000 ou ultérieure) ;

• Mac OS (versions 10.4 ou ultérieure) ;

• Linux (x86, nécessite GTK+ version 2.2.1 ou ultérieure).

Afin d’illustrer les exemples et introduire les différentes fonctionnalités de GWT, nous avons opté

pour Eclipse 3.6 (‘’Hélios’’) sur Windows 7, noter bien qu’il faut avoir le jdk(Java Developpment Kit)

installer au préalable sur votre machine.

Voici un lien pour télécharger la version convenable pour vous

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

5.3 Installation d’Eclipse

Eclipse existe en plusieurs versions selon le type de développement qu’on souhaite faire.

La distribution qui nous intéresse doit au minimum intégrer le développement web « JEE » qui inclut

entre autres tous les outils web.

Cette version peut se télécharger depuis la page :

http://www.eclipse.org/downloads/packages/release/Hélios

Il n’existe pas d’installeur pour Eclipse (dans les versions standard) ; le téléchargement consiste

simplement en un fichier ZIP qui contient un unique dossier « eclipse » qu’il suffit de l’extraire à un

endroit de votre choix. Le dossier « eclipse » que vous venez d’extraire contient l’application elle-

même, qui s’appelle « eclipse.exe ».

http://www.eclipse.org/downloads/packages/release/H%C3%A9lios

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


5.4 Installation du GWT

Le plugin GWT pour Eclipse de Google se trouve à l’adresse suivante :

« http://code.google.com/eclipse/ »

Si votre machine de développement est connectée à l’Internet, il est préférable d’utiliser le

gestionnaire de téléchargements intégré à Eclipse pour installer ce plugin.

1. Démarrez Eclipse

2. Sélectionnez le menu « Help/Install New Software... »

3. Cliquez sur le bouton « Add... »

4. Entrez l’URL du plugin : « http://dl.google.com/eclipse/plugin/3.6 »

et validez avec « OK. »

5. Cliquer sur le bouton « Select All …»

http://dl.google.com/eclipse/plugin/3.6

http://code.google.com/eclipse/


6. Validez avec «Next ».

7. Acceptez la licence qui vous est proposée.

8. Laissez le téléchargement et l’installation se dérouler. S’il vous est proposé de

redémarrer Eclipse pour prendre en compte les nouvelles fonctionnalités, il est

préférable d’accepter.

9. Vous devriez maintenant avoir des icônes supplémentaires dans Eclipse

6 Anatomie d’un projet GWT

6.1 Les packages et la structure des dossiers

La structure d’un projet GWT contient une partie constituée des fichiers et les pages statiques

ainsi que le code Java compilé, la deuxième 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 l’application 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 nécessaires au bon déploiement :

– le fichier web.xml permettant de configurer l’application et les éventuels servlets.

– le sous-dossier lib contenant les bibliothèques Java utilisées (fichiers .JAR).

– le sous-dossier classes contenant les classes Java compilées et les ressources.

6.2 La page HTML hôte

Le code GWT, une fois il est écrit, il est destiné à tourner à l’intérieur d’une page web sous

forme de JavaScript. Par conséquent, même si l’application va occuper tout l’écran, il lui faut

une page web pour l’accueillir : c’est ce qu’on appelle la page HTML hôte (HTML host page).

6.3 Le point d’entrée

Tout comme une application Java classique, une application GWT possède un « point d’entrée».

Dans le cas d’une application Java classique, il s’agit d’une méthode public static void main(String

args[]) dans une classe quelconque, qu’on fait passer en paramètre à la commande java pour démarrer

l’application. Dans le cas de GWT, il s’agit d’une méthode public void onModuleLoad().

6.4 Le fichier Module

Un module est une unité de configuration de GWT. Il comprend tout ce qui est nécessaire pour

compiler, exécuter, déployer et réutiliser le projet GWT.

Le module est défini a travers un fichier XML contenant :

La liste des classes contenant un point d’entrer à instancier.

Les modules hérités.

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 création d’un projet GWT

On va vous présenter comment créer un nouveau projet GWT pour vous permettre de tester les

exemples qu’on va introduire.


1-Cliquer sur l’icone 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 l’opération.

Remarque : Pour le moment, veuillez ne modifier les autres options

3-votre Projet est enfin créer


4-modifier le fichier Intro.java (qui est votre point d’entré) d’une façon qu’il 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

RootLayoutPanel, il est créé en utilisant la méthode statique "get". Nous allons "déposer" un bouton

dans Le RootLayoutPanel. Un bouton est objet au sens POO du terme.

package telecom.stage.test.client;

import com.google.gwt.core.client.EntryPoint;import com.google.gwt.user.client.ui.Button;import com.google.gwt.user.client.ui.RootLayoutPanel;import 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 d’exécution, il permet d’optimiser le code(prend

moins de place mémoire)

setText: permet d’écrire un texte dans le bouton.

Panel : il existe deux types : VerticalPanel et HorizontalPanel.

Pour tester cet exemple, cliquer sur Run Run as…Web Application

Après une attente, une adresse devrait apparaître dans l'onglet "Development Mode". Cliquer sur ce

lien ou bien copier-coller cette adresse dans votre navigateur préféré. Votre navigateur devrait vous

demander d'installer un plugin supplémentaire: acceptez. (NB : vous devez être connecter à internet)

Voici ce qu’affiche le navigateur.


Il est bien sûr possible de "déplacer" le VerticalPanel dans la page (pour l'instant il se trouve en haut

et à gauche). Nous avons par exemple les méthodes :

setWidgetLeftRight et setWidgetTopBottom

La méthode setWidgetLeftRight vous permet de spécifier la distance entre les bords verticaux de la

page et votre widget (notre widget sera un VerticalPanel).

La méthode setWidgetTopBottom vous permet de spécifier 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 différents types d'unités, ici, nous utilisons "le pourcentage de la taille totale

de l'écran" (d'où le Unit.PCT).

Il existe d'autres méthodes pour placer votre Panel dans le RootLayoutPanel :

*setWidgetLeftWidth

*setWidgetTopHeight

N'hésitez 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


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



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);

}}

Résultat :

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, à l’aide du DockPanel, d’intégrer un panel dans un autre.

Exemple :


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



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);RootLayoutPanel.get().setWidgetTopBottom

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

(dp,5,Unit.PCT,5,Unit.PCT);}


}

Résultat :

7.3 Les Handlers

Les handlers sont un peu l'équivalent des listeners en Java, ils servent à gérer les clics de souris

sur les boutons grâce à la méthode onClick et à la classe anonyme ClickHandler.

Exemple 1:


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 possède une seule méthode : onClick.

Résultat : En cas de clic sur "bouton_1", une fenêtre d'alerte s'affiche.

On peut aussi écrire une classe chargé de la gestion des handlers.

Exemple : Classe Handler


import com.google.gwt.event.dom.client.ClickEvent;


import com.google.gwt.event.dom.client.ClickHandler;import com.google.gwt.user.client.Window;import com.sun.java.swing.plaf.windows.resources.windows;

public class Handler implements ClickHandler {

@Overridepublic void onClick(ClickEvent event) {

Window.alert("Bouton 1");}

}

Classe Intro


import com.google.gwt.core.client.EntryPoint;import com.google.gwt.dom.client.Style.Unit;import com.google.gwt.event.dom.client.ClickEvent;import com.google.gwt.event.dom.client.ClickHandler;import com.google.gwt.user.client.Window;import com.google.gwt.user.client.ui.Button;import com.google.gwt.user.client.ui.RootLayoutPanel;



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



Si on a, par exemple deux boutons, on peut utiliser la méthode getSource().

Exemple :


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);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 vérifier si un champs est vide et éventuellement on veut avertir l’utilisateur on peut ajouter

la méthode 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


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);RootLayoutPanel.get().setWidgetTopHeight

(labelNom,45,Unit.PCT,15,Unit.PCT);}


}

7.4.2 Button

Classe : Button (‘’Titre de votre bouton’’)


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



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 ();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 méthode getSource( )

appliquée à l'instance "event" (event.getSource()) renvoie le nom de l'instance qui vient de changer.

7.4.4 CheckBox

Classe : CheckBox ("légende 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";}maBox.setText(etat);}}


7.4.5 ToggleButton

ToggleButton est un bouton qui possède 2 états : "enfoncé" ou "non enfoncé", il y a donc une

possibilité de changer le text du bouton selon l’état.(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

C’est 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()+" caractères");}}

Nous avons utilisé ici l'interface KeyUpHandler avec sa méthode associée onKeyUp. Cette méthode


est appelée après chaque appui sur une touche du clavier (il existe aussi les interfaces

KeyDownHandler (quand une touche est relâchée, la méthode onKeyDown est appelée) et

KeyPressHandler (quand une touche est pressée puis relâchée, la méthode onKeyPress est appelée)).

Notez aussi l'utilisation de la méthode "length ( )" qui compte le nombre de caractères dans une

chaîne.

Il existe aussi la classe PasswordText qui fonctionne exactement comme TextBox (les caractères sont

masqués, c'est la seule différence).

7.4.7 DatePicker (calendrier)

DatePicker fournit un calendrier qui permet de sélectionner 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));}}

Résultat :


7.4.8 ListBox

La listBox vous permet de choisir entre plusieurs possibilités.

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("légume");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)){


Window.alert("légume");}}}Une fois on a créé une instance de de ListBox, on utilise la méthode « addItem » pour

ajouter des élément à notre liste.

la méthode « isItemSelected(0) » renvoi true si vous sélectionnez le premier choix, et renvoi « false »

si vous optez pour autre choix. C’est le même cas pour les autres(Par exemple pour

« isItemSelected(1) »)

Notez Bien que le compteur des éléments ajouter dans la liste commence par 0 et non pas 1.

7.4.9 DialogBox

La classe DialogBox vous permet de faire apparaître une fenêtre de nulle part.

Votre DialogBox pourra contenir n'importe quel widget, il suffira de créer une instance (DialogBox

maBox= new DialogBox( )) et utilisé la méthode « setWidget(votre widget) ».

La méthode « show( ) » permet d’afficher le DialogBox.

La méthode « center( ) » le place au centre de l’écran.

La méthode « setAnimationEnabled » avec « true » permet d’ajouter une animation lors de

l’apparition et la fermeture de votre DialogBox.

La méthode « hide( ) » fait disparaître 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 (){


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 même conseillé) de créer une instance de la classe Image, cette instance pourra être

utilisée comme n'importe quel widget. Nos images (format jpeg) devront être sauvegardées dans un

dossier images qu'il faudra créer dans le dossier war.

Au moment de la création d’une 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, présenter dans ce document ne sont pas les seules, il

existe beaucoup d’autres.

8 Hello GWT

Pour clôturer cette introduction, nous allons créer un site de réservation pour un hôtel fictif à cité

Ennasr. Nous dévelpperons uniquement la partie "client". La création de ce site est un bon moyen


pour, non seulement réinvestir toutes les notions vues précédemment, 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 résultat (puisque ce site n'a qu'un intérêt

pédagogique, l'aspect esthétique a été totalement négligé)

Si à votre tour vous désirez créer un site accessible depuis internet, il faudra vous créer un compte

Gmail pour pouvoir vous créer un compte Google App Engine sur :

http://code.google.com/intl/fr-FR/appengine/

Il suffit ensuite d'utiliser l'icône dans Eclipse pour déployer votre site.

Comme vous pouvez constater, la page est découper en deux parties, la partie situer à votre droite

n’est

qu’une simple programmation en utilisant le html-5:

Le titre :

La carte indiquant les cordonnées de l’hôtel :

http://code.google.com/intl/fr-FR/appengine/


Le marquer vert indique la position de l’hôtel et votre position sera indiquer par un marquer rouge

(Vous devez activer l’option dans les paramètres de votre navigateur « Autoriser tous les sites à suivre

ma position géographique »).

Une galerie de photo qu’on peut glissé-déposer dans le cadre pour agrandir l’image :

Voici le code de cette html de cette page :

<!doctype html>

<html> <head>


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(); 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 méthode affiche renvoie un VerticalPanel qui est constitué de 2 widgets (un DatePicker et un

Label).

La méthode onValueChange est appelée lorsque la date sélectionnée change. Cette méthode crée une

chaîne (str) "Votre date d'arrivée : "+la date sélectionnée sur le calendrier.


Cette chaîne est ensuite utilisée pour "remplir" le Label. La condition : if (d.after(new Date()),

cette

condition permet d'empêcher le choix d'une date d'arrivée antérieure à la date du jour.

La méthode dateGetter vérifie si une date a bien été sélectionné sinon, une fenêtre "Entrer une date

SVP" apparaît.

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);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 méthode hpn crée un panel et le retourne. La méthode onValueChange modifie la variable ch

selon laquelle on peut à laide de la méthode tarif de savoir le coût à 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");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)){ n=1;}if(lbn.isItemSelected(1)){ n=2;}if(lbn.isItemSelected(2)){ n=3;}if(lbn.isItemSelected(3)){ n=4;}if(lbn.isItemSelected(4)){ n=5;}if(lbn.isItemSelected(5)){ n=6;}if(lbn.isItemSelected(6)){ n=7;}if(lbn.isItemSelected(7)){ n=8;}if(lbn.isItemSelected(8)){ n=9;}return n; }}

La méthode nbn crée un panel et le retourne. La méthode 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){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 gère l'affichage des panels, le calcul du nombre de chambres, le nombre

des nuits, le type d’accommodation choisi, le prix du séjour, le montant de l'acompte et la création

de la fenêtre de résumé.

public class Essai implements EntryPoint, ClickHandler {//liste des choix et les boutons de validationfinal 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");//définition des différentes instancescalendrier cal=new calendrier();chambre chamb=new chambre();Nuit nt=new Nuit();nourriture nour=new nourriture();//création des diffèrents 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 PanelsRootLayoutPanel.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);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 méthode onClick est appelée en cas de validation de la

réservationpublic void onClick(ClickEvent event){

if(cal.dateGetter()!=null){ //mise en place des labels du résumé

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 séjourprix=n*c*t;//Calcul du montant de l'acomptedouble 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)");

//création du Panel "résumé"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);//création de la fenêtre "résumé"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.frWindow.Location.assign("http://www.google.fr");}});}}}

9 Conclusion générale

Le GWT est un outil émergent qui vient de conquérir le domaine de développement web tout en

fixant un nouveau plafond de concurrence. Je tiens, à la fin de ce document, de remercier la

communauté des développeurs open source qui n’hésitent 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

http://www.codes-sources.com/

https://www.wikipedia.org/

https://developers.google.com/

introduction à gwt

Documents

introduction gwt page

widgets et handlers

elaborer par chabbeh

cration dun projet gwt

anatomie dun projet

packages et

internet et web

page html hte