Using SVG in GWT

Question

I was wondering if it is possible to include SVG content inside a panel (or whatever would work in GWT), be able to add more to the SVG (like add a circle or a curve) programmat

Answer 1

After playing around a bit, I've been most successful with using Raphaël (which handles cross-browser compatibility) though I suspect anything along those lines would work just fine. Basically I do the following in JavaScript:

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

Then I would do the following in 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);
}-*/;

I've also been reading around and it seems that porting Raphaël into GWT (this article is a good read) will not only increase performance (as per some post I read on Google Groups but can't find at the moment - they mentioned the compiler does quite a bit of work) but also facilitate coding & debugging.

So I accomplished my goal of being able to manipulate the SVG directly (somewhat until I port Raphaël into Java or at least create wrappers). I have yet to look seriously into the Google Visualization API but I suspect it might work just as well but I'm not sure if it is robust enough for my needs.

An important thing I believe I was missing as stated on Raphaël's site was the following:

This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later.