Creating a simple overlay class?

Question

I would like to make some really simple overlay classes in GWT to wrap some SVG stuff. I would like to get a rectangle, here 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 it’s hard for me to translate this to GWT. I was hoping I could make a very subtle overlay around all these 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); } } 

yes, but I don’t understand how we can move from the javascript representation of SVG material to the GWT Java classes. First, the SVGPanel class extends JavaScriptObject, but I can't just add it to the Document body class because it expects the element type. If someone could just point out the right way to make this bridge, I would have to leave after that.

Also, I'm not sure if this is the best way to include some simple SVG classes, should I mimic them using DOM classes instead of trying to use JSNI?

thanks

Answer 1

You need to provide the appendChild element. So just make your overlay class an extended Element instead of a JavaScriptObject.

 public class SVGPanel extends Element { 

Note that Element is a subclass of JavaScriptObject.

Answer 2

I think it's worth checking out gwt-svg - while it looks like they stopped development around 2007, the code base seems solid enough, beautifully illustrating what you want to do, plus it has some nice touches as special implementations for ( evil) IE6. Even if the code doesn't work, the way it is, I hope it gives you an idea of ​​how to get started (and maybe you even released your open source work so that others can benefit from it).

And there is also GWTCanvas - this may be what you are trying to implement :) If not, it’s worth checking at least their APIs to see how they work.

Good luck