java - 如何将 d3 (javascript) 添加到 vaadin 应用程序？

Question

各位晚安，

我目前正在尝试将 d3 的可视化功能添加到我的 vaadin 应用程序中。如果你不知道 d3 是什么，这里有一个快速链接：http ://d3js.org/

然而我遇到了一些问题：

如何添加使用 d3 进行开发所必需的“d3.v2.js”javascript 文件/库？我尝试将它添加到自己的主题（WebContent/VAADIN/themes/myOwnTheme/..），但通过在 Eclipse 中刷新我收到消息：“在构建过程中发生错误。在项目上运行构建器'JavaScript Validator'时出错' VaadinD3Testproject'.14"。我猜那是因为 js 文件可能太大了，大约有 8000 行？我读到了以某种方式将文件添加到 web.xml？有办法吗？
然后如何将 javascript 代码添加到我的 vaadin 应用程序？经过研究，我知道可以使用以下选项：
- getMainWindow().executeJavaScript("alert('foo');")
或者
- Label test = new Label("将鼠标移到这里..
  ",标签.CONTENT_XHTML);

--> 还有其他方法可以集成 javascript 代码吗？

有人可以用一种“逐步”的解释来帮助我，如何解决这两种方式？在这里真的会很感激帮助，因为我对此没有那么有经验。

- - - - 更新 - - - - - -

如何添加使用 d3 进行开发所必需的“d3.v2.js”javascript 文件/库？我尝试将其添加到自己的主题（WebContent/VAADIN/themes/myOwnTheme/..），但通过刷新我收到消息：“构建期间发生错误。在项目'VaadinD3Testproject'上运行构建器'JavaScript Validator'时出错' . 14"。我猜那是因为 js 文件可能太大了，大约有 8000 行？我读到了以某种方式将文件添加到 web.xml？有办法吗？

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

我现在尝试了几种方法：

getMainWindow.executeJavaScript() 无法以我可以使用 d3 的方式工作，不知何故，只要我想添加一些 d3 代码，例如“d3.select("body") .append("svg");" ，它只是不执行它（无论我是否做标签，但我注意到一般标签中的代码不会被执行）
我尝试使用 CustimLayout，因为它已在本论坛的一些示例中显示，但它再次像上面描述的那样。当我检查网站源代码时，我的代码只是丢失或解析了
标签不再起作用，无论是 XHTML 还是 RAW 模式，都会发生异常
覆盖在服务器启动时构建主体时调用的另一个 servlet 方法，结果是我收到一条错误消息，指出 vaadin 甚至无法再加载默认的小部件集。

那么，还剩下什么？真的没有办法将d3与vaadin集成吗？从来没有人尝试过这个吗？昨天我也读了很多关于即将推出的 vaadin 7 的文章。但是使用我不知道它的稳定性的 alpha 版本是否是一种选择（我想这就是它被称为 alpha 的原因）

感谢您与我分享的每一个想法

score 7 · Accepted Answer

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

要在页面中仅包含一个外部 javascript 文件，请扩展 ApplicationServlet 类并覆盖该writeAjaxPageHtmlVaadinScripts方法。这是当前项目的摘录，其中包括一些外部库。

然后，您可以使用“getMainWindow().executeJavaScript(blah)”来使用这些库

尽管如此，从我对 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);
}