如何添加d3（javascript）到vaadin应用程序？ [英] How to add d3 (javascript) to a vaadin application?

问题描述

晚上好，

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

但我遇到了一些问题：

• d3.v2.jsjavascript文件/库，这是必要的开发与d3？我试图将它添加到一个自己的主题（WebContent / VAADIN / themes / myOwnTheme / ..），但通过刷新在eclipse我得到的消息：错误发生在构建期间。错误运行生成器'验证器' VaadinD3Testproject'。14。我想这是因为js文件可能太大，大约8000行？我阅读关于以某种方式添加文件到web.xml？有办法吗？




• 如何才能在我的vaadin应用程式中加入JavaScript程式码？在我的研究后，我知道有选择使用：

  
  
  
  
  
  • getMainWindow（）。executeJavaScript（alert（'foo'）; ）
  
  
  
  
  

  或

  
  
  
  
  
  • new Label（move mouse over here ..
    ，Label.CONTENT_XHTML）;
  
  

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

有人可以帮我一种一步一步解释，如何解决这两种方式？帮助真的会感谢这里，因为我不是那种经验的。

------- UPDATE -----------

如何添加d3.v2.jsjavascript文件/库，这是开发与d3所必需的？我试图将它添加到自己的主题
（WebContent / VAADIN / themes / myOwnTheme / ..），但通过刷新我是
获取消息：错误发生在构建过程中错误运行
builder'JavaScript Validator'on project'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）

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

解决方案

现有的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 \> \\\
）; 
 page.write（//<！[CDATA [\\\
）; 
 page.write（document.write（\< script language ='javascript'src ='+ appUrl +/VAADIN/scripts/jquery/jquery-1.4.4.min.js'> ;< \\ / script> \）; \\\
）; 
 page.write（document.write（\< script language ='javascript'src ='+ appUrl +/VAADIN/scripts/highcharts/highcharts.js'> ;<\\\ \\ / script> \）; \\\
）; 
 page.write（document.write（\< script language ='javascript'src ='+ appUrl +/VAADIN/scripts/highcharts/modules/exporting.js'><\\ \\\ / script> \）; \\\
）; 
 page.write（//]]> \\\
< / script> \\\
）; 
 super.writeAjaxPageHtmlVaadinScripts（window，themeName，application，
 page，appUrl，themeUri，appId，request）; 
} 
  

Good evening guys,

I'm currently trying to add the visualization functionality of d3 to my vaadin application. If you don't know what d3 is, here is a quick link: http://d3js.org/

Yet I am stuck with some problems:

• 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 in eclipse 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?

• How can I then add javascript code to my vaadin application? After my research I know that there are the options to use:

  • getMainWindow().executeJavaScript("alert('foo');")

  or

  • Label test = new Label("move mouse over here..
    ",Label.CONTENT_XHTML);

--> Are there any other ways to integrate javascript code ?

Could someone help me with an kind of "step by step" explanation, how to solve both ways? Help would really be appreciated here, since I'm not that experienced with this.

------- UPDATE -----------

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?

I fixed this error appearing, it was a problem with my eclipse and the inbuild javascript validator. I was now able to load the js-file into my application by overwriting the ajax class with an own servlet, as it has been described here in several posts.

I have now tried several ways:

• getMainWindow.executeJavaScript() doesn't work in a way that I could use d3 with, somehow as soon as I want to add some d3 code, like "d3.select("body") .append("svg");", it just doesn't execute it (no matter if I do the tags around or not, but I noticed in general that code in tags wont get executed)

• I tried using a CustimLayout, as it has been shown in some examples of this forum, but it's again like described above. When I check the websites sourcecode my code is simply missing or parsed out

• Labels wont work anymore, no matter if XHTML or RAW mode, exception occures

• Overwriting another servlet method that is called when the bodys is built at server start, the result was that I got an error message that vaadin couldn't even load the default widgetset anymore.

So, what's left? Is there really no way to integrate d3 with vaadin? Did never anyone try this? I read a lot also yesterday about the upcoming vaadin 7. But would it even be kind of an option to use an alpha version from which I have no idea about its stability (I guess that's why it's called alpha )

Thanks for every thought you're sharing with me

解决方案

The most comprehensive way to incorporate an existing javascript library is develop your own custom component. This is a little more involved than "normal" Vaadin development, but will give you full access to javascript methods and objects (via GWT) in the browser.

To just include an external javascript file into the page, extend the ApplicationServlet class, and override the writeAjaxPageHtmlVaadinScripts method. Here is an extract from a current project that includes some external libraries.

You can then utilise those libraries using 'getMainWindow().executeJavaScript(blah)'

Still, from what I can see of d3 it makes more sense to develop a custom Vaadin component. You might find it more prudent to see if there is an existing GWT d3 widget, and then try and utilise that in a Vaadin component.

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

这篇关于如何添加d3（javascript）到vaadin应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！