Présentation de Google Web Toolkit

Encadrer par :Mr Badr Hadria Présenter : Chater ABDELHAY . . Cheick Ismael MAIGA

• 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

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

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

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

Serveur

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

Java JavaScript

Java Services

Compilateur Gwt

Service RPC

Structure d’un projet sous eclipse

Projet simple Projet avec le plugin de maven

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

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.

Le dossier src

• On trouve deux packages

• – Client

• – Server

• • On trouve aussi un fichier

• GWTDemo.gwt.xml

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

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

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

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

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

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

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)

IU-Panneaux

VerticalPanel HorizontalPanel

TabPanel

DockPanel

HorizontalSplitPanel

DisclosurePanel

FlowPanel VerticalSplitPanel

PopupPanel

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

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

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

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

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

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

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

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)

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

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

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 } }

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

Intégration facile aux APIs Google

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

GWT: Avantages &Inconvénients

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 »

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

Question

Atelier

G W T

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

Merci pour votre attention