Exemple d'utilisation de la génération GWT

1,720 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,720
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Exemple d'utilisation de la génération GWT

  1. 1. Génération de code GWT Exemple avec un graphe 2D intéractif
  2. 2. On commence par ...
  3. 3. Démo !
  4. 4. Fonctionnement <ul><li>Graphe configurable (dimensions, couleurs, marges...) </li></ul><ul><li>3 couches : </li></ul><ul><ul><ul><li>     axes et légendes </li></ul></ul></ul><ul><ul><ul><li>     courbes </li></ul></ul></ul><ul><ul><ul><li>     widgets (points des courbes au survol) </li></ul></ul></ul><ul><li>couches 1 et 3 &quot;statiques&quot; : les images ne dépendent que de la configuration du graphe </li></ul>
  5. 5. Fonctionnement <ul><ul><li>Java2D côté serveur </li></ul></ul><ul><ul><li>images encodées en PNG (avec alpha) </li></ul></ul><ul><ul><li>url de type data:image/png:base64;.... pour envoyer les images avec les données financières dans un même appel RPC (stateless) </li></ul></ul>
  6. 6. Fonctionnement <ul><li>Certains paramètres sont utilisés dans l'IHM : </li></ul><ul><ul><li>  dimensions du graphe </li></ul></ul><ul><ul><li>  couleurs des courbes pour la légende </li></ul></ul>
  7. 7. Qu'est-ce qui cloche ? <ul><ul><li>maintenance     </li></ul></ul><ul><ul><ul><li>ne pas avoir à dessiner les images statiques à la main avec The Gimp </li></ul></ul></ul><ul><ul><ul><li>ne pas maintenir des valeurs magiques dans le code </li></ul></ul></ul><ul><ul><li>performance </li></ul></ul><ul><ul><ul><li>mettre en cache les images des couches 1 et 3 </li></ul></ul></ul>
  8. 8. Rationale <ul><li>Fichier de configuration unique </li></ul><ul><li>Brique de dessin pour toutes les couches, utilisant la configuration </li></ul><ul><li>Interface java  pour l'utilisation runtime côté client </li></ul><ul><li>Code client et serveur pour lire la configuration pour les besoins runtime. </li></ul><ul><li>Génération des images à la compilation avec  GWT Rebind . </li></ul>
  9. 9. API <ul><li>import  com.google.gwt.resources.client.ImageResource; </li></ul><ul><li>interface Dessin { </li></ul><ul><li>   // toutes les valeurs du fichier, telles quelles </li></ul><ul><li>   Map<String, String> getProperties(); </li></ul><ul><li>   // inlined properties </li></ul><ul><li>   int getWidth();    int getHeight(); </li></ul><ul><li>   // images : URL + (height,width) </li></ul><ul><li>   ImageResource getLayout(); </li></ul><ul><li>   ImageResource getBlueDot(); </li></ul><ul><li>   ImageResource getGreenDot(); </li></ul><ul><li>} </li></ul>
  10. 10. Utilisation code client GWT <ul><li>Dessin dessin = GWT.create(Dessin.class); </li></ul><ul><li>// cache navigateur </li></ul><ul><li>Image layoutWidget = new Image(dessin.getLayout()); </li></ul><ul><li>// Les dimensions permettent d'ajuster la position des images </li></ul><ul><li>ImageResource blueDot = dessin.getBlueDot(); </li></ul><ul><li>int dotHeight = blueDot.getHeight(); </li></ul><ul><li>int dotWidth = blueDot.getWidth(); </li></ul>
  11. 11. Compilation
  12. 12. Runtime
  13. 13. Implémentation du générateur <ul><li>Cf. introduction faite par @patoudss  :  http://bit.ly/iNBM7k </li></ul><ul><li>2 rôles : </li></ul><ul><ul><li>charger le fichier dessin.properties et inliner les paires clef/valeur </li></ul></ul><ul><ul><li>appeler la brique de dessin et sauvegarder les images au format PNG dans des fichiers dont le nom est :   MD5(byte[]) + &quot;.cache.png&quot; </li></ul></ul>
  14. 14. Implémentation du générateur <ul><li>import  com.google.gwt.core.ext.Generator; </li></ul><ul><li>class DessinGenerateur implements Generator { </li></ul><ul><li>   @Override </li></ul><ul><li>   String generate(TreeLogger l, GeneratorContext ctx, String) { </li></ul><ul><li>     // Permet l'écriture du code Java </li></ul><ul><li>     SourceWriter writer =  new    ClassSourceFileComposerFactory( &quot;com.example.rebind&quot; , </li></ul><ul><li>       &quot;Dessin_Generated&quot; ).createSourceWriter( </li></ul><ul><li>       context, printWriter); </li></ul><ul><li>     generateImages(l, ctx); </li></ul><ul><li>     generateJava(writer); </li></ul><ul><li>   } </li></ul><ul><li>} </li></ul>
  15. 15. Implémentation du générateur <ul><li>import  com.google.gwt.dev.util.Util; </li></ul><ul><li>class DessinGenerateur implements Generator { </li></ul><ul><li>   String saveImage(TreeLogger l, GeneratorContext c,  </li></ul><ul><li>         BufferedImage img) { </li></ul><ul><li>     ByteArrayOutputStream bos = new </li></ul><ul><li>         ByteArrayOutputStream(); </li></ul><ul><li>     ImageIO.write(img, &quot;png&quot;, bos); </li></ul><ul><li>     String name = Util.computeStrongName(bos.toByteArray()) </li></ul><ul><li>         + &quot;.cache.&quot; + &quot;png&quot;; </li></ul><ul><li>     writeFile(l, c, name, bos.toByteArray()); </li></ul><ul><li>     return name; </li></ul><ul><li>   } </li></ul><ul><li>} </li></ul>
  16. 16. Implémentation du générateur <ul><li>class DessinGenerateur implements Generator { </li></ul><ul><li>   void  writeFile(TreeLogger l, GeneratorContext c,  </li></ul><ul><li>         String name, byte[] bytes) { </li></ul><ul><li>     OutputStream out = c.tryCreateResource(l, name); </li></ul><ul><li>     if (os != null ) // si null, existe déjà </li></ul><ul><li>     try { </li></ul><ul><li>       os.write(bytes); </li></ul><ul><li>       context.commitResource(logger, os); </li></ul><ul><li>     } catch (IOException e) { </li></ul><ul><li>       l.log(TreeLogger.ERROR, &quot;Failed while writing&quot;, e); </li></ul><ul><li>       throw new UnableToCompleteException(); </li></ul><ul><li>     } </li></ul><ul><li>   } </li></ul><ul><li>} </li></ul>
  17. 17. Implémentation du générateur <ul><li>class DessinGenerateur implements Generator { </li></ul><ul><li>   BufferedImage layout, blueDot; </li></ul><ul><li>   String layoutName, blueDotName; </li></ul><ul><li>   void  generateImages(TreeLogger tl, GeneratorContext ctx) { </li></ul><ul><li>     // Initialise en lisant le fichier .properties </li></ul><ul><li>     BriqueDessin drawer =  new  BriqueDessin(); </li></ul><ul><li>     // Les images seront utilisées pour écrire le source Java </li></ul><ul><li>     this .layout = drawer.drawLayout(); </li></ul><ul><li>     this .blueDot = drawer.drawBlueDot(); </li></ul><ul><li>     this .layoutName = saveImage(tl, ctx, layout); </li></ul><ul><li>     this .blueDotName = saveImage(tl, ctx, blueDot); </li></ul><ul><li>   } </li></ul><ul><li>} </li></ul>
  18. 18. Exemple de code généré <ul><li>class Dessin_Generated implements Dessin { </li></ul><ul><li>   Map<String, String> getProperties() { </li></ul><ul><li>     Map<String, String> map = new HashMap<>(); </li></ul><ul><li>     map.put(&quot;width&quot;, &quot;400&quot;); // etc... </li></ul><ul><li>     return map; </li></ul><ul><li>   } </li></ul><ul><li>   int getWidth() { return 400; } </li></ul><ul><li>   ImageResource getLayout() { </li></ul><ul><li>     return new MyImageResource( </li></ul><ul><li>       &quot;DF8D...588B.cache.png&quot;, 400, 300); </li></ul><ul><li>   } </li></ul><ul><li>} </li></ul>
  19. 19. Questions ?

×