Your SlideShare is downloading. ×
0
Google Web Toolkit       David Herviou         @herviou       +david herviou  david.herviou@gmail.com
Présentation●   Généralités●   Construire son UI en GWT●   Internationalisation | i18n●   Communication Evènementielle●   ...
Généralités
GWTQuest ce que cest ?    Une boite à outil pour construire des             applications WEB             Codez en Java    ...
GWTQuest ce que cest ?Open source          Maintenu par Google et la communitéUtilisé par des milliers de personnes       ...
Grand Principes● Les freins aux applications performantes  ○ le nombre de requêtes  ○ le volume des requêtes● Approche GWT...
Principes / Objectifs● Les freins à la productivité   ○ les spécificités dimplémentations des différents     navigateurs  ...
Principes / ObjectifsIndustrialisation                      Java     Abstraction                               Performance...
Organisation Projet GWTla page Host./war/MyApp.html  ○ la page dentrée de lapplication GWT  ○ contient un script MyApp.noc...
Organisation ProjetPartie client/serveur./src/my.package.myapp.client  ○ Code de lUI graphique et de son comportement  ○ C...
Module GWT./src/my.package.myapp.MyApp.gwt.xml  ○   configuration des librairies GWT du projet  ○   configuration de linte...
Module GWT<?xml version="1.0" encoding="UTF-8"?><module rename-to=fr_dhu_gwt_slides>             ● <module> : déclaration ...
Compilateur GWT2 modes de fonctionnement● Production  ○ Code Java vers Code Javascript avec permutations  ○ JRE Emulation:...
Compilateur GWTpermutations    Lutilisateur final ne veut "payer" que ce quil                        consomme●   Améliorer...
Compilateur GWTpermutations● user.agent  ○ par défaut : "ie6, ie8, safari, gecko1_8, safari, opera"● locale  ○ par défaut ...
Rapatriement dune permutation                        myapp_safari_es.js  Code Java    Client              GWTC            ...
Compilateur GWTPermutations et deferred Binding Comment cela fonctionne-t-il concrètement ?               New Object()    ...
Compilateur GWTPermutations et deferred Binding    Exemple de limplementation dune Popup● lutilisateur effectue          P...
Compilateur GWT● Substitution dimplémentation● Génération automatique de code● Améliore la flexibilité du compilateur● Fac...
Construire son UI    en GWT
Layout et Positionnement● Organisation de laffichage de lUI● RootPanel   ○ RootPanel.get() : accès à lélément <body> de la...
Layout exempleTabLayoutPanel tabPanel = new TabLayoutPanel(2.5, Unit.EM);// Add a home tabHTML homeText = new HTML(constan...
Widgets● Tous ce que lon peut trouver en HTML  ○ button, radiobox, checkbox, listbox, textbox,    textarea...● Des élément...
Widgets exemples // Create a DateBoxDateTimeFormat dateFormat =                DateTimeFormat.getLongDateFormat();DateBox ...
Créer ces propres composants● En créant des Composite  ○ aggrégation de widgets et autres Composites● "from scratch"  ○ Dé...
Composite exemplepublic class MyFirstComposite extends Composite {     public MyFirstComposite(String label) {         // ...
Comment du code Java donne delHTMLComment le code Java        /** Class FlowPanel **/                            public Fl...
Interaction avec lutilisateur● Permettre à lutilisateur dinteragir avec  lapplication● Programmation principalement  Evène...
Interaction avec lutilisateurexemple// create the widget containerVerticalPanel fp = new VerticalPanel();......// add a bu...
Construction déclarative dinterfaceavec UIBinder● Partie statique de lUI :   ○ Déclaratif   ○ XML● Séparation des responsa...
UIBinder exemple               Notre Composite précédent devientpublic class MyComposite extends Composite {              ...
Mise en forme avec CSS● CSS : mise en forme du contenu HTML  ○ implémentation spécifique suivant les navigateurs  ○ peut r...
UI: CSS exemple "classique"// create the widget container            .MyComposite {VerticalPanel fp = new VerticalPanel();...
UI: CSS exemple GWT<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"      xmlns:g="urn:import:com.google.gwt.user.cli...
UI : CSS interaction Java                                                     <ui:UiBinderpublic class MyComposite extends...
Gestion des images● Souvent goulot détranglement des  échanges client/serveur● beaucoup doverhead pour peu de contenu● nor...
Gestion des images exemplepublic class MyComposite extends Composite {     ...     public interface MyImages extends Clien...
Internationalisation
Internationalisation● Gérer les langues est aujourdhui                Indispensable● Gérer nativement dans GWT  ○ basé sur...
Internationalisation exemple@DefaultLocale("fr")public interface MyCompositeMessages extends           //File MyCompositeM...
Internationalisation des images             Too simple !                   ajouter              logo-gwt_en.png           ...
CommunicationEvenènementielle
Gestion de lhistorique● Contexte : Une application GWT  ○ pas de génération de plusieurs pages HTML  ○ pas dhistorique de ...
Gestion de lhistoriquesur les application Javascript    https://www.google.fr/#hl=fr&q=test● partie de lURL qui ne part pa...
Gestion de lhistorique en GWT● Une API dédiée : Classe History● Notion dévènements    ○ History.newItem● Notion dHandler  ...
Bus dévènements● Une application  ○ un ensemble de widgets  ○ un ensemble dinteraction    ■ homme/UI    ■ UI/serveur    ■ ...
Bus dévènements exemple// declare an Handler for our eventpublic interface MyEventHandler  extends EventHandler {         ...
Bus dévènements exemple// One single Bus (Singleton pattern)// to fire event onto and triggering Handler sSimpleEventBus s...
CommunicationClient / Serveur
Communication Client/ServeurPrincipe dAsynchronisme● Permettre déchanger des données entre lUI  et le serveur● Deux possib...
Echange Client/Serveur:GWT-RPC● Framework de communication Asynchrone● Masque les complexités dimplémentation  des navigat...
GWT-RPC exemple● une interface Synchrone extends  RemoteService● une interface Asynchrone pour le côté client      ○ Nomen...
GWT-RPCexemple Côté Client● Instanciation du service      ○ 1 fois pour toute lapplication      ○ Utiliser un pattern Fact...
GWT-RPCexemple Côté Serveur● Implementation du service côté serveur     ○ extends RemoteServiceServlet     ○ implemente la...
Pour aller plus loin
Framework GWT depuis la v2.x● Gestion des Places et Activities  ○ controle de la navigation dans lapplication  ○ formalise...
Sécurité● La sécurité se prend en compte à partir du  développement● XSS:  ○ Attaque par injection de données dans lapplic...
framework Editor● Souvent fastidieux de faire du code "passe  plat"            myModel.setField1Value(myUI.getField1Value(...
Compatiblité HTML5● Noubliez pas Java -> Javascript donc  génération dHTML● Possibilité également décrire de lHTML en  GWT...
Optimisations● Amélioration par observation statique  ○ soycReport : Rapport de compilation  ○ permet didentifier les gros...
EcosystèmeQuelques projets qui pourront vous intérresser● m-gwt : portage pour tablette et mobile● sencha gxt : framework ...
BibliographieLa bible sur GWThttps://developers.google.com/web-toolkit/doc/latest/DevGuide
Upcoming SlideShare
Loading in...5
×

Gwt fast overview_v1

1,050

Published on

French presentation of GWT 2.4 with a fast overview of GWT capabilities

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,050
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Gwt fast overview_v1"

  1. 1. Google Web Toolkit David Herviou @herviou +david herviou david.herviou@gmail.com
  2. 2. Présentation● Généralités● Construire son UI en GWT● Internationalisation | i18n● Communication Evènementielle● Communication Client / Serveur● Pour aller plus loin● Bibliographie
  3. 3. Généralités
  4. 4. GWTQuest ce que cest ? Une boite à outil pour construire des applications WEB Codez en Java Obtenez une application Javascript Vise le développement industrialisé dapplications WEB performantes
  5. 5. GWTQuest ce que cest ?Open source Maintenu par Google et la communitéUtilisé par des milliers de personnes Ecosystème actif et riche
  6. 6. Grand Principes● Les freins aux applications performantes ○ le nombre de requêtes ○ le volume des requêtes● Approche GWT ○ Une application Javascript optimisée par Navigateur ○ Un bundle unique JS ○ Chacun son boulot : ■ Le Client soccupe du rendu ■ le Serveur des données Approche orientée "client lourd"
  7. 7. Principes / Objectifs● Les freins à la productivité ○ les spécificités dimplémentations des différents navigateurs ○ le debuggage du Javascript ○ la gestion des css spécifiques● Approche GWT : ○ "dont care about web browser" ○ Code Java : debuggage Java ○ Librairie de widgets disponibles
  8. 8. Principes / ObjectifsIndustrialisation Java Abstraction Performance Productivité internationalisation Modularité
  9. 9. Organisation Projet GWTla page Host./war/MyApp.html ○ la page dentrée de lapplication GWT ○ contient un script MyApp.nocache.js ○ charge en dynamique lapplication (code javascript) spécifique au navigateur Principe des permutations
  10. 10. Organisation ProjetPartie client/serveur./src/my.package.myapp.client ○ Code de lUI graphique et de son comportement ○ Code Java à transcrire en Javascript./src/my.package.myapp.server ○ Code de la partie serveur gestion des données et des échanges avec les clients ○ Code Java à compiler en Bytecode
  11. 11. Module GWT./src/my.package.myapp.MyApp.gwt.xml ○ configuration des librairies GWT du projet ○ configuration de linternationalisation ○ configuration des navigateurs cibles ○ configuration des points dentrées de lapplications ○ ... Cest lélément de base pour le compilateur GWT
  12. 12. Module GWT<?xml version="1.0" encoding="UTF-8"?><module rename-to=fr_dhu_gwt_slides> ● <module> : déclaration <!-- Inherit the core Web Toolkit stuff.--> <inherits name=com.google.gwt.user.User/> ● <inherits> : utilisation <!-- Inherit the default GWT style sheet.--> dautres modules <inherits name=com.google.gwt.user.theme.clean.Clean/> ● <entry-point> : classe <!-- Specify the app entry point class.--> Java-démarrage de <entry-point class=fr.dhu.gwt.slides.client. lapplicationSlides/> <!-- Specify the paths for translatable code--> ● <source> : code java à <source path=client/> transcrire <!-- manage english--> <extend-property name="locale" value="en"/> ● <extend-property> :</module> extension dune propriété existante
  13. 13. Compilateur GWT2 modes de fonctionnement● Production ○ Code Java vers Code Javascript avec permutations ○ JRE Emulation: Classes et méthodes translatables ou ayant une implementation Javascript ○ Pour les curieux: com.google.gwt.dev.Compiler● Développement ou DevMode ○ Accélérer la boucle coder/compiler/vérifier ○ Plugin GWT branché sur le navigateur● Se base sur le contenu du module GWT
  14. 14. Compilateur GWTpermutations Lutilisateur final ne veut "payer" que ce quil consomme● Améliorer le volume/nombre déléments ramener à lutilisateur● Tenir compte des spécificités des implémentations/bugs des navigateurs● Tenir compte de linternationalisation des applications● Offrir un mécanisme dextension des spécificités applicatives
  15. 15. Compilateur GWTpermutations● user.agent ○ par défaut : "ie6, ie8, safari, gecko1_8, safari, opera"● locale ○ par défaut : "default"● Nombres dapplications résultantes {user.agent}x{locale} = 6 permutations par défaut● Possibilité de définir ses axes de permutations {user.agent}x{locale}x{deferred-binding properties}
  16. 16. Rapatriement dune permutation myapp_safari_es.js Code Java Client GWTC myapp_opera_de.js WebApp JAVAC Code Java Serveur myapp_gecko_fr.js
  17. 17. Compilateur GWTPermutations et deferred Binding Comment cela fonctionne-t-il concrètement ? New Object() résolution statique MyObject.class.newInstance() résolution au runtime GWT.create(MyObject.class) résolution différée / classes clientes
  18. 18. Compilateur GWTPermutations et deferred Binding Exemple de limplementation dune Popup● lutilisateur effectue PopupPanel myPopup = new PopupPanel();● cette classe contient / wrap / ~pattern proxy PopupImpl p = GWT.create(PopupImpl.class)● et le compilateur GWT à la règle :<!-- Mozilla needs a different implementation due to issue #410 --><replace-with class="com.google.gwt.user.client.ui.impl.PopupImplMozilla"> <when-type-is class="com.google.gwt.user.client.ui.impl.PopupImpl"/> <when-property-is name="user.agent" value="gecko1_8"/></replace-with>
  19. 19. Compilateur GWT● Substitution dimplémentation● Génération automatique de code● Améliore la flexibilité du compilateur● Facilite le développement du code spécifique
  20. 20. Construire son UI en GWT
  21. 21. Layout et Positionnement● Organisation de laffichage de lUI● RootPanel ○ RootPanel.get() : accès à lélément <body> de larbre DOM ○ RootPanel.getId(String id) : accès à lélément id du DOM● FlowPanel, FormPanel, HTMLPanel, ScrollPanel, PopupPanel ○ Elements classique HTML● {Dock, Split, Stack, Tab}LayoutPanel ○ Element HTML complexe ○ Structure globale de lapplication ○ Structure déléments conséquents de lapplication
  22. 22. Layout exempleTabLayoutPanel tabPanel = new TabLayoutPanel(2.5, Unit.EM);// Add a home tabHTML homeText = new HTML(constants.cwTabPanelTab0());tabPanel.add(homeText, "Accueil");// Add a tab with an imageSimplePanel imageContainer = new SimplePanel();imageContainer.setWidget(new Image(Showcase.images.gwtLogo()));tabPanel.add(imageContainer, "Logo GWT");// Add a tabHTML moreInfo = new HTML(constants.cwTabPanelTab2());tabPanel.add(moreInfo, "Plus dinfo");// Return the contenttabPanel.selectTab(0);
  23. 23. Widgets● Tous ce que lon peut trouver en HTML ○ button, radiobox, checkbox, listbox, textbox, textarea...● Des éléments plus complexes ○ Datepicker ○ Tree ○ MenuBar ○ DisclosurePanel Les layouts et les widgets sont la base de laconstruction dune Application Web Riche GWT
  24. 24. Widgets exemples // Create a DateBoxDateTimeFormat dateFormat = DateTimeFormat.getLongDateFormat();DateBox dateBox = new DateBox();dateBox.setFormat(new DateBox.DefaultFormat(dateFormat));// Create the text area and toolbarRichTextArea area = new RichTextArea();area.ensureDebugId("cwRichText-area");area.setSize("100%", "14em");RichTextToolbar toolbar = new RichTextToolbar(area);toolbar.setWidth("100%");
  25. 25. Créer ces propres composants● En créant des Composite ○ aggrégation de widgets et autres Composites● "from scratch" ○ Définition dun nouveau Widget● En wrappant du javascript existant ○ Encapsulation en Java dun composant dune bibliothèque tierce ○ Pas doptimisation possible dans ce casLa méthode la plus courante est lutilisation des Composite
  26. 26. Composite exemplepublic class MyFirstComposite extends Composite { public MyFirstComposite(String label) { // create the widget container VerticalPanel fp = new VerticalPanel(); // add a checkbox for choice fp.add(new CheckBox(label)); // add a multiple choice box ListBox lb = new ListBox(); lb.addItem("item 1"); lb.addItem("item 2"); fp.add(lb); // initialize widget initWidget(fp); }} somewhere else... MyFirstComposite fc = new MyFirstComposite("Je prends loption");
  27. 27. Comment du code Java donne delHTMLComment le code Java /** Class FlowPanel **/ public FlowPanel() {donne un arbre DOM ? setElement(DOM.createDiv()); }● Rappel : /** Class DOM **/ ○ Java transcrit en public static Element createDiv() { return Document.get().createDivElement().cast(); Javascript }● Javascript /** Class Document **/ ○ manipule et interagit public final DivElement createDivElement() { return (DivElement) DOMImpl.impl.createElement avec les noeuds DOM (this, DivElement.TAG); }● Exemple avec le /** Class DivElement **/ FlowPanel static final String TAG = "div";
  28. 28. Interaction avec lutilisateur● Permettre à lutilisateur dinteragir avec lapplication● Programmation principalement Evènementielle● Notions principales à retenir : ○ Event : lobjet représentant lévènement déclenché ○ Handler: definition du comportement à déclencher sur évènement ○ HandlerRegistration : gère labonnement dun Handler à un Event
  29. 29. Interaction avec lutilisateurexemple// create the widget containerVerticalPanel fp = new VerticalPanel();......// add a buttonButton b = new Button("Send");fp.add(b);HandlerRegistration hr = b.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { Window.alert("OK"); }});// initialize widgetinitWidget(fp);
  30. 30. Construction déclarative dinterfaceavec UIBinder● Partie statique de lUI : ○ Déclaratif ○ XML● Séparation des responsabilités ○ UIBinder : UI statique ○ Java : UI dynamique et gestion des données● Meilleure structuration de linterface● Interaction XML / Java
  31. 31. UIBinder exemple Notre Composite précédent devientpublic class MyComposite extends Composite { <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt. private static MyCompositeUiBinder uiBinder = uibinder" GWT.create(MyCompositeUiBinder.class); xmlns:g="urn:import:com.google.gwt.user.client.ui"> interface MyCompositeUiBinder <g:VerticalPanel> extends UiBinder<Widget, MyComposite> {} <g:CheckBox text="Je prends loption"/> <g:ListBox> @UiField Button b; <g:item>Item 1</g:item> <g:item>Item 2</g:item> public MyComposite() { </g:ListBox> initWidget(uiBinder.createAndBindUi(this)); <g:Button text="Send" ui:field="b"/> } </g:VerticalPanel> @UiHandler({"b"}) </ui:UiBinder> public void onSend(ClickEvent event) { Window.alert("OK"); }}
  32. 32. Mise en forme avec CSS● CSS : mise en forme du contenu HTML ○ implémentation spécifique suivant les navigateurs ○ peut représenter une part conséquente et complexe de la partie UI dune application● Approche classique : ○ 1 gros fichier CSS ○ peut modulaire ○ simple à mettre en oeuvre● Approche GWT : ○ compatible avec lapproche classique MAIS ○ propose une approche modulaire ○ possibilité de manipuler le CSS depuis le code Java ○ Lidéal est déviter le CSS spécifique !
  33. 33. UI: CSS exemple "classique"// create the widget container .MyComposite {VerticalPanel fp = new VerticalPanel(); border-style : solid;fp.setStylePrimaryName("MyComposite"); border-width : thin;... override : hidden; padding : 0.5em;// add a multiple choice box min-width : 200px;ListBox lb = new ListBox(); }...fp.add(lb); .MyComposite-List {lb.addStyleName("MyComposite-List"); margin-bottom : 1em; margin-top : 1em;// add a button }Button b = new Button("Send");fp.add(b); .MyComposite-Button {b.addStyleName("MyComposite-Button"); float : right; }// initialize widgetinitWidget(fp);
  34. 34. UI: CSS exemple GWT<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <ui:style field="style" > .MyComposite { border-style : solid; border-width : thin; override : hidden; padding : 0.5em; min-width : 200px; } .MyComposite-List { margin-bottom : 1em; margin-top : 1em; } .MyComposite-Button { float : right; } </ui:style> <g:VerticalPanel stylePrimaryName="{style.MyComposite}"> <g:CheckBox text="Je prends loption" /> <g:ListBox styleName="{style.MyComposite-List}"> <g:item>Item 1</g:item> <g:item>Item 2</g:item> </g:ListBox> <g:Button text="Send" ui:field="b" styleName="{style.MyComposite-Button}"/> </g:VerticalPanel></ui:UiBinder>
  35. 35. UI : CSS interaction Java <ui:UiBinderpublic class MyComposite extends Composite { xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> .... <ui:style field="myStyle" public interface Css extends CssResource { type="fr.dhu.gwt.client.MyComposite.Css"> String dynamic(); .MyComposite { } ... } @UiField Css myStyle; .dynamic { border-color: red } @UiField VerticalPanel rootPanel; </ui:style> @UiField Button b; <g:VerticalPanel ... stylePrimaryName="{myStyle.MyComposite}" ui:field="rootPanel"> @UiHandler({"b"}) ... public void onSend(ClickEvent event) { </g:VerticalPanel> Window.alert("OK"); </ui:UiBinder> rootPanel.addStyleName(myStyle.dynamic()); }}
  36. 36. Gestion des images● Souvent goulot détranglement des échanges client/serveur● beaucoup doverhead pour peu de contenu● norme HTTP 1.1 : deux requêtes simultanées vers le même domain/port !● Approche GWT ○ packager les images avec lapplication ○ images encodées en base64 ○ gestion native de linternationalisation
  37. 37. Gestion des images exemplepublic class MyComposite extends Composite { ... public interface MyImages extends ClientBundle { @Source("gwt-logo.png") ImageResource logoGWT(); }<ui:with type="fr.dhu.gwt.client.MyComposite.MyImages" field="images"></ui:with><ui:style field="myStyle" type="fr.dhu.gwt.client.MyComposite.Css"> ... .MyComposite-Image { float : left; }</ui:style><g:VerticalPanel ... > ... <g:FlowPanel> <g:Image resource="{images.logoGWT}" styleName="{myStyle.MyComposite-Image}"/> <g:Button ... ui:field="b" styleName="{myStyle.MyComposite-Button}"/> </g:FlowPanel></g:VerticalPanel>
  38. 38. Internationalisation
  39. 39. Internationalisation● Gérer les langues est aujourdhui Indispensable● Gérer nativement dans GWT ○ basé sur la valeur locale du navigateur ○ intégré au mécanisme des permutations● Comment ? ○ Déclarer une interface XXXMessages qui étend Messages ○ Déclarer autant de XXXMessages_lg.properties que de langage gérer ○ Déclarer au compilateur GWT la gestion de ses nouvelles locale
  40. 40. Internationalisation exemple@DefaultLocale("fr")public interface MyCompositeMessages extends //File MyCompositeMessages_en.propertiesMessages { send=Send selectOption=I select the option @DefaultMessage("Envoi") String send(); @DefaultMessage("Je prends loption") String selectOption();}<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <ui:with type="fr.dhu.gwt.client.MyCompositeMessages" field="messages"/> <ui:style .../> <g:VerticalPanel ... > <g:CheckBox text="{messages.selectOption}" /> <g:ListBox ...> <g:Button text="{messages.send}" .../> </g:VerticalPanel></ui:UiBinder> //Module GWT <extend-property name="locale" values="fr,en"/>
  41. 41. Internationalisation des images Too simple ! ajouter logo-gwt_en.png au même endroit que logo-gwt.png
  42. 42. CommunicationEvenènementielle
  43. 43. Gestion de lhistorique● Contexte : Une application GWT ○ pas de génération de plusieurs pages HTML ○ pas dhistorique de navigation à priori● Comment obtenir : ○ différents points dentrées dans lapplication ■ Application "Bookmarkable" ○ obtenir une simulation de navigation aller/retour ■ Simuler une application à plusieurs pages HTML
  44. 44. Gestion de lhistoriquesur les application Javascript https://www.google.fr/#hl=fr&q=test● partie de lURL qui ne part pas jusquau serveur● Interprétable par la partie cliente● Sa modification inclu lempilement dans lhistorique du navigateur : https://www.google.fr/#hl=fr&q=test https://www.google.fr/#hl=fr&q=test1
  45. 45. Gestion de lhistorique en GWT● Une API dédiée : Classe History● Notion dévènements ○ History.newItem● Notion dHandler History.addValueChangeHandler(ValueChangeHandler<String> handler)myValueChangeHandler = new ValueChangeHandler<String>() { @Override public void onValueChange(ValueChangeEvent<String> event) { // get URL fragment String token = event.getValue(); // do what you want with the token ... }}
  46. 46. Bus dévènements● Une application ○ un ensemble de widgets ○ un ensemble dinteraction ■ homme/UI ■ UI/serveur ■ UI/UI● Interaction UI/UI : Bus logiciel dévènement dispatcher un évènement depuis un widget vers un ensemble de cibles non connues● Intérêts ○ Mettre à jour lUI en réaction à un changement ○ Couplage lâche entre composant
  47. 47. Bus dévènements exemple// declare an Handler for our eventpublic interface MyEventHandler extends EventHandler { ● Déclarer un Handler void onEvent(MyEvent event); ○ Contrat dinterface} pour les// declare an Event for EventBus communicationpublic class MyEvent consommateurs extends GwtEvent<MyEventHandler> { ● Déclarer un Event /** TYPE of this event */ ○ Donnée déchange public static final Type<MyEventHandler> TYPE = new Type<MyEventHandler>(); entre le producteur et @Override les consommateurs public Type<MyEventHandler> getAssociatedType() { ○ Un Event = Un TYPE return TYPE; } @Override protected void dispatch(MyEventHandler handler) { handler.onEvent(this); }}
  48. 48. Bus dévènements exemple// One single Bus (Singleton pattern)// to fire event onto and triggering Handler sSimpleEventBus singleBus = new SimpleEventBus();// One widget is registering on application EventBus ● Déclarer un Bus uniqueHandlerRegistration hr = singleBus.addHandler( pour lapplicatoin MyEvent.TYPE, new MyEventHandler() { ● Les widgets sabonnent @Override au TYPE dévènements public void onEvent(MyEvent event) { // do what you want with event souhaité }}); ● Les widgets producteurs// Another one is triggering event émettent les évènementssingleBus.fireEvent(new MyEvent()); ● Les évènements sont propagés par le bus jusquaux abonnés
  49. 49. CommunicationClient / Serveur
  50. 50. Communication Client/ServeurPrincipe dAsynchronisme● Permettre déchanger des données entre lUI et le serveur● Deux possibilités : ○ Synchrone : fonctionnement sur les applications non Javascript ○ Asynchrone : peut être un fonctionnement sur les applications Javascript● Asynchronisme ○ Avoir une application réactive ○ Peut être complexe à mettre en oeuvre : multiples navigateurs - multiples implémentation de XHR
  51. 51. Echange Client/Serveur:GWT-RPC● Framework de communication Asynchrone● Masque les complexités dimplémentation des navigateurs● Permet léchange de données complexes● Facile à mettre en oeuvre
  52. 52. GWT-RPC exemple● une interface Synchrone extends RemoteService● une interface Asynchrone pour le côté client ○ Nomenclature : SynchronousInterfaceAsync// declare synchronous version of service@RemoteServiceRelativePath("greet")public interface GreetingService extends RemoteService { String greetServer(String name) throws IllegalArgumentException;}// declare asynchronous version of servicepublic interface GreetingServiceAsync { void greetServer(String input, AsyncCallback<String> callback) throws llegalArgumentException;}
  53. 53. GWT-RPCexemple Côté Client● Instanciation du service ○ 1 fois pour toute lapplication ○ Utiliser un pattern FactoryGreetingServiceAsync service = GWT.create(GreetingService.class);● Utilisation du serviceservice.greetServer("David", new AsyncCallback<String>() { @Override public void onSuccess(String result) { Window.alert(result); } @Override public void onFailure(Throwable caught) { Window.alert("error while calling Greeting Service"); }});
  54. 54. GWT-RPCexemple Côté Serveur● Implementation du service côté serveur ○ extends RemoteServiceServlet ○ implemente la version synchrone du service// Service Implementation server sidepublic class GreetingServiceImpl extends RemoteServiceServlet implements GreetingService { public String greetServer(String input) throws IllegalArgumentException { return "hello "+input; }}● Modification du descripteur de déploiement<servlet> <servlet-name>greetServlet</servlet-name> <servlet-class>fr.dhu.gwt.server.GreetingServiceImpl</servlet-class></servlet><servlet-mapping> <servlet-name>greetServlet</servlet-name> <url-pattern>/dhu/greet</url-pattern></servlet-mapping>
  55. 55. Pour aller plus loin
  56. 56. Framework GWT depuis la v2.x● Gestion des Places et Activities ○ controle de la navigation dans lapplication ○ formalise lutilisation du fragment dURL● Gestion du Pattern MVP ○ Model/Vue/Controller ○ Améliore les tests de lapplication cliente● Gestion des applications orientées données ○ Ramener les actions sur les bases de données côté navigateur ○ RequestFactory
  57. 57. Sécurité● La sécurité se prend en compte à partir du développement● XSS: ○ Attaque par injection de données dans lapplication ○ SafeHTML ○ escaping des données pouvant être injectées● XSRF: ○ Attaque depuis un site tiers vers le site cible utilisant votre précédente authentification sur le site cible ○ GWT-RPC avec Token ■ génération unique dId pour une appel RPC ■ deux appels séquentiels pour forger une requête
  58. 58. framework Editor● Souvent fastidieux de faire du code "passe plat" myModel.setField1Value(myUI.getField1Value()); myModel.setField2Value(myUI.getField2Value()); ... myModel.setField3Value(myUI.getField3Value()); ou faire linverse !● Framework GWT Editor ○ Automatise le mapping modèle de donnée vers UI et vice versa ○ Basé sur des conventions de nommages des champs
  59. 59. Compatiblité HTML5● Noubliez pas Java -> Javascript donc génération dHTML● Possibilité également décrire de lHTML en GWT ○ avec des méthodes type setInnerHTML ○ avec lHTMLPanel ○ Attention à la compatibilité multi-navigateur● Des éléments HTML5 sont déjà gérés en GWT ○ ClientSideStorage ○ Audio, Video ○ Canvas
  60. 60. Optimisations● Amélioration par observation statique ○ soycReport : Rapport de compilation ○ permet didentifier les gros volumes de code ○ permet didentifier éventuellement les points de modularisation● Amélioration par observation dynamique ○ Lancer lapplication et utiliser SpeedTracer ou Firebug● Modulariser lapplication ○ Casser le monolythe applicatif ○ Télécharger des bouts de code Javascript à la demande
  61. 61. EcosystèmeQuelques projets qui pourront vous intérresser● m-gwt : portage pour tablette et mobile● sencha gxt : framework et librairie de composant GWT● gwt-platform : framework autour de GWT● vaadin : framework autour de GWT● playN : cross-platform pour jeux basé sur GWT● Gin : framework dinjections de dépendance● ... et pleins dautres encore
  62. 62. BibliographieLa bible sur GWThttps://developers.google.com/web-toolkit/doc/latest/DevGuide
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×