GWT和JSNI：第三方庫集成

Question

我正在嘗試將Opentip集成到GWT項目中。 由於我的某些小部件是從Java而不是HTML加載的，因此我似乎不得不使用JSNI來正確綁定那些工具提示。 到目前為止，這是我所做的：

1. 將相關的JS / CSS聲明放在HTML文件中GWT的nocache.js之前。 （我還嘗試使用ScriptInjector復制JS加載，但這沒有任何用處，因此我將其刪除為多余的。

2. 編寫了JSNI方法來實例化工具提示：

    private native void initControlTooltips() /*-{ var headerText = "Tooltip text"; new $wnd.Opentip($("#tooltipTrigger"), headerText); // more tooltips... }-*/ 

我嘗試了上述方法的不同變體，但是我已經讀到了這是應該起作用的方式（ 此處是幻燈片20，盡管我不能直接鏈接到幻燈片）。 到目前為止，我還沒有運氣，最近一次的嘗試（對我來說似乎是最正確的）實際上已經阻止了我的GWT模塊其余部分的加載（在工具提示實例化調用之后），好像我的某個語法錯誤，盡管控制台沒有報告任何內容。 關於我在做什么錯的任何想法嗎？ 我對GWT和JS都比較陌生，所以我希望這只是一個愚蠢的初學者的錯誤。

我還沒有嘗試過的一件事是編寫一個Overlay對象 ，部分原因是我從文檔中看不到如何正確包裝JS構造函數。 如果這是解決方案，那么歡迎提供一些有關如何執行此操作的指示。 作為參考，我將使用的構造函數（來自Opentip文檔）是：

new Opentip("#my-trigger-element", "Optional content", "Optional title", { ...options... });

謝謝你的幫助; 這似乎不應該是一個棘手的問題，但是到目前為止，我的經驗不足挫敗了我的努力。

更新資料

經過數小時的咒罵和參數擺弄，我已經解決了這個問題，所以不要浪費任何時間嘗試幫助我進行調試。 我會在稍晚的空閑時間寫一個答案。

Answer 1

這樣就完成了web.gwt.xml ，模塊和EntryPoint設置。 如果您沒有這些東西，那么這不是您的答案。 該文檔不是一個不好的起點。 這個答案將以Opentip為例，但是我不明白為什么它對其他人也無效。 但是，特別是，如果您僅在GWT中設置了小部件（無法從HTML進行訪問），並且需要將外部JS綁定到它們以啟用某些功能，則適用於這種情況。

1. 破解您的web.gwt.xml ，並確保在要使用它的模塊的條目中包含庫的源代碼。 這意味着，如果您也不特別需要在頁面的靜態HTML中聲明它，則無需在頁面的靜態HTML中聲明它。

    <script src="../js/opentip/opentip-jquery.min.js"/> 

   （請注意../這是GWT生成的HTML文件最終在服務器上的相對路徑，必須由Web服務器訪問。）

2. 在要使用該庫的模塊類中，裝配一個JSNI方法，如下所示調用您的庫構造函數：

    private native void initTooltip() /*-{ new $wnd.Opentip($doc.getElementById("tooltipTrigger"), "Tooltip text"); }-*/; 

   （請注意， $wnd用於引用頂級窗口， $doc用於引用文檔。在$wnd. wnd之前$wnd.用於引用在外部JS文件中聲明/分配的任何全局變量。）

不需要花哨的Overlay類型或ScriptInjector調用。 我也有一個問題，其他工作時這一點-我調用getElementById()回來了null -這竟然是因為我打電話給我的JSNI方法之前在相關對象已被添加到DOM onModuleLoad()

就像我最初認為的那樣，這原來是一個簡單的初學者的錯誤。 希望這可以幫助其他試圖將對類似問題的其他答案組合在一起的人，以解決他們的問題。