Génération de code GWT

Exemple avec un graphe 2D intéractif

On commence par ...

Démo !

Fonctionnement

Graphe configurable (dimensions, couleurs, marges...)

3 couches :1.    axes et légendes•     courbes•     widgets (points des courbes au survol)

couches 1 et 3 "statiques" : les images ne dépendent que de la configuration du graphe

Fonctionnement

• Java2D côté serveur

• images encodées en PNG (avec alpha)

• url de type data:image/png:base64;.... pour envoyer les images avec les données financières dans un même appel RPC (stateless)

Fonctionnement

Certains paramètres sont utilisés dans l'IHM :•  dimensions du graphe•  couleurs des courbes pour la légende

Qu'est-ce qui cloche ?

• maintenance    o ne pas avoir à dessiner les images statiques à la main

avec The Gimpo ne pas maintenir des valeurs magiques dans le code

• performanceo mettre en cache les images des couches 1 et 3

Rationale

Fichier de configuration unique

Brique de dessin pour toutes les couches, utilisant la configuration

Interface java pour l'utilisation runtime côté clientCode client et serveur pour lire la configuration pour les besoins runtime.

Génération des images à la compilation avec GWT Rebind.

APIimport com.google.gwt.resources.client.ImageResource;

interface Dessin {   // toutes les valeurs du fichier, telles quelles   Map<String, String> getProperties();

   // inlined properties   int getWidth();   int getHeight();

   // images : URL + (height,width)   ImageResource getLayout();   ImageResource getBlueDot();   ImageResource getGreenDot();}

Utilisation code client GWT

Dessin dessin = GWT.create(Dessin.class);

// cache navigateurImage layoutWidget = new Image(dessin.getLayout());

// Les dimensions permettent d'ajuster la position des imagesImageResource blueDot = dessin.getBlueDot();int dotHeight = blueDot.getHeight();int dotWidth = blueDot.getWidth();

Compilation

Runtime

Implémentation du générateur

Cf. introduction faite par @patoudss : http://bit.ly/iNBM7k

2 rôles :• charger le fichier dessin.properties et inliner les paires

clef/valeur

• appeler la brique de dessin et sauvegarder les images au format PNG dans des fichiers dont le nom est :  MD5(byte[]) + ".cache.png"

Implémentation du générateur

import com.google.gwt.core.ext.Generator;

class DessinGenerateur implements Generator {  @Override  String generate(TreeLogger l, GeneratorContext ctx, String) {    // Permet l'écriture du code Java    SourceWriter writer = new    ClassSourceFileComposerFactory("com.example.rebind",      "Dessin_Generated").createSourceWriter(      context, printWriter);    generateImages(l, ctx);    generateJava(writer);  }}

Implémentation du générateurimport com.google.gwt.dev.util.Util;

class DessinGenerateur implements Generator {

  String saveImage(TreeLogger l, GeneratorContext c,         BufferedImage img) {    ByteArrayOutputStream bos = new        ByteArrayOutputStream();    ImageIO.write(img, "png", bos);    String name = Util.computeStrongName(bos.toByteArray())        + ".cache." + "png";    writeFile(l, c, name, bos.toByteArray());    return name;  }}

Implémentation du générateurclass DessinGenerateur implements Generator {

  void writeFile(TreeLogger l, GeneratorContext c,         String name, byte[] bytes) {    OutputStream out = c.tryCreateResource(l, name);    if (os != null) // si null, existe déjà    try {      os.write(bytes);      context.commitResource(logger, os);    } catch (IOException e) {      l.log(TreeLogger.ERROR, "Failed while writing", e);      throw new UnableToCompleteException();    }  }}

Implémentation du générateur

class DessinGenerateur implements Generator {  BufferedImage layout, blueDot;  String layoutName, blueDotName;

  void generateImages(TreeLogger tl, GeneratorContext ctx) {    // Initialise en lisant le fichier .properties    BriqueDessin drawer = new BriqueDessin();    // Les images seront utilisées pour écrire le source Java    this.layout = drawer.drawLayout();    this.blueDot = drawer.drawBlueDot();    this.layoutName = saveImage(tl, ctx, layout);    this.blueDotName = saveImage(tl, ctx, blueDot);  }}

Exemple de code généréclass Dessin_Generated implements Dessin {

  Map<String, String> getProperties() {    Map<String, String> map = new HashMap<>();    map.put("width", "400"); // etc...    return map;  }

  int getWidth() { return 400; }

  ImageResource getLayout() {    return new MyImageResource(      "DF8D...588B.cache.png", 400, 300);  }}

Questions ?