Utilisation de SVG dans GWT

Je n'ai pas entièrement compris pourquoi, mais la createElementNS méthode JavaScript permet de créer et formater correctement xhtml dans le html.

Car il n'y a pas d'équivalent dans l'explorateur, GWT ne pas mettre en œuvre createElementNS, mais vous pouvez le faire avec un rapide méthode native :

private static native Element createElementNS(final String ns, 
        final String name)/*-{
    return document.createElementNS(ns, name);
}-*/;

Il est logique de mettre cela en un SVGPanel classe.

import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.ComplexPanel;

public class SVGPanel extends ComplexPanel{

    private static final String SVG_NAMESPACE = "http://www.w3.org/2000/svg";

    public SVGPanel() {
        setElement(createElementNS(SVG_NAMESPACE, "svg"));
        showcaseSVG(); //Demonstrate that SVG works! Inexplicably!
    }

    private void showcaseSVG(){
        Element svgElement = createElementNS(SVG_NAMESPACE, "circle");
        svgElement.setAttribute("cx", "50");
        svgElement.setAttribute("cy", "50");
        svgElement.setAttribute("r", "30");
        getElement().appendChild(svgElement);
    }
}

Cela devrait produire une simple SVG lorsqu'il est ajouté à votre programme. Félicitations! Vous êtes maintenant en le collant à l'xhtml homme.

Nous venons de open-source une GWT widget qui vous permet d'intégrer GWT avec Raphael:
http://code.google.com/p/raphaelgwt/

Ce gadget a été initialement créé pour Hydro4GE et a été mentionné dans un article sur le site officiel de GWT Blog.

Après avoir joué un peu, j'ai connu le plus de succès avec l'aide de Raphaël (qui gère la compatibilité inter-navigateur) bien que je soupçonne tout le long de ces lignes serait très bien fonctionner. Fondamentalement, je ne le suit dans JavaScript:

var r = Raphael("someID", WND_WIDTH, WND_HEIGHT);
//additional configuration and setup if needed....

Alors je voudrais effectuer les opérations suivantes dans GWT:

public native JavaScriptObject getRaphael() /*-{
  return $wnd.r;
}-*/;

//I now have access to the JavaScript object and could do the following:

public native void drawCircle(JavaScriptObject obj, int x, int y, int r) /*-{
  obj.circle(x, y, r);
}-*/;

J'ai aussi été autour de la lecture et il semble que le portage de Raphaël dans GWT (ce l'article est une bonne lecture) ne sera pas seulement augmenter les performances (comme par certains post que j'ai lu sur Google Groupes, mais ne peuvent pas trouver à l'instant -, ils ont mentionné le compilateur ne fait un peu de travail), mais également de faciliter le codage & débogage.

J'ai donc atteint mon objectif d'être en mesure de manipuler le SVG directement (un peu jusqu'à ce que j'port Raphaël en Java ou, au moins, créer des wrappers). Je n'ai pas encore de se pencher sérieusement sur le Google Visualisation de l'API, mais je soupçonne qu'il pourrait tout aussi bien mais je ne suis pas sûr si elle est suffisamment robuste pour mes besoins.

Une chose importante je crois que j'ai été absent comme indiqué sur Raphaël, le site a été le suivant:

Cela signifie que chaque objet graphique vous
créer c'est aussi un objet DOM, de sorte que vous
pouvez joindre JavaScript, des gestionnaires d'événements
ou de les modifier plus tard.

Être averti que le SVG ne fonctionnera pas en courant GWT Shell (mode Hébergé) jusqu'à 1,6 inclusive, parce que:

1) sur windows, il utilise IE composante

2) sur Linux, il utilise Firefox 1.0 ou égale mozilla moment de l'exécution, qui n'a pas de support pour le format SVG.

Code compilé fonctionne bien dans les non-IE navigateurs.

En outre, il fonctionne indépendamment de HTML/XHTML dans les navigateurs, parce que dans GWT vous utilisez createElementNS (vous pouvez le code de la méthode que vous utilisez JSNI). Aussi, votre balise SVG peut-être besoin de la largeur/hauteur des attributs (voir SVG spec).