Question

我有一个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错误是什么意思？

Answer 1

我认为问题在于在Handler中使用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");
      }
    }

Answer 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));
}
}

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

2 个答案: