Can GWT use Raphael via JSNI?

Question

I need to do some client-side 2D drawing in my GWT app (nothing fancy, just draw a bunch of basic 2D shapes - circles, rectangles, etc.).

I don't believe GWT has a graphics/drawing framework, and so I was wondering if there was any way to use JSNI to somehow connect to the reputed Raphael JS library and invoke Raphael from inside GWT.

If this isn't possible, can someone explain why and what my options might be?

And if this is possible, then consider the following Raphael code that draws a square:

paper = new Raphael(0,0,500,500);
var rect = paper.rect(x,y,width,height).attr({"fill":"white","stroke":"red"});

I want that JS code above to execute when a user clicks a button. Here is my GWT click handler:

@UiHandler("signInButton")
void onClickSignInButton(final ClickEvent clickEvent) {
    // ????
}

How do I connect the two?

Answer 1

Wrap Raphael class in JSObject class.

public final RaphaelJSO {
    protected RaphaelJSO(){}

    public static RaphaelJSO getNew(float a, float b, float c, float d){
        return getNewInner(a,b,c,d);
    }

    private native static RaphaelJSO getNewInner(float a, float b, float c, float d)/*-{
        return new Raphael(a, b, c, d);
    }-*/;

    public JSObject circle(int a,int b, int c){
        return circle(this,a,b,c);
    }

    private native JSObject circle(RaphaelJSO o, int a, int b, int c)/*-{
        return o.circle(a,b,c);
    }-*/;

}

Like wise you can wrap other classes and/or provide methods on them.

Then call this Java code as you would otherwise.