How to add d3 (javascript) to a vaadin application?

Question

Good evening guys,

I'm currently trying to add the visualization functionality of d3 to my vaadin application. If you don't know what d3 is, here is a quick link: http://d3js.org/

Yet I am stuck with some problems:

• How can I add the "d3.v2.js" javascript file/library, that is necessary for developing with d3? I tried adding it to an own theme (WebContent/VAADIN/themes/myOwnTheme/..), but through refreshing in eclipse I'm getting the message: "Errors occurred during the build. Errors running builder 'JavaScript Validator' on project 'VaadinD3Testproject'. 14". I guess that's because the js-file might be too large with around 8000 lines ? I read about somehow adding the file to the web.xml? Is there a way?

• How can I then add javascript code to my vaadin application? After my research I know that there are the options to use:

  • getMainWindow().executeJavaScript("alert('foo');")

  or

  • Label test = new Label("move mouse over here..",Label.CONTENT_XHTML);

--> Are there any other ways to integrate javascript code ?

Could someone help me with an kind of "step by step" explanation, how to solve both ways? Help would really be appreciated here, since I'm not that experienced with this.

------- UPDATE -----------

How can I add the "d3.v2.js" javascript file/library, that is necessary for developing with d3? I tried adding it to an own theme (WebContent/VAADIN/themes/myOwnTheme/..), but through refreshing I'm getting the message: "Errors occurred during the build. Errors running builder 'JavaScript Validator' on project 'VaadinD3Testproject'. 14". I guess that's because the js-file might be too large with around 8000 lines ? I read about somehow adding the file to the web.xml? Is there a way?

I fixed this error appearing, it was a problem with my eclipse and the inbuild javascript validator. I was now able to load the js-file into my application by overwriting the ajax class with an own servlet, as it has been described here in several posts.

I have now tried several ways:

• getMainWindow.executeJavaScript() doesn't work in a way that I could use d3 with, somehow as soon as I want to add some d3 code, like "d3.select("body") .append("svg");", it just doesn't execute it (no matter if I do the tags around or not, but I noticed in general that code in tags wont get executed)

• I tried using a CustimLayout, as it has been shown in some examples of this forum, but it's again like described above. When I check the websites sourcecode my code is simply missing or parsed out

• Labels wont work anymore, no matter if XHTML or RAW mode, exception occures

• Overwriting another servlet method that is called when the bodys is built at server start, the result was that I got an error message that vaadin couldn't even load the default widgetset anymore.

So, what's left? Is there really no way to integrate d3 with vaadin? Did never anyone try this? I read a lot also yesterday about the upcoming vaadin 7. But would it even be kind of an option to use an alpha version from which I have no idea about its stability (I guess that's why it's called alpha )

Thanks for every thought you're sharing with me

Aucoin

Answer 1

The most comprehensive way to incorporate an existing javascript library is develop your own custom component. This is a little more involved than "normal" Vaadin development, but will give you full access to javascript methods and objects (via GWT) in the browser.

To just include an external javascript file into the page, extend the ApplicationServlet class, and override the writeAjaxPageHtmlVaadinScripts method. Here is an extract from a current project that includes some external libraries.

You can then utilise those libraries using 'getMainWindow().executeJavaScript(blah)'

Still, from what I can see of d3 it makes more sense to develop a custom Vaadin component. You might find it more prudent to see if there is an existing GWT d3 widget, and then try and utilise that in a Vaadin component.

@Override
protected void writeAjaxPageHtmlVaadinScripts(Window window,
                                              String themeName, Application application, BufferedWriter page,
                                              String appUrl, String themeUri, String appId,
                                              HttpServletRequest request) throws ServletException, IOException {
  page.write("<script type=\"text/javascript\">\n");
  page.write("//<![CDATA[\n");
  page.write("document.write(\"<script language='javascript' src='" + appUrl + "/VAADIN/scripts/jquery/jquery-1.4.4.min.js'><\\/script>\");\n");
  page.write("document.write(\"<script language='javascript' src='" + appUrl + "/VAADIN/scripts/highcharts/highcharts.js'><\\/script>\");\n");
  page.write("document.write(\"<script language='javascript' src='" + appUrl + "/VAADIN/scripts/highcharts/modules/exporting.js'><\\/script>\");\n");
  page.write("//]]>\n</script>\n");
  super.writeAjaxPageHtmlVaadinScripts(window, themeName, application,
      page, appUrl, themeUri, appId, request);
}

Tightfisted

You don't need the document.write part, it will work with: page.write("<script type=\"text/javascript\" src=\"" + appUrl + "/VAADIN/scripts/jquery/jquery-1.4.4.min.js\"></script>\n"); – Astray

In vaadin 7 you use @JavaScript annotation to add js files @JavaScript({"vaadin://themes/ativos/js/jquery.min.js"}) – Challah

Answer 2

I know its too late but i started with integration of D3js and Vaadin . I got some resources . It might help someone who is on this track First of all Best book out there for Vaadin is Book Of Vaadin This book will help you get the thorough knowledge of Vaadin Also it has been recommended for Vaadin certification

Click Here to download Book Of Vaadin

1) Freecode Charts And D3 Wrapper

2) Integration of D3 with Vaadin

If You get any error in this tutorial try to refer this link --> Vaadin forum

3)Direct use of d3 libraray

Grosmark