¿Hacer una clase superpuesta simple?

Question

Me gustaría crear algunas clases de superposición realmente simples en GWT para envolver algunas cosas SVG.Básicamente me gustaría dibujar un rectángulo, así es como lo hago en javascript:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
document.body.appendChild(svg);

var rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
rect.setAttribute("width","300");
rect.setAttribute("height","100");
svg.appendChild(rect);

y ahora tengo problemas para traducirlo a GWT.Esperaba poder hacer una superposición muy fina alrededor de todas esas llamadas, algo como esto:

public class SVGPanel extends JavaScriptObject {
    protected SVGPanel() {}

    public static native SVGPanel create(String width, String height) /*-{
        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', width);
        svg.setAttribute('height', height);
        return svg;
    }-*/;
}

public MyProject implements EntryPoint {

    public void onModuleLoad() { 
        SVGPanel panel = SVGPanel.create("100%", "100%");
        Document.get().getBody().appendChild(panel);
    }
}

Sí, pero no entiendo cómo podemos saltar de la representación javascript del material SVG a las clases java GWT.Por un lado, la clase SVGPanel extiende JavaScriptObject, pero no puedo simplemente agregarlo a la clase de cuerpo del Documento porque espera un tipo de Elemento.Si alguien pudiera indicarme la forma correcta de hacer ese puente, debería poder continuar después de eso.

Además, no estoy seguro de si esta es la forma óptima de incorporar algunas clases SVG simples. ¿Debería modelarlas usando las clases DOM en lugar de intentar usar JSNI?

Gracias

Answer 1

Se necesita dar un elemento para appendChild. Así que acaba de hacer su clase de superposición se extiende elemento en lugar de JavaScriptObject.

public class SVGPanel extends Element {

Tenga en cuenta que es un elemento subclase de JavaScriptObject.

Answer 2

Creo que vale la pena echarle un vistazo gwt-svg - si bien parece que detuvieron el desarrollo alrededor de 2007, el código base parece lo suficientemente sólido, ilustra muy bien lo que quieres hacer, además tiene algunos toques agradables, como implementaciones especiales para el (malvado) IE6.Incluso si el código no funciona como está, con suerte le dará una idea de dónde comenzar (y tal vez incluso publique su trabajo en código abierto, para que otros puedan beneficiarse de él).

Y también hay GWTCanvas - que podría ser lo que estás intentando implementar :) Si no, vale la pena comprobar al menos su API para ver cómo manejaron las cosas.

¡Buena suerte!