Question

我正在尝试将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... });

感谢您的帮助;这似乎不应该是一个严峻的问题，但到目前为止，我的经验不足已经挫败了我的努力。

更新

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

Answer 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 - 结果是因为我在将相关对象添加到DOM之前调用了我的JSNI方法在onModuleLoad()期间。

就像我最初想的那样，结果证明这是一个简单的初学者的错误;希望这可以帮助其他人尝试将类似问题的其他答案拼凑成一个可行的解决方案来解决他们的问题。

GWT和JSNI：第三方库集成

1 个答案: