使用GWT JSNI与js文件集成答案

【问题标题】：Using GWT JSNI to integrate with js files使用GWT JSNI与js文件集成
【发布时间】：2017-01-04 17:19:55
【问题描述】：

我目前正在处理一个 GWT 项目，它现在需要由外部 JavaScript 文件使用。我现在正在创建一个测试原型，以确保双方都能正常工作。

当我运行和编译时，我会在浏览器中看到被调用事件的控制台日志。但是，没有调用 GWT java 方法。

在尝试了许多场景之后，我还注意到，如果我从 exportStaticMethods() 中删除 $entry 包装器，则会发生相反的情况。我看到在我的 java 代码中调用了 System.outs，但是没有调用来自浏览器中 JavaScript 的控制台日志。

我正在尝试找出导致该行为的原因，以及是否存在我忽略的小缺失部分。

我已经查看了calling a Java method from js 的 GWT JSNI 文档，并尝试从 StackOverflow 上的其他相关问题中找到解决方案。

GWT 和 Java 端

我已经进入了EntryPoint 类的onModuleLoad() 方法，并添加了一个名为exportStaticMethods() 的静态方法。我还创建了下面列出的PokePingClass.java 文件。

EntryPointClass.java

public class EntryPointClass implements EntryPoint {

    @Override public void onModuleLoad() {
        exportStaticMethods();
        // load application here.
    }

    public static native void exportStaticMethods() /*-{

        $wnd.pingApp = $entry((function) {
                           @com.application.PokePingClass::pingApp()();
                       });

        $wnd.pokeApp = $entry((function) {
                           @com.application.PokePingClass::pokeApp()();
                       });
    }-*/
}

PokePingClass.java

public class PokePingClass {

    public static void pokeApp() {
        System.out.println("pokeApp() called");
    }

    public static void pingApp() {
        System.out.println("pingApp() called");
    }
}

HTML 和 js

在项目的.html文件中，我添加了id为'pokePing'的隐藏div元素，以及pokeping.js文件。

<html>
    <head>
        .
        . <!-- other stuff -->
        .
        <script type='text/javascript' src='pokeping.js</script> 
    </head>

    <body>
        .
        . <!-- other stuff -->
        .
        <div id="pokePing" style="visibility: hidden;"></div>
    </body>
</html>

pokeping.js

$(document).ready(function) {

    var $pp = $('#pokePing');

    var pokeApp = function() {
        console.log("app handling poke event");
        window.parent.pokeApp();
    }

    var pingApp = function() {
        console.log("app handling ping event");
        window.parent.pingApp();
    }

    $pp.trigger('pokeApp');
    $pp.trigger('pingApp');
}

【问题讨论】：

标签： javascript java gwt smartgwt smartgwt-pro

【解决方案1】：

public static native void exportStaticMethods() /*-{

    $wnd.pingApp = $entry(function) {
                       @com.application.PokePingClass.pingApp()();
                   }

    $wnd.pokeApp = $entry(function) {
                       @com.application.PokePingClass.pokeApp()();
                   }
}-*/

这不是有效的 JS，并且作为 JSNI 没有意义。试试这个：

    $wnd.pingApp = $entry(function() {
                       @com.application.PokePingClass::pingApp()();
                   });

    $wnd.pokeApp = $entry(function() {
                       @com.application.PokePingClass::pokeApp()();
                   });

编辑因为我还是错了，忘记了成员的:: 运算符。

【讨论】：

道歉。我更正了函数的 JSNI 语法。我仍在观察同样的问题。我忘了注意我也在使用 jquery-2.2.4.min.js。如果有帮助，它当前不会在无冲突模式下运行。这个问题也在 SmartGWT 论坛中被交叉引用，因为我也在使用该框架。
除了没有被调用的方法，你的浏览器控制台没有其他错误吗？您确定 System.out 的功能与您认为它在浏览器中的功能一样吗？
抱歉回复晚了。我在 SO 上找到了类似的答案。我找不到 OP，但遇到它时会提供链接。出于某种原因，当我向 JSNI 函数添加返回时，它似乎可以工作，并且我看到了 System.out 语句。

【解决方案2】：

我找到了一个类似的帖子，但关键是实际返回 JSNI 函数中的方法调用。之后，一切正常。

public static native void exportStaticMethods() /*-{

    $wnd.pingApp = $entry((function) {
                       return @com.application.PokePingClass::pingApp()();
                   });

    $wnd.pokeApp = $entry((function) {
                       return @com.application.PokePingClass::pokeApp()();
                   });
}-*/

【讨论】：