Presentation de gwt maven
-
Upload
universite-de-sherbrooke -
Category
Documents
-
view
828 -
download
0
Transcript of Presentation de gwt maven
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