Presentation de gwt maven

  • View
    818

  • Download
    0

Embed Size (px)

Transcript

  • 1. Prsentation de Google WebToolkitEncadrer par :Mr Badr Hadria Prsenter : Chater ABDELHAY .. Cheick Ismael MAIGA

2. Introduction Cration dun projet (Confert TP)e Structure dun projet sous eclipse Interface Utilisateur (IU) Les services distances RPC Avantages et Inconvnients Atelier 3. Introduction DfinitionGoogle Web Toolkit (GWT) est un ensemble doutils open source quipermet de dvelopper des applications web dynamiques partir decode Java Historique Crer par Bruce Johnson et Joel Webber en 2006 Rachat par Google de la startup cre 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 nest pas un vritable langage objet Pas de typage statique Sensible a la moindre coquille Dbogage lexcution pas la compilation Manque de modularit et de capacit a grandir Support ingale des outils JavaScripts et Ajax Interprtation diffrentes selon les navigateur 5. Principes Un framework qui propose d crire une application en java et de compiler ce code Javavers du HTML et du JavaScript nativement interprtables par les navigateurs webClientJavaCompilateur Gwt JavaScriptService RPCServeur Services JavaPartie Cliente: le code java qui est au final compil en JavaScript et qui est excut dans unbrowser Nutilis, ct client ,que des librairies de lAPI Java qui peuvent tre compil en JavaScriptEmulation partielle (Java.lang.*,java.util.*,etc ) 6. Structure dun projet sous eclipseProjet simpleProjet avec le plugin de maven 7. Convention Module sous Eclipse Deux fichiers avec une nommage cohrant monMudule.gwt.xml le descripteur de module monModule.html la page html hte du module Plusieurs modules sont autoriss dans un mme projet, ils ont chacun leur descripteur, point dentre et leur page HTML Hte Un module na quune page HTML hte Si un module a plusieurs points dentre ils apparaissent tous dans la mme page 8. Le dossier War Le dossier war, reprsente larchive WAR qui sera exporte/dploye. Lors de la compilation du projet, les fichiers seront crs dans un sousdossier de celui-l. Le rpertoire lib du WEB-INF contient les librairies GWT. Toutes les ressources (images, css, ) doivent tre places dans le rpertoire war linstar dune application Web classique. 9. Le dossier src On trouve deux packages Client Server On trouve aussi un fichier GWTDemo.gwt.xml 10. Support CSS Sparation du code et de la prsentation Code JavaPublic ListWidget(String Item) { setStyleName("gwt-ListWidget");} Fichier CSS.gwt-ListWidget { background-color:black; color:red;} 11. Vue densemble des composant (IU)Composants dinterface-utilisateurProgrammation par vnementsExemples dvnementsGestion des vnementsPanneauxBouton simpleCase cocherBouton radioBote de texteListe droulanteArbrediteur de textesSupport des CSSI18NGestion de lhistorique 12. IU-Composant Balises HTML usuelles, comme img, anchor, hyperlink Bouton, bouton radio, bouton bascule, case cocher Menu, sous-menu, menu droulant Champ de texte, zone de texte Onglets, liste droulante, bote de dialogue Sparateurs de fentre Widgets complexes comme des tables, bote detlversement de fichier, widget darbres, diteur detexte enrichi.Diffrents panneaux trs utiles pour la disposition 13. IU-Programmation par vnements Essentiellement de la programmation par vnements Une mthode ou procdure sexcute quand unvnement est dclench Dans une IU, un vnement est dclench chaque foisque lutilisateur clique sur la souris, appuie sur unetouche du clavier, slectionne un lment dans unmenu, ouvre ou ferme une fentre, etc. chaque composant de lIU appel aussi contrle ouwidget (comme un bouton, un menu, etc.) est associun ou plusieurs gestionnaires dvnements (Listenerou Handler) qui peuvent comporter des paramtres 14. IU-Exemple dvnements OnClick dclench quand lusager clique un lment OnBlur dclench quand un lment perd le focus du clavier OnChange - dclench quand le contenu de la saisie change OnFocus dclench quand un lment reoit le focus clavier OnKeyDown dclench quand lusager appuie sur une touche OnKeyUp dclench quand lusager relche une touche OnKeyPress dclench quand un caractre est gnr OnMouseOver dclench quand la souris passe au-dessus OnMouseMove dclench quand la souris entre dans la zone OnMouseOut dclench quand la souris sort de la zone OnScroll dclench quand un lment avec dfilement bouge OnLoad dclench quand un lment termine de se charger OnDblClick dclench quand lusager double-clique 15. IU-Rcepteur/Gestionnaire dvnement GWT utilise le concept de rcepteur ou gestionnaire (listener interface ) pour traiter les vnements Semblable dautres canevas dapplicationsgraphiques comme SWING Le rcepteur via linterface listener interface dfinitune ou plusieurs mthodes que le widget appelle enraction un vnementButton unBouton = new Button("Cliquez moi!"); unBouton.addClickListener(new ClickListener() {public void onClick(Widget emetteur) {// traitement du Clic}}); 16. IU-composantlments statiques: tiquette (Label), HTML, Image, hyperlien (Hyperlink), champcach (Hidden) Widgets (E/S) : bouton (Button), bouton poussoir (PushButton), bouton bascule(ToggleButton), case cocher (CheckBox), bouton radio (RadioButton), menu droulant(ListBox), zone de texte (TextBox), zone de texte avec suggestions (SuggestBox),zone dentre de mot de passe (PasswordTextBox), zone de texte multiligne (TextArea),zone ddition de texte enrichi (RichTextArea) Widgets complexes : arbre (Tree), barre de menus (MenuBar), tlversement 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 dfilement (ScrollPanel), panneau de focus(FocusPanel) Panneaux conteneurs complexes : panneau de formulaire (FormPanel), panneau dvoilement* (DisclosurePanel), panneau surprise* (PopupPanel), bote de dialogue(DialogBox) 17. IU-PanneauxDisclosurePanelVerticalPanelHorizontalHorizontalSplitPanel PanelVerticalSplitPanelFlowPanelDockPanel PopupPanel TabPanel 18. IU - Bouton simpleBouton (Button)// Cration dun bouton qui ragit un clic//grce un rcepteur de clicButton bouton = new Button("Cliquez-moi",new ClickListener() {public void onClick(Widget sender) {Window.alert("Bonjour GWT");}}); 19. IU-Case cocherCase cocher (CheckBox)// Cration dune case cocherCheckBox caseResidentKnt = new CheckBox("Rsident de Knitra");// La case est coche par dfautcaseResidentKnt.setChecked(true);// Attacher un rcepteur de clic la casecaseResidentKnt.addClickListener(new ClickListener() {public void onClick(Widget sender) {boolean estKenitriain = ((CheckBox) sender).isChecked();Window.alert( (estKnenitriain ? "" : "non") + " Kenitriain");}}); 20. IU-Bouton radioBouton radio (RadioButton) // Cration 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 dfaut 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 Bote de texte (TextBox)TextBox zoneSaisie = new TextBox();// Interdire la saisie de texte non numriquezoneSaisie.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 lvnement KeyPress( (TextBox) emetteur ).cancelKey();}}}); 22. IU Liste DroulanteListe droulante (ListBox)// Crer 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 Bndictin");// Faire assez de place pour les 6 itemslisteChoix.setVisibleItemCount(6);// Ajouter un gestionnaire sur les vnements de slectionlisteChoix.addChangeHandler(new ChangeHandler() {public void onChange(ChangeEvent event) {alert(listeChoix.getSelectedIndex().getValue());}}) 23. IU-ArbreArbre (Tree) : une hirarchie dployable dewidgetsTreeItem tronc = new TreeItem("Racine");tronc.addItem("item 0");tronc.addItem("item 1");tronc.addItem("item 2");// Ajouter une case cocher larbreTreeItem item = new TreeItem(newCheckBox("item 3"));tronc.addItem(item);Tree arbre = new Tree();arbre.addItem(tronc); 24. IU-Editeur de Textediteur de textes riche (RichTextArea)// Cre la zone ddition 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. Gestion de lhistorique du navigatieur La gestion de lhistorique du navigateur soccupe desboutons avancer et reculer et