通过 GWT JSNI 传递 Java 对象时出错答案

【问题标题】：Error when passing Java object through GWT JSNI通过 GWT JSNI 传递 Java 对象时出错
【发布时间】：2016-05-10 13:35:05
【问题描述】：

我有一个 GWT 项目，它使用 Google JavaScript Chart API 来显示 Java 对象的图表。我将我的 Java 对象转换为 JSON 并通过 JSNI 将它们传递给 JavaScript 图表 API，效果很好。

但现在我想更进一步，走另一条路：当我在图表内部单击时（我可以通过 JavaScript 侦听器检测到），我想将该 Java 对象发送回我的 Java 代码。

我想我已经完成了 JSNI 指南中的所有内容，但是当我单击图表时，我在 JavaScript 控制台中收到一个错误，我什至不知道如何阅读：

SCRIPT5022: Exception thrown and not caught
File: eval code (21), Line: 5, Column: 7

__gwt_javaInvokes[2] =
  function(thisObj, dispId,p0,p1) {
    var result = __static(dispId, thisObj,p0,p1);
    if (result[0]) {
      throw result[1];
    } else {
      return result[1];
    }
  } function(thisObj, dispId,p0,p1) { var result = __static(dispId, thisObj,p0,p1); if (result[0]) { throw result[1]; } else { return result[1]; } }

这是我的 html 页面：

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="GwtTest.css">
    <title>GWT Test</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" language="javascript" src="gwttest/gwttest.nocache.js"></script>
  </head>
  <body>

  </body>
</html>

唯一有趣的是我添加了 Google Chart API 脚本标签。

这是我试图从 Java 传递到 JavaScript，然后返回到 Java 的 Java 对象：

package com.example.client;

public class ChartData {
    public String title = "test";

    public String labelOne = "thingOne";
    public String labelTwo = "thingTwo";
    public String labelThree = "thingThree";

    public int valueOne = 100;
    public int valueTwo = 200;
    public int valueThree = 300;
}

最后，这是我的 GWT 客户端类：

package com.example.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.core.client.JsonUtils;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class GwtTest implements EntryPoint {

    public void onModuleLoad() {

        RootLayoutPanel rootPanel = RootLayoutPanel.get();

        SimplePanel chartPanel = new SimplePanel();
        chartPanel.getElement().setId("chartDiv");
        chartPanel.setSize("500px", "500px");

        Button button = new Button("Click Me");
        button.addClickHandler(new ClickHandler(){

            @Override
            public void onClick(ClickEvent event) {
                ChartData chartData = new ChartData();
                String json = getChartJson(chartData);
                JsArray<?> chartArrayData = JsonUtils.safeEval(json);
                drawChart(chartArrayData, chartData);
            }
        });

        VerticalPanel vp = new VerticalPanel();
        vp.add(button);
        vp.add(chartPanel);

        rootPanel.add(vp);

        loadChartLibrary();
    }

    private String getChartJson(ChartData chartData){
        String json = "[";
        json += "[\"time\", \"" + chartData.title + "\"]";

        json += ",";
        json += "[\"" + chartData.labelOne + "\"," + chartData.valueOne + "]";

        json += ",";
        json += "[\"" + chartData.labelTwo + "\"," + chartData.valueTwo + "]";

        json += ",";
        json += "[\"" + chartData.labelThree + "\"," + chartData.valueThree + "]";

        json += "]";
        return json;
    }

    private native void loadChartLibrary()/*-{
        $wnd.google.charts.load('current', {packages: ['corechart']});
    }-*/;

    private native void drawChart(JsArray<?> dataArray, ChartData chartData)/*-{
        var data = $wnd.google.visualization.arrayToDataTable(dataArray);
        var chart = new $wnd.google.visualization.ColumnChart($wnd.document.getElementById('chartDiv'));
        chart.draw(data, null);

        $wnd.google.visualization.events.addListener(chart, 'select', selectHandler);

        function selectHandler(e) {
          var selectionArray = chart.getSelection();
          if(selectionArray.length == 0){

          }
          else{
            var row = selectionArray[0].row;
            console.log(row);
            this.@com.example.client.GwtTest::printChartData(Lcom/example/client/ChartData;I)(chartData, row);
            console.log("here");
          }
        }

    }-*/;

    public void printChartData(ChartData chartData, int i){
        System.out.println(i + ": " + chartData.valueThree);
    }
}

如果您运行此代码，您应该会看到一个显示 Click Me 的按钮。单击该按钮以显示图表。然后单击图表中的条形。我希望这会在 printChartData() 函数中触发我的 Java 代码，但我在 JavaScript 控制台中收到错误。

我已将问题缩小到这段代码：

var row = selectionArray[0].row;
console.log(row);
this.@com.example.client.GwtTest::printChartData(Lcom/example/client/ChartData;I)(chartData, row);
console.log("here");

该行已正确打印到控制台，因此我知道我的 JavaScript 正在运行。但是"here" 永远不会打印到控制台，所以我知道错误在我的 JSNI 行中。

