GWT 和 JSNI：第三方库集成答案

【问题标题】：GWT and JSNI: third-party library integrationGWT 和 JSNI：第三方库集成
【发布时间】：2013-10-14 13:38:18
【问题描述】：

我正在尝试将 Opentip 集成到 GWT 项目中。由于我的一些小部件是从 Java 而不是 HTML 加载的，看来我必须使用 JSNI 来正确绑定这些工具提示。这是我到目前为止所做的：

在我的 HTML 文件中，将相关的 JS/CSS 声明放在 GWT 的 nocache.js 之前。（我也尝试使用 ScriptInjector 复制 JS 加载，但这没有任何好处，所以我将其删除为多余的。

编写了一个 JSNI 方法来实例化工具提示：

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

我尝试了上述方法的不同变体，但我了解到这是它应该工作的方式（幻灯片 20 here，虽然我无法直接链接到幻灯片）。到目前为止，我没有运气，最近的这个尝试，对我来说似乎是最正确的，实际上已经阻止了我的 GWT 模块的其余部分（在工具提示实例化调用之后），就好像我在某处有语法错误，尽管控制台没有报告任何内容。关于我做错了什么的任何想法？我对 GWT 和 JS 都比较陌生，所以我希望这只是一个愚蠢的初学者错误。

我还没有尝试过的一件事是编写 Overlay object，部分原因是我无法从文档中看到如何正确包装 JS 构造函数。如果这是这里的解决方案，欢迎提供一些关于如何做到这一点的指示。作为参考，我将使用的构造函数（来自 Opentip 文档）是：

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

感谢您的帮助；这看起来应该不是那么棘手的问题，但到目前为止，我的经验不足阻碍了我的努力。

更新

经过几个小时的诅咒和参数摆弄，我已经解决了这个问题，所以不要浪费任何时间来帮助我调试。今天稍晚有空的时候我会写一个答案。

【问题讨论】：

你有没有在纯 html+js 中尝试过任何 Opentip 功能？也许您可以在 index.html 页面上做一些简单的示例，甚至无需加载 GWT。
我已经尝试过了，事实上这就是我更愿意做的事情，但我试图将工具提示放在由 GWT 实例化和加载的小部件上，因此 Opentip 的绑定（在document.ready()，我相信) 不会拾取它们，即使我有 GWT 将 Opentip 特定的 html 添加到新的小部件。

标签： java javascript gwt jsni

【解决方案1】：

所以你的web.gwt.xml、你的模块和你的EntryPoint都设置好了。如果你没有这些东西，这不是你的答案。 The documentation 不是一个糟糕的起点。这个答案将以 Opentip 为例，但我不明白为什么它也不适用于其他人；不过，具体来说，这适用于您仅在 GWT 中设置小部件（无法从您的 HTML 访问）并且需要将外部 JS 绑定到它们以启用某些功能的情况。

打开您的web.gwt.xml 并确保您将库的源代码包含在要使用它的模块的条目中。这意味着您不必在页面的静态 HTML 中声明它，如果您也没有特别需要它。
```
<script src="../js/opentip/opentip-jquery.min.js"/>
```
（注意../ - 这是您的 GWT 生成的 HTML 文件最终在您的服务器上的相对路径，并且您的 Web 服务器必须可以访问它。）
在你想使用库的模块类中，设置一个 JSNI 方法，像这样调用你的库构造函数：
```
private native void initTooltip() /*-{
    new $wnd.Opentip($doc.getElementById("tooltipTrigger"), "Tooltip text");
}-*/;
```
（注意$wnd 用于引用顶层窗口，$doc 用于引用文档。前置$wnd. 用于引用在外部JS 文件中声明/分配的任何全局变量。）

不需要花哨的覆盖类型或ScriptInjector 调用。在解决这个问题时我确实遇到了另一个问题——我对getElementById() 的调用又回来了null——结果是因为在onModuleLoad() 期间将相关对象添加到DOM 之前我调用了我的JSNI 方法.

正如我最初所想的那样，这被证明是一个简单的初学者错误；希望这可以帮助其他人尝试将类似问题的其他答案拼凑成一个可行的解决方案。

【讨论】：