如何将d3（javascript）添加到Vaadin应用程序中？

Question

如何将d3（javascript）添加到Vaadin应用程序中？

8

晚上好，

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

1. 如何添加必须的“d3.v2.js”JavaScript文件/库以便使用d3？我尝试将其添加到自己的主题(WebContent/VAADIN/themes/myOwnTheme/..)，但通过在Eclipse中刷新时出现了错误：“在'VaadinD3Testproject'项目上运行构建器“JavaScript Validator”时发生错误14”。我猜这是因为JS文件可能太大，有大约8000行吗？我读了一些关于如何将该文件添加到web.xml的方法？有办法吗？

2. 然后如何将JavaScript代码添加到我的Vaadin应用程序中？根据我的研究，我知道可以使用以下选项：

- getMainWindow().executeJavaScript("alert('foo');"); - Label test = new Label("move mouse over here..",Label.CONTENT_XHTML);

-->还有其他集成JavaScript代码的方法吗？

能否提供一种“逐步”解决这两种方法的说明？我需要帮助，因为我对此并不是很有经验。

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

我解决了这个错误，这是我的eclipse和内置Javascript验证程序的问题。我现在通过覆盖ajax类并使用自己的servlet将js文件加载到我的应用程序中，正如在几篇文章中所描述的那样。

我现在已经尝试了几种方式：

getMainWindow.executeJavaScript()无法与d3一起使用，无论我是否在代码中添加"d3.select("body").append("svg");"，它都不会执行（无论我是否将代码放在标签中，但我注意到通常标签中的代码不会被执行）
我尝试使用CustimLayout，因为在这个论坛的一些示例中已经展示过了，但它仍然像上面描述的那样。当我检查网站的源代码时，我的代码就被简单地删除或解析掉了
无论是XHTML还是RAW模式，标签都不再起作用，都会出现异常
重写另一个servlet方法，在服务器启动时构建bodys时调用该方法，结果是我收到了一个错误消息，说vaadin甚至无法加载默认的widgetset。

那么，还有什么办法吗？真的没有办法将d3与vaadin集成吗？从来没有人尝试过吗？我昨天也读了很多关于即将推出的vaadin 7的文章。但是，使用我对其稳定性毫无概念的alpha版本是否是一个选择呢（我猜这就是为什么它被称为alpha）

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

- Waylander

2个回答

1

我知道现在已经晚了，但我开始整合D3js和Vaadin。我找到了一些资源。这可能会帮助正在这条路上的人。

首先，Vaadin最好的书是《Vaadin之书》。这本书将帮助您全面了解Vaadin。同时，它也被推荐用于Vaadin认证。

点击此处下载《Vaadin之书》

1) Freecode图表和D3包装器

2) D3与Vaadin的整合

如果在本教程中遇到任何错误，请参考此链接--> Vaadin论坛

3)直接使用d3库

- Prateek Gangwal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Charles Anthony · Accepted Answer

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

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

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

尽管如此，从我所看到的d3来看，开发自定义Vaadin组件更有意义。您可能会发现，在Vaadin组件中使用现有的GWT d3小部件更为明智。

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