我的 JSNI 设置是否遗漏了什么？ JavaScript 错误是什么意思？

【问题讨论】：

标签： javascript java gwt google-visualization jsni

【解决方案1】：

我认为问题在于在处理程序中使用this。您可能期望 this 是 GwtTest 类的实例，但在 Handler 内部使用它指向处理程序。这就是对this.@com.example.client.GwtTest::printChartData 的调用失败的原因。

您可以在处理程序外部声明一个变量并分配this，然后在处理程序内部使用它。

试试：

var instance = this;
function selectHandler(e) {
      var selectionArray = chart.getSelection();
      if(selectionArray.length == 0){

      }
      else{
        var row = selectionArray[0].row;
        console.log(row);
        instance.@com.example.client.GwtTest::printChartData(Lcom/example/client/ChartData;I)(chartData, row);
        console.log("here");
      }
    }

【讨论】：

【解决方案2】：

ChartData 没有扩展JavaScriptObject，所以当你调用时它会抛出一个ClassCastException
printChartData。
亚当也是对的。在处理程序中使用 this 不起作用...
这是一个示例，它是如何工作的，只需覆盖整个 GwtTest 类..

public class GwtTest implements EntryPoint {

private ChartData chartData;

public void onModuleLoad() {
    RootLayoutPanel rootPanel = RootLayoutPanel.get();
    SimplePanel chartPanel = new SimplePanel();
    chartPanel.getElement().setId("chartDiv");
    chartPanel.setSize("500px", "500px");
    Button button = new Button("Click Me");
    button.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            chartData= ChartData.createJSO("Time", "Time");
            for (int i = 0; i < 4; i++) {
                RowData row = RowData.createJSO("label" + i, 100 + i);
                chartData.add(row);
            }
            drawChart(chartData);
        }
    });
    VerticalPanel vp = new VerticalPanel();
    vp.add(button);
    vp.add(chartPanel);
    rootPanel.add(vp);
    loadChartLibrary();
}

public static class ChartData extends JavaScriptObject {
    protected ChartData() {
    }

    public static native ChartData createJSO(String chartname, String rowTypeDescriton) /*-{
        return [ [ chartname, rowTypeDescriton ] ];
    }-*/;

    public final native RowData get(int index) /*-{
        return this[index + 1];
    }-*/;

    public final native void add(RowData data) /*-{
        this[this.length] = data;
    }-*/;

}

public static class RowData extends JavaScriptObject {

    protected RowData() {
    }

    public static native RowData createJSO(String label, int value) /*-{
        return [ label, value ];
    }-*/;

    public final native String getLabelOne() /*-{
        return this[0];
    }-*/;

    public final native int getValueOne() /*-{
        return this[1];
    }-*/;

}

private native void loadChartLibrary()/*-{
    $wnd.google.charts.load('current', {
        packages : [ 'corechart' ]
    });
}-*/;

private native void drawChart(ChartData dataArray)/*-{
    var self = this;
    var data = $wnd.google.visualization.arrayToDataTable(dataArray);
    var chart = new $wnd.google.visualization.ColumnChart($wnd.document
            .getElementById('chartDiv'));
    chart.draw(data, null);
    $wnd.google.visualization.events.addListener(chart, 'select',
            selectHandler);
    function selectHandler(e) {
        var selection = chart.getSelection();
        for (var i = 0; i < selection.length; i++) {
            var item = selection[i];
            if (item.row != null) {
                self.@com.example.client.GwtTest::printChartData(I)(item.row);
            } 
        }
    }

}-*/;

public void printChartData(int row) {
    System.out.println(chartData.get(row));
}
}

【讨论】：

我不认为这是正确的。 ChartData 不需要 需要扩展JavaScriptObject，而我没有得到ClassCastException。此外，这违背了我的问题的重点，因为我需要 chartData 来检查我的本机 JavaScript 代码，而且我不能像你所做的那样使用类级变量。感谢您的回复，但这个答案是不正确的。亚当的回答似乎解决了问题。
如果你想将一个对象从一个jsni方法传递给java，那不是原始的，那么它需要扩展JavaScriptObject。但是你是对的，在这种情况下 ChartData 不需要扩展 JavaScriptObject，因为你只需要行的索引......但是使用 getChartJson 创建 JSON 字符串然后使用 JSONUtils 不是很优雅。无论如何，如果您使用 instance.@com.example.client.GwtTest::printChartData(Lcom/example/client/ChartData;I)(chartData, row);，您将 ChartData 从 JSNI 方法传递给 Java 方法并抛出 ClassCastException，因为它没有扩展 JavaScriptObject
不，我根本没有得到那个例外。请注意，该对象源自 Java 代码，而不是 JavaScript 代码。所以我可以在不扩展 JavaScriptObject 的情况下很好地通过本机代码传递它。您是否尝试过运行亚当答案中的代码？它工作正常，不会抛出任何异常。
嗯，很奇怪。是的，我试过了，它奏效了。无论如何，你现在得到了解决方案