如何向vaadin应用程序添加d3 (javascript) ?

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/

我目前正在尝试将d3的可视化功能添加到我的vaadin应用程序中。如果您不知道d3是什么，这里有一个快速链接: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?

如何添加"d3。v2 "javascript文件/库，用d3开发需要什么?我尝试将它添加到一个自己的主题(WebContent/VAADIN/theme /myOwnTheme/..)，但是通过在eclipse中刷新，我得到的消息是:“构建过程中发生了错误”。在项目“VaadinD3Testproject”上运行构建器“JavaScript验证器”的错误。14”。我猜那是因为js文件太大了，大概有8000行?我读到过如何将文件添加到web.xml?有一种方式吗?
How can I then add javascript code to my vaadin application? After my research I know that there are the options to use:

然后如何向我的vaadin应用程序添加javascript代码?经过我的研究，我知道有一些选择可以使用:
- getMainWindow().executeJavaScript("alert('foo');")
- getMainWindow().executeJavaScript(“警报(“foo”);”)
or

或
- Label test = new Label("move mouse over here..
  ",Label.CONTENT_XHTML);
- 标签测试=新标签(“移动鼠标到这里。”,Label.CONTENT_XHTML);

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

——>有没有其他方法来集成javascript代码?

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?

如何添加"d3。v2 "javascript文件/库，用d3开发需要什么?我尝试将它添加到一个自己的主题(WebContent/VAADIN/theme /myOwnTheme/..)，但是通过刷新，我得到了这样的消息:“构建过程中发生了错误”。在项目“VaadinD3Testproject”上运行构建器“JavaScript验证器”的错误。14”。我猜那是因为js文件太大了，大概有8000行?我读到过如何将文件添加到web.xml?有一种方式吗?

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.

我修复了出现的错误，这是我的eclipse和inbuild javascript验证器的问题。现在，我可以通过使用自己的servlet覆盖ajax类来将js文件加载到我的应用程序中，正如本文中描述的那样。

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)

executejavascript()不能使用d3，只要我想添加一些d3代码，比如“d3.select(“body”).append(“svg”);，它只是不执行它(不管我是否执行这些标记，但我注意到通常在标记中的代码不会被执行)
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

我尝试过使用CustimLayout，正如在本论坛的一些示例中所示，但它又与上面描述的一样。当我查看网站源代码时，我的代码只是丢失或解析
Labels wont work anymore, no matter if XHTML or RAW mode, exception occures

标签不再工作，无论XHTML还是RAW模式，都会发生异常
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.

覆盖在服务器启动时构建bodys时调用的另一个servlet方法，结果是我得到了一个错误消息，而vaadin甚至无法再加载默认的widgetset。

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 )

所以,还剩下什么?真的没有办法把d3和vaadin结合起来吗?没人试过吗?我昨天也读了很多关于即将到来的vaadin 7的消息。但它是否会是一种使用alpha版本的选项我不知道它的稳定性(我想这就是为什么它被称为alpha)

Thanks for every thought you're sharing with me

谢谢你和我分享的每一个想法

2 个解决方案

#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.

合并现有javascript库的最全面的方法是开发自己的自定义组件。这比“正常”的Vaadin开发稍微复杂一些，但是可以让您在浏览器中完全访问javascript方法和对象(通过GWT)。

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.

要将一个外部javascript文件包含到页面中，扩展ApplicationServlet类，并覆盖writeAjaxPageHtmlVaadinScripts方法。下面是一个包含一些外部库的当前项目的摘录。

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

然后可以使用'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.

不过，从我可以看到的d3来看，开发自定义的Vaadin组件更有意义。您可能会发现更谨慎的做法是查看是否有一个现有的GWT d3小部件，然后尝试在Vaadin组件中使用它。

@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);
}

#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

我知道已经太迟了，但我从集成D3js和Vaadin开始。我有一些资源。它可能会帮助那些在这个轨道上的人首先为Vaadin的书这本书将帮助你获得对Vaadin的深入了解它也被推荐给Vaadin认证

Click Here to download Book Of Vaadin

点击这里下载Vaadin图书

1) Freecode Charts And D3 Wrapper

1) Freecode Charts和D3 Wrapper

2) Integration of D3 with Vaadin

2) D3与Vaadin的集成

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

如果您在本教程中遇到任何错误，请尝试引用这个链接——> Vaadin论坛

3)Direct use of d3 libraray

3) d3 libraray的直接使用

#1