大家晚上好

我目前正在尝试将 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 代码吗？

有人可以帮我解释一下如何解决这两种方法吗？在这里真的很感激帮助，因为我对此没有那么丰富的经验。

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

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?

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

我现在尝试了几种方法:

• getMainWindow.executeJavaScript() 无法以我可以使用 d3 的方式工作，不知何故，只要我想添加一些 d3 代码，比如 "d3.select("body") .append( "svg");", 它只是不执行它(不管我是否做标签，但我注意到通常标签中的代码不会被执行)

• 我尝试使用 CustimLayout，因为它已在本论坛的一些示例中显示，但它又像上面描述的那样。当我检查网站源代码时，我的代码完全丢失或被解析掉了

• 标签不再工作，无论是 XHTML 还是 RAW 模式，都会发生异常

• 覆盖在服务器启动时构建主体时调用的另一个 servlet 方法，结果是我收到一条错误消息，指出 vaadin 甚至无法再加载默认小部件集。

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

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

最佳答案

合并现有 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);
}

关于java - 如何将 d3 (javascript) 添加到 vaadin 应用程序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11284116/