如何将 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("将鼠标移到此处..",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 的原因）

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

Answer 1

我知道为时已晚，但我从 D3js 和 Vaadin 的集成开始。我得到了一些资源。它可能会帮助在这条赛道上的人 首先，最好的 Vaadin 书籍是 Book Of Vaadin 这本书将帮助您全面了解 Vaadin 并且它已被推荐用于 Vaadin 认证

Click Here to download Book Of Vaadin

1)Freecode Charts And D3 Wrapper

2)Integration of D3 with Vaadin

如果您在本教程中遇到任何错误，请尝试参考此链接 --> Vaadin forum

3)Direct use of d3 libraray

Answer 2

整合现有 javascript 库的最全面方法是开发您自己的 custom component。这比“正常”的 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);
}