如何將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);
}

Answer 2

我知道它為時已晚，但我開始整合D3js和Vaadin。 我有一些資源。 它可能對這條軌道上的人有所幫助首先為Vaadin 出版的最佳書是Vaadin書這本書將幫助您獲得Vaadin的全面知識。它也被推薦用於Vaadin認證

點擊這里下載 Book of Vaadin

1） Freecode Charts和D3 Wrapper

2） D3與Vaadin的整合

如果您在本教程中遇到任何錯誤，請嘗試參考此鏈接 - > Vaadin論壇

3） 直接使用d3 libraray