1. Présentation de Google Web
Toolkit
Encadrer par :Mr Badr Hadria Présenter : Chater ABDELHAY .
. Cheick Ismael MAIGA

2. • Introduction
• Création d’un projet (Confert TP)e
• Structure d’un projet sous eclipse
• Interface Utilisateur (IU)
• Les services distances RPC
• Avantages et Inconvénients
• Atelier

3. Introduction
Définition
Google Web Toolkit (GWT) est un ensemble d’outils open source qui
permet de développer des applications web dynamiques à partir de
code Java
Historique
 Créer par Bruce Johnson et Joel Webber en 2006
 Rachat par Google de la startup créée par Bruce Johnson
 Version 1.0 en 2006
 Version 1.5 en 2008
 Version 2.0 en 2009
 Version 2.1 en 2010
 Version 2.2 en 2011
 Version 2.4 en septembre de 2011
 Version 2.5 en Juin 2012

4. Pourquoi GWT ?
• Rareté des experts en JavaScript
• JS n’est pas un véritable langage à objet
• Pas de typage statique
• Sensible a la moindre coquille
• Débogage à l’exécution pas la compilation
• Manque de modularité et de capacité a grandir
• Support inégale des outils JavaScripts et Ajax
• Interprétation différentes selon les navigateur

5. Principes
• Un framework qui propose d ’écrire une application en java et de compiler ce code Java
vers du HTML et du JavaScript nativement interprétables par les navigateurs web
Client Java Compilateur Gwt JavaScript
Service RPC
Serveur Services Java
Partie Cliente: le code java qui est au final compilé en JavaScript et qui est exécuté dans un
browser
• N’utilisé, côté client ,que des librairies de l’API Java qui peuvent être compilé en JavaScript
• Emulation partielle (Java.lang.*,java.util.*,etc …)

6. Structure d’un projet sous eclipse
Projet simple Projet avec le plugin de maven

7. Convention
• Module sous Eclipse
• – Deux fichiers avec une nommage cohérant
• • monMudule.gwt.xml le descripteur de module
• • monModule.html la page html hôte du module
• – Plusieurs modules sont autorisés dans un
• même projet, ils ont chacun leur descripteur,
• point d’entrée et leur page HTML Hôte
• – Un module n’a qu’une page HTML hôte
• – Si un module a plusieurs points d’entrée ils
• apparaissent tous dans la même page

8. Le dossier War
• Le dossier war, représente l’archive WAR qui
• sera exportée/déployée. Lors de la compilation
• du projet, les fichiers seront créés dans un sousdossier
• de celui-là.
• – Le répertoire lib du WEB-INF contient les librairies
• GWT.
• • Toutes les ressources (images, css, …) doivent
• être placées dans le répertoire war à l’instar
• d’une application Web classique.

9. Le dossier src
• On trouve deux packages
• – Client
• – Server
• • On trouve aussi un fichier
• GWTDemo.gwt.xml

10. Support CSS
• Séparation du code et de la présentation
• Code Java
Public ListWidget(String Item) {
…
setStyleName("gwt-ListWidget");
}
• Fichier CSS
.gwt-ListWidget {
background-color:black;
color:red;
}

11. Vue d’ensemble des composant (IU)
Composants d'interface-utilisateur
Programmation par événements
Exemples d'événements
Gestion des événements
Panneaux
Bouton simple
Case à cocher
Bouton radio
Boîte de texte
Liste déroulante
Arbre
Éditeur de textes
Support des CSS
I18N
Gestion de l'historique

12. IU-Composant
• Balises HTML usuelles, comme img, anchor, hyperlink
• Bouton, bouton radio, bouton à bascule, case à cocher
• Menu, sous-menu, menu déroulant
• Champ de texte, zone de texte
• Onglets, liste déroulante, boîte de dialogue
• Séparateurs de fenêtre
• Widgets complexes comme des tables, boîte de
téléversement de fichier, widget d'arbres, éditeur de
texte enrichi.
Différents panneaux très utiles pour la disposition

13. IU-Programmation par évènements
• Essentiellement de la programmation par événements
• Une méthode ou procédure s'exécute quand un
événement est déclenché
• Dans une IU, un événement est déclenché chaque fois
que l'utilisateur clique sur la souris, appuie sur une
touche du clavier, sélectionne un élément dans un
menu, ouvre ou ferme une fenêtre, etc.
• À chaque composant de l'IU appelé aussi contrôle ou
widget (comme un bouton, un menu, etc.) est associé
un ou plusieurs gestionnaires d'événements (Listener
ou Handler) qui peuvent comporter des paramètres

