Presentation de gwt maven

1,006 views
937 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,006
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Presentation de gwt maven

  1. 1. Présentation de Google Web ToolkitEncadrer par :Mr Badr Hadria Présenter : Chater ABDELHAY .. Cheick Ismael MAIGA
  2. 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. 3. Introduction DéfinitionGoogle Web Toolkit (GWT) est un ensemble d’outils open source quipermet de développer des applications web dynamiques à partir decode 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. 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. 5. Principes• Un framework qui propose d ’écrire une application en java et de compiler ce code Javavers du HTML et du JavaScript nativement interprétables par les navigateurs webClient Java Compilateur Gwt JavaScript Service RPCServeur Services JavaPartie 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. 6. Structure d’un projet sous eclipseProjet simple Projet avec le plugin de maven
  7. 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. 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. 9. Le dossier src• On trouve deux packages• – Client• – Server• • On trouve aussi un fichier• GWTDemo.gwt.xml
  10. 10. Support CSS• Séparation du code et de la présentation• Code JavaPublic ListWidget(String Item) {… setStyleName("gwt-ListWidget");}• Fichier CSS .gwt-ListWidget { background-color:black; color:red;}
  11. 11. Vue d’ensemble des composant (IU)Composants dinterface-utilisateurProgrammation par événementsExemples dévénementsGestion des événementsPanneauxBouton simpleCase à cocherBouton radioBoîte de texteListe déroulanteArbreÉditeur de textesSupport des CSSI18NGestion de lhistorique
  12. 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 detéléversement de fichier, widget darbres, éditeur detexte enrichi.Différents panneaux très utiles pour la disposition
  13. 13. IU-Programmation par évènements• Essentiellement de la programmation par événements• Une méthode ou procédure sexécute quand unévénement est déclenché• Dans une IU, un événement est déclenché chaque foisque lutilisateur clique sur la souris, appuie sur unetouche du clavier, sélectionne un élément dans unmenu, ouvre ou ferme une fenêtre, etc.• À chaque composant de lIU appelé aussi contrôle ouwidget (comme un bouton, un menu, etc.) est associéun ou plusieurs gestionnaires dévénements (Listenerou Handler) qui peuvent comporter des paramètres
  14. 14. IU-Exemple d’évènements• OnClick – déclenché quand lusager 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 lusager appuie sur une touche• OnKeyUp – déclenché quand lusager 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 lusager double-clique
  15. 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 à dautres canevas dapplicationsgraphiques comme SWING• Le récepteur via linterface “listener interface” définitune ou plusieurs méthodes que le widget appelle enréaction à un événementButton unBouton = new Button("Cliquez moi!"); unBouton.addClickListener(new ClickListener() {public void onClick(Widget emetteur) {// traitement du Clic}});
  16. 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 dentré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 defichiers (FileUpload)• Panneaux de disposition simple : panneau en file (FlowPanel), panneau horizontal(Horizontal Panel), panneau vertical (VerticalPanel), panneau à coulisse(HorizontalSplitPanel, VerticalSplitPanel), panneau HTML (HTMLPanel), panneausuperposé (DeckPanel)• Panneaux de disposition complexe : table flexible* (FlexTable), grille (Grid), panneaupolyptyque* (DockPanel), panneau à onglets (TabPanel), panneau en pile (StackPanel)• Panneaux conteneurs simples : panneau composite ou composite (Composite) panneausimple (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. 17. IU-Panneaux DisclosurePanelVerticalPanel Horizontal HorizontalSplitPanel PanelVerticalSplitPanel FlowPanel DockPanel PopupPanel TabPanel
  18. 18. IU - Bouton simpleBouton (Button) // Création dun 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. 19. IU-Case à cocherCase à cocher (CheckBox)// Création dune case à cocherCheckBox caseResidentKnt = new CheckBox("Résident de Kénitra");// La case est cochée par défautcaseResidentKnt.setChecked(true);// Attacher un récepteur de clic à la casecaseResidentKnt.addClickListener(new ClickListener() {public void onClick(Widget sender) {boolean estKenitriain = ((CheckBox) sender).isChecked();Window.alert( (estKnenitriain ? "" : "non") + " Kenitriain");}});
  20. 20. IU-Bouton radioBouton radio (RadioButton) // Création dun 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. 21. IU-Boite de texte Boîte de texte (TextBox)TextBox zoneSaisie = new TextBox();// Interdire la saisie de texte non numériquezoneSaisie.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. 22. IU –Liste Déroulante Liste déroulante (ListBox)// Créer une liste, et lui ajouter quelques itemsListBox listeChoix = new ListBox();listeChoix.addItem("Pied-De-Vent");listeChoix.addItem("Notre-Dame-des-Neiges");listeChoix.addItem("Migneron");listeChoix.addItem("Riopelle de lIsle");listeChoix.addItem("Bleu Bénédictin");// Faire assez de place pour les 6 itemslisteChoix.setVisibleItemCount(6);// Ajouter un gestionnaire sur les événements de sélectionlisteChoix.addChangeHandler(new ChangeHandler() {public void onChange(ChangeEvent event) {alert(listeChoix.getSelectedIndex().getValue());}})
  23. 23. IU-ArbreArbre (Tree) : une hiérarchie déployable dewidgets TreeItem tronc = new TreeItem("Racine"); tronc.addItem("item 0"); tronc.addItem("item 1"); tronc.addItem("item 2"); // Ajouter une case à cocher à larbre TreeItem item = new TreeItem(new CheckBox("item 3")); tronc.addItem(item); Tree arbre = new Tree(); arbre.addItem(tronc);
  24. 24. IU-Editeur de TexteÉditeur de textes riche (RichTextArea)// Crée la zone dédition et sa barre de menuRichTextArea editeur = new RichTextArea();editeur.setSize("100%", "14em");RichTextToolbar barreMenu =new RichTextToolbar(editeur);barreMenu.setWidth("100%");// Ajoutez les composants à un panneauGrid panneauGrille = new Grid(2, 1);panneauGrille.setStyleName("editeur");panneauGrille.setWidget(0, 0, barreMenu);panneauGrille.setWidget(1, 0, editeur);
  25. 25. Gestion de l’historique du navigatieur• La gestion de lhistorique du navigateur soccupe desboutons « avancer » et « reculer » et des liens• Une API simple de gestion de lhistorique basée surune pile de jetons– Lorsque lapplication démarre, la pile est vide– Lorsque lutilisateur 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 HistoryListenerHistory.addHistoryListener(controle)
  26. 26. Appel de procédure à distance: RPC• GWT offre le très utile mécanisme dappel de procédure à distance ou RPC(Remote Procedure Call), comme moyen de communiquer avec les serviceshébergés sur un serveur JEE. Client et serveur parlent alors le même langage, i.e. le Java
  27. 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 dune 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. 28. RPC – Code- Serveur• Classe à implémenter du côté serveur hérite de com.google.gwt.user.server.rpc.RemoteServiceServletimport 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. 29. RPC :Code Client• Le client nest pas encore connecté au service. Nous pouvons faire cela en ajoutant unrécepteur (Listener) à un élément de linterface, 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. 30. Intégration facile aux APIs Google
  31. 31. Intégration facile aux APIs GoogleGoogle offre un riche écosystème dAPIs en source libre• Androïd : plateforme Java en source libre pour latéléphonie intelligente• AppEngine : hébergement dapplications 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. 32. GWT: Avantages &Inconvénients
  33. 33. Avantages• Bon pour enrichir des applications Web avec Ajax et créerdes applications Web de « style bureautique »• Un seul langage: JAVA• Développement et mise au point rapide dans des EDIsfavorisant 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. 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• Laspect sécurité est à surveiller• GWT ne va pas résoudre « magiquement » tous lesproblèmes avec Ajax ou le Web 2.0
  35. 35. Question
  36. 36. AtelierGWT
  37. 37. Exemplepublic 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. 38. Merci pour votre attention

×