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

How to add d3 (javascript) to a vaadin application?

本文关键字：添加 vaadin 应用程序 javascript d3      更新时间：2023-09-26

晚上好伙计们，

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

然而，我遇到了一些问题：

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

  • 然后，如何将 javascript 代码添加到我的 vaadin 应用程序中？经过我的研究，我知道有以下选项可以使用：

    • getMainWindow（）.executeJavaScript（"alert（'foo'）;"）

    或

    • 标签测试 = 新标签（"将鼠标移到这里.." ，Label.CONTENT_XHTML）;
-

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

有人可以帮助我进行一种"逐步"的解释，如何解决两种方式？在这里真的很感激，因为我在这方面没有经验。

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

如何添加使用 d3 开发所需的"d3.v2.js"javascript 文件/库？我尝试将其添加到自己的主题中 （WebContent/VAADIN/themes/myOwnTheme/..），但通过刷新，我 收到消息："生成过程中发生错误。运行错误 构建者"JavaScript Validator"项目"VaadinD3Testproject"。14'". 我想这是因为 js 文件可能太大了，大约有 8000 个 线？我读到了以某种方式将文件添加到网络上的信息.xml？有吗 一种方式？

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

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

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

  • 我尝试使用CustimLayout，正如本论坛的一些示例所示，但它又像上面描述的那样。当我检查网站源代码时，我的代码只是丢失或解析掉

    • 了

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

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

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

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

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

为时已晚，但我从集成 D3js 和 Vaadin 开始。我得到了一些资源.它可能会帮助走这条路的人首先，瓦丁最好的书是瓦丁之书 这本书将帮助您全面了解瓦丁 它也已被推荐用于瓦丁认证

点击这里下载瓦丁之书

1） 自由编码图表和 D3 包装器

2） D3与Vaadin的整合

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

3）直接使用 d3 图书馆

相关文章：