14. IU-Exemple d’évènements
• OnClick – déclenché quand l'usager clique un élément
• OnBlur – déclenché quand un élément perd le focus du clavier
• OnChange - déclenché quand le contenu de la saisie change
• OnFocus – déclenché quand un élément reçoit le focus clavier
• OnKeyDown – déclenché quand l'usager appuie sur une touche
• OnKeyUp – déclenché quand l'usager relâche une touche
• OnKeyPress – déclenché quand un caractère est généré
• OnMouseOver – déclenché quand la souris passe au-dessus
• OnMouseMove – déclenché quand la souris entre dans la zone
• OnMouseOut – déclenché quand la souris sort de la zone
• OnScroll – déclenché quand un élément avec défilement bouge
• OnLoad – déclenché quand un élément termine de se charger
• OnDblClick – déclenché quand l'usager double-clique

15. IU-Récepteur/Gestionnaire d’évènement
• GWT utilise le concept de récepteur ou gestionnaire («
listener interface ») pour traiter les événements
• Semblable à d'autres canevas d'applications
graphiques comme SWING
• Le récepteur via l'interface “listener interface” définit
une ou plusieurs méthodes que le widget appelle en
réaction à un événement
Button unBouton = new Button("Cliquez moi!");
unBouton.addClickListener(new ClickListener() {
public void onClick(Widget emetteur) {
// traitement du Clic
}
});

16. IU-composant
• Éléments statiques: étiquette (Label), HTML, Image, hyperlien (Hyperlink), champ
caché (Hidden)
• Widgets (E/S) : bouton (Button), bouton poussoir (PushButton), bouton à bascule
(ToggleButton), case à cocher (CheckBox), bouton radio (RadioButton), menu déroulant
(ListBox), zone de texte (TextBox), zone de texte avec suggestions (SuggestBox),
zone d'entrée de mot de passe (PasswordTextBox), zone de texte multiligne (TextArea),
zone d'édition de texte enrichi (RichTextArea)
• Widgets complexes : arbre (Tree), barre de menus (MenuBar), téléversement de
fichiers (FileUpload)
• Panneaux de disposition simple : panneau en file (FlowPanel), panneau horizontal
(Horizontal Panel), panneau vertical (VerticalPanel), panneau à coulisse
(HorizontalSplitPanel, VerticalSplitPanel), panneau HTML (HTMLPanel), panneau
superposé (DeckPanel)
• Panneaux de disposition complexe : table flexible* (FlexTable), grille (Grid), panneau
polyptyque* (DockPanel), panneau à onglets (TabPanel), panneau en pile (StackPanel)
• Panneaux conteneurs simples : panneau composite ou composite (Composite) panneau
simple (SimplePanel), panneau à barre de défilement (ScrollPanel), panneau de focus
(FocusPanel)
• Panneaux conteneurs complexes : panneau de formulaire (FormPanel), panneau à
dévoilement* (DisclosurePanel), panneau surprise* (PopupPanel), boîte de dialogue
(DialogBox)

17. IU-Panneaux
DisclosurePanel
VerticalPanel Horizontal
HorizontalSplitPanel
Panel
VerticalSplitPanel FlowPanel
DockPanel
PopupPanel TabPanel

18. IU - Bouton simple
Bouton (Button)
// Création d'un bouton qui réagit à un clic
//grâce à un récepteur de clic
Button bouton = new Button("Cliquez-moi",
new ClickListener() {
public void onClick(Widget sender) {
Window.alert("Bonjour GWT");
}
});

19. IU-Case à cocher
Case à cocher (CheckBox)
// Création d'une case à cocher
CheckBox caseResidentKnt = new CheckBox("Résident de Kénitra");
// La case est cochée par défaut
caseResidentKnt.setChecked(true);
// Attacher un récepteur de clic à la case
caseResidentKnt.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
boolean estKenitriain = ((CheckBox) sender).isChecked();
Window.alert( (estKnenitriain ? "" : "non") + " Kenitriain");
}
});

20. IU-Bouton radio
Bouton radio (RadioButton)
// Création d'un groupe de boutons radio
RadioButton rbBleu = new RadioButton("groupeRbCouleurs", "bleu");
RadioButton rbBlanc = new RadioButton("groupeRbCouleurs",
"blanc");
RadioButton rbRouge = new RadioButton("groupeRbCouleurs",
"rouge");
// Cocher le bouton bleu par défaut
rbBleu.setChecked(true);
// Ajouter le groupe de boutons radio à un panneau
FlowPanel panneau = new FlowPanel();
panneau.add(rbBleu);
panneau.add(rbBlanc);
panneau.add(rbRouge);

