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

Be warned that SVG will not work in current GWT Shell (Hosted mode) up to 1.6 inclusive, because:

1) on windows, it uses IE component

2) on Linux, it uses Firefox 1.0 or equal mozilla runtime, which has no support for SVG.

Compiled code works fine in non-IE browsers.

Also, it works regardless of HTML/XHTML in browsers, because in GWT you use createElementNS (you can code method yourself using JSNI). Also, your SVG tag may need width/height attributes (see SVG spec).

Answer 2

If you cannot see your SVG it may be because your browser see your document as an HTML file but NOT as an XHTML file. Try to change the extension of your file (.xhtml), check your html is well formed, add an html 'meta' tag etc..

FYI , There is also a SVG module for GWT: http://gwt-widget.sourceforge.net/

Pierre

Answer 3

I don't entirely understand why, but the createElementNS JavaScript method allows you to create and correctly format xhtml within html.

Because there is no equivalent in explorer, GWT does not implement createElementNS, but you can with a quick native method :

private static native Element createElementNS(final String ns, 
        final String name)/*-{
    return document.createElementNS(ns, name);
}-*/;

It makes sense to put this into an SVGPanel class.

import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.ComplexPanel;

public class SVGPanel extends ComplexPanel{

    private static final String SVG_NAMESPACE = "http://www.w3.org/2000/svg";

    public SVGPanel() {
        setElement(createElementNS(SVG_NAMESPACE, "svg"));
        showcaseSVG(); //Demonstrate that SVG works! Inexplicably!
    }

    private void showcaseSVG(){
        Element svgElement = createElementNS(SVG_NAMESPACE, "circle");
        svgElement.setAttribute("cx", "50");
        svgElement.setAttribute("cy", "50");
        svgElement.setAttribute("r", "30");
        getElement().appendChild(svgElement);
    }
}

This should produce some simple SVG when added to your program. Congratulations! You are now sticking it to the xhtml man.

Answer 4

Interesting!

I've tried to use Raphael through GWT/Java code but I can't seem to be able to use your trick.

I have the following block in my HTML page :

<script  type="text/javascript" language="javascript" ><br/>
     window.onload=function(){
     var rr = Raphael(20,20, 200,200);
     rr.circle(50,40,30);
     }
</script>

When I compile/browse the page in Firefox, I get my circle in my page, no problem.

Then I add the following native java to my module entrypoint method and call it :

 private native JavaScriptObject returnRaphael() /*-{
            return $wnd.rr;
        }-*/;

Debugging shows that the returned object is always null...

Plus, I don't understand why I could not simply do the following in my Java code:

public native void createRaphael()/*-{
    Raphael("some_div", 200,200);
}-*/;

GWT keeps telling me that Raphael does not exist, though, as I see through firebug, the library is perfectly included. This does not work either :

public native void createRaphael()/*-{
    $wnd.Raphael("some_div", 200,200);
}-*/;

Surprinsingly, I manage to access draw2d (openJacob draw2d) classes and functions with that $wnd but not my Raphael objects... There must be something I did not get...

Answer 5

You might stuble about the html vs xhtml problem: inline SVG needs to be interpreted as XML/XHTML, but at least for me, I cannot persuade GWT to live with applicaton/xhtml+xml as a content type. For the local test you wonder about: try to save the file as .xhtml and load it into Firefox - then it works, because FF in this case interprets it as XHTML.

See http://wiki.svg.org/Inline_SVG for background information.

If you find a solution to the problem, please post. Regards, Axel

Answer 6

We just open-sourced a GWT widget that allows you to integrate GWT with Raphael: http://code.google.com/p/raphaelgwt/

This widget was originally created for Hydro4GE and was mentioned in an article on the official GWT Blog.