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

Question

晚上好,

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

但我遇到了一些问题:

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

• 我怎样才能将javascript代码添加到我的vaadin应用程序中？经过我的研究,我知道可以使用的选项:

  • .getMainWindow()executeJavaScript( "警报( '富');")

  要么

  • 标签测试=新标签("将鼠标移到这里..
    ",Label.CONTENT_XHTML);

- >有没有其他方法来集成JavaScript代码？

有人可以通过一种"一步一步"的解释帮助我,如何解决这两种方式？这里的帮助真的很值得赞赏,因为我对此并不熟悉.

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

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

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

我现在尝试了几种方法:

• getMainWindow.executeJavaScript()无法以某种方式使用d3,只要我想添加一些d3代码,例如"d3.select("body").append("svg");" ,它只是不执行它(无论我是否执行标记,但我一般都注意到标记中的代码不会被执行)

• 我尝试使用CustimLayout,因为它已在本论坛的一些示例中显示,但它再次如上所述.当我检查网站源代码时,我的代码只是丢失或解析出来

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

• 覆盖在服务器启动时构建bodys时调用的另一个servlet方法,结果是我收到一条错误消息,即vaadin甚至无法加载默认的widgetset.

那么,还剩下什么？有没有办法将d3与vaadin集成？没有人试过这个吗？我昨天也读了很多关于即将推出的vaadin 7.但是它甚至可以选择使用我不知道它的稳定性的alpha版本(我猜这就是为什么它被称为alpha)

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

Answer 1

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