21. IU-Boite de texte
Boîte de texte (TextBox)
TextBox zoneSaisie = new TextBox();
// Interdire la saisie de texte non numérique
zoneSaisie.addKeyboardListener(new KeyboardListenerAdapter() {
public void onKeyPress(Widget emetteur, char codeCar, int modifiers) {
if ((!Character.isDigit(codeCar)) && (codeCar != (char) KEY_TAB)
&& (codeCar != (char) KEY_BACKSPACE) && (codeCar != (char) KEY_DELETE)
&& (codeCar != (char) KEY_ENTER) && (codeCar != (char) KEY_HOME)
&& (codeCar != (char) KEY_END) && (codeCar != (char) KEY_LEFT)
&& (codeCar != (char) KEY_UP) && (codeCar != (char) KEY_RIGHT)
&& (codeCar != (char) KEY_DOWN)) {
// Annuler l'événement KeyPress
( (TextBox) emetteur ).cancelKey();
}
}
});

22. IU –Liste Déroulante
Liste déroulante (ListBox)
// Créer une liste, et lui ajouter quelques items
ListBox listeChoix = new ListBox();
listeChoix.addItem("Pied-De-Vent");
listeChoix.addItem("Notre-Dame-des-Neiges");
listeChoix.addItem("Migneron");
listeChoix.addItem("Riopelle de l'Isle");
listeChoix.addItem("Bleu Bénédictin");
// Faire assez de place pour les 6 items
listeChoix.setVisibleItemCount(6);
// Ajouter un gestionnaire sur les événements de sélection
listeChoix.addChangeHandler(new ChangeHandler() {
public void onChange(ChangeEvent event) {
alert(listeChoix.getSelectedIndex().getValue());
}
})

23. IU-Arbre
Arbre (Tree) : une hiérarchie déployable de
widgets
TreeItem tronc = new TreeItem("Racine");
tronc.addItem("item 0");
tronc.addItem("item 1");
tronc.addItem("item 2");
// Ajouter une case à cocher à l'arbre
TreeItem item = new TreeItem(new
CheckBox("item 3"));
tronc.addItem(item);
Tree arbre = new Tree();
arbre.addItem(tronc);

24. IU-Editeur de Texte
Éditeur de textes riche (RichTextArea)
// Crée la zone d'édition et sa barre de menu
RichTextArea editeur = new RichTextArea();
editeur.setSize("100%", "14em");
RichTextToolbar barreMenu =
new RichTextToolbar(editeur);
barreMenu.setWidth("100%");
// Ajoutez les composants à un panneau
Grid panneauGrille = new Grid(2, 1);
panneauGrille.setStyleName("editeur");
panneauGrille.setWidget(0, 0, barreMenu);
panneauGrille.setWidget(1, 0, editeur);

25. Gestion de l’historique du navigatieur
• La gestion de l'historique du navigateur s'occupe des
boutons « avancer » et « reculer » et des liens
• Une API simple de gestion de l'historique basée sur
une pile de jetons
– Lorsque l'application démarre, la pile est vide
– Lorsque l'utilisateur clique sur quelque chose
• Vous pouvez ajouter des jetons sur la pile
• History.newItem(“nouveauJeton”)
• Classe Hyperlink ajoute des jetons automatiquement
– Vous pouvez aussi réagir aux événements “History
• events” en utilisant un HistoryListener
History.addHistoryListener(controle)

26. Appel de procédure à distance: RPC
• GWT offre le très utile mécanisme d'appel de
procédure à distance ou RPC
(Remote Procedure Call), comme moyen de
communiquer avec les services
hébergés sur un serveur JEE. Client et serveur
parlent alors le même langage, i.e. le Java

27. RPC:Remote procedure Call
• Un objet Java MesDonneesDO à échanger
Import com.google.gwt.user.client.rpc.IsSerializable;
public class MesDonneesDO implements IsSerializable {
//...
}
• Une première interface définit le service
import com.google.gwt.user.client.rpc.RemoteService;
public interface MonService extends RemoteService {
MesDonneesDO getReponseMonService(String requete);
}
• Une deuxième interface dite asynchrone spécifie getReponseMonservice( ) mais avec un
paramètre supplémentaire sous la forme d'une procédure de rappel (« Callback ») que le code-
client utilisera pour appeler le service.
import com.google.gwt.user.client.rpc.AsyncCallback;
public interface MonServiceAsync {
public void getReponseMonService(String requete,
AsyncCallback maProcedureDeRappel);
}

