Making a simple overlay class?

Question

Hi,

I'd like to make some really simple overlay classes in GWT to wrap some SVG stuff. I'd basically like to get a rectangle drawn, this is how I do it in 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);

and now I'm having trouble translating that to GWT. I was hoping I could do a really thin overlay around all those calls, something like this:

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);
    }
}

yeah but I do not have a grasp on how we can jump from the javascript representation of the SVG stuff to GWT java classes. For one, the SVGPanel class extends JavaScriptObject, but I can't simply add it to the Document body class because it's expecting an Element type. If someone could just point out the right way to do that bridge I should be able to get going after that.

Also, I'm not sure if this the optimal way to incorporate some simple SVG classes, should I be modeling them using the DOM classes instead of trying to use JSNI ?

Thanks

Answer 1

I think it's worth checking out gwt-svg - while it looks like they stopped development around 2007, the codebase seems solid enough, nicely illustrating what you want to do, plus it has some nice touches, like special implementations for the (evil) IE6. Even if the code doesn't work they way it is, hopefully it will give you an idea were to start (and maybe you'd even release your work open-source, so that others can benefit from it).

And there's also GWTCanvas - which might be what you are trying to implement :) If not, it's worth checking out at least their API, to see how they handled things.

Good luck!

Answer 2

You need to give an Element to appendChild. So just make your overlay class extend Element instead of JavaScriptObject.

public class SVGPanel extends Element {

Note that Element is a subclass of JavaScriptObject.