将 ClickHandler 与本机 Javascript 对象一起使用？答案

【问题标题】：Use ClickHandler with a native Javascript object?将 ClickHandler 与本机 Javascript 对象一起使用？
【发布时间】：2011-07-21 05:26:44
【问题描述】：

在 Javascript 中，我正在制作 SVG 形状并向其添加点击处理程序，如下所示：

  var rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
  rect.addEventListener('click', myClickHandler, false);

这很好用。我正在尝试在 GWT 中创建一个覆盖 Rect 类。如果可能的话，我想简单地做这样的事情：

public class SVGRect extends JavaScriptObject {

    public native void addClickHandler(ClickHandler handler) /*-{
        addEventListener('click', handler, false);
    }-*/;
}

这样，我可以将“普通”GWT 处理程序传递给此类，并从外部将其用作任何其他普通 GWT UI 元素。我不确定如何将 ClickHandler 对象连接到该对象的本机 javascript 实现？

谢谢

【问题讨论】：

标签： java gwt event-handling

【解决方案1】：

因为你需要一个 ClickEvent 来传递给 ClickHandler.onClick 并且从 JavaScript 获取它会带来一个问题 (AFAICT) - 我会采用一种稍微不同的、更“通用”的方法：

创建一个简单的回调接口：

public interface Callback {
    void execute();
}

然后你可以直接传递它并像这样调用它：

public native void addClickHandler(Callback callback) /*-{
        addEventListener('click', function() {
           callback.@path.to.your.package.Callback::execute()();
        }, false);
}-*/;

或者创建一个中间步骤：

public void addClickHandler(Callback callback) {
    _addClickHandler(getCallback(callback));
}

private native void _addClickHandler(JavaScriptObject callback) /*-{
     addEventListener('click', callback, false);
}-*/;

// This can be moved to a better place
private native static JavaScriptObject getCallback(Callback callback) /*-{
    return function()
    {
        callback.@path.to.your.package.Callback::execute()();
    };
}-*/;

当然，你可以这样使用它：

SVGRect svg = getMeSVGRect();
svg.addClickHandler(new Callback() {
    @Override
    public void execute() {
        // Do some stuff
    }
});

就我个人而言，我更喜欢第二种解决方案——虽然它的代码更多，但我喜欢将我的原生/JSNI 方法保持私有（除非它是覆盖对象或类似的东西）并且代码更具可读性且不易出错（不需要使用时髦的语法从本机/JSNI 代码中调用 Java 函数）。

【讨论】：