28. RPC – Code- Serveur
• Classe à implémenter du côté serveur hérite de
com.google.gwt.user.server.rpc.RemoteServiceServlet
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import qc.ets.web2.gwt.client.MesDonneesDO;
import qc.ets.web2.gwt.client.MonService;
public class MonServiceImpl extends RemoteServiceServlet implements MonService {
public MesDonneesDO getReponseMonService(String requete) {
If (requete.length() < 1) {
throw new IllegalArgumentException("Requete invalide.");
}
MesDonneesDO resultat = new MesDonneesDO();
resultat.setDonnees("...");
If ( isInvalide( resultat )) {
return null;
}
return resultat;
}
public boolean isInvalide(MesDonneesDO resultat) {
Return true; // à modifier
}
}

29. RPC :Code Client
• Le client n'est pas encore connecté au service. Nous pouvons faire cela en ajoutant un
récepteur (Listener) à un élément de l'interface, ce qui peut être fait avec une classe interne.
public class MonClientRPC implements EntryPoint {
public void onModuleLoad() {
final Button bouton = new Button("Appel RPC");
final MonServiceAsync serviceProxy =
(MonServiceAsync)GWT.create(qc.ets.web2.gwt.client.MonService.class);
ServiceDefTarget pointService = (ServiceDefTarget) serviceProxy;
pointService.setServiceEntryPoint(GWT.getModuleBaseURL() + "/reponseService");
bouton.addClickListener(new ClickListener( ) {
public void onClick(Widget emetteur) {
AsyncCallback maProcedureDeRappel = new AsyncCallback() {
public void onSuccess(Object resultat) {
MesDonneesDO resultatDO = (MesDonneesDO) resultat;
S ystem.out.println("*** SUCCES RPC ***n" + resultatDO.getDonnees());
}
public void onFailure(Throwable erreur) {
System.out.println("*** ERREUR RPC ***" + erreur.getMessage());
}
};
serviceProxy.getReponseMonService("Requete bidon", maProcedureDeRappel);
}});
RootPanel.get("emprise1").add(bouton);
}
}

30. Intégration facile aux APIs Google

31. Intégration facile aux APIs Google
Google offre un riche écosystème d'APIs en source
libre
• Androïd : plateforme Java en source libre pour la
téléphonie intelligente
• AppEngine : hébergement d'applications Java
dans le nuage
• OpenSocial : norme libre pour les sites sociaux
• Google Maps : services de cartes et géolocation
• Google Ajax Searh APIs : le moteur Google
Search
• Google Gears API : BD locale et navigation hors
ligne
• Google Language API : services de traduction
• YouTube widget

32. GWT: Avantages &Inconvénients

33. Avantages
• Bon pour enrichir des applications Web avec Ajax et créer
des applications Web de « style bureautique »
• Un seul langage: JAVA
• Développement et mise au point rapide dans des EDIs
favorisant une bonne productivité et qualité du code
• Riche bibliothèque de composants (~ SWING)
• Très bon support Ajax
• Performant & économe en ressources réseau & serveur
• Code source libre, licence Apache 2, bien documenté
• Supporté par GOOGLE... et l'écosystème des outils Google
• Pas magique mais GWT a le potentiel de devenir le
« prochain gros truc »

34. Inconvénients
• Nécessite que le fureteur exécute JavaScript
• Exige la connaissance de la programmation Java
• Exige une séparation nette client et serveur
• Les composants (Widgets) sont de sources et de qualités
inégales
• Dépend des performances du transcompilateur
• Quelques problèmes de compatibilité entre les fureteurs
Web, surtout au niveau des CSS
• Certains problèmes demandent une expertise JS
• L'aspect sécurité est à surveiller
• GWT ne va pas résoudre « magiquement » tous les
problèmes avec Ajax ou le Web 2.0

35. Question

36. Atelier
GWT

37. Exemple
public class Bonjour implements EntryPoint {
public void onModuleLoad() {
Button bouton = new Button("Cliquez-moi!",
new ClickListener() {
public void onClick(Widget sender) {
Window.alert("Bonjour GWT");
}
});
RootPanel.get().add(bouton);
}
}

38. Merci pour votre attention