处理GWT中铁列表的键盘事件？

Question

我使用谷歌聚合物的铁列表.

<iron-list items="[[data]]" as="item">
  <template>
    <div tabindex$="[[tabIndex]]">
      Name: [[item.name]]
    </div>
  </template>
</iron-list>

我知道你可以使用Polymer.IronA11yKeysBehavior但是即使是这个例子,我也不知道如何将它添加到我的铁列表中.

使用Vaadin Polymer GWT lib.在这个lib你有

IronList list; 
list.setKeyBindings(???);  // don't know how to use this function
list.setKeyEventTarget(????);  // don't know how to use this function

当我检查键绑定的当前值时,我定义了一个print函数来将变量记录到控制台:

public native void print(JavaScriptObject obj)/ - {console.log(obj); } - /;

然后我打印当前值:

print(list.getKeyBindings());

结果是:

Object {up: "_didMoveUp", down: "_didMoveDown", enter: "_didEnter"}

似乎已经定义了一些键绑定,但我不知道在哪里找到这些函数_didMoveUp,_didMoveDown并且_didEnter.

当我做

print(list.getKeyEventTarget());

我明白了:

<iron-list class="fit x-scope iron-list-0" tabindex="1" style="overflow: auto;">
</iron-list>

如何使用Vaadin Polymer GWT lib设置捕获键盘事件的处理程序？当按下诸如enter之类的键时,如何收到事件？

Answer 1

回答这个问题

list.setKeyBindings(???); // 不知道如何使用这个功能

根据com/vaadin/polymer/vaadin-gwt-polymer-elements/1.2.3.1-SNAPSHOT/vaadin-gwt-polymer-elements-1.2.3.1-20160201.114641-2.jar!/com/vaadin/polymer/public/bower_components/iron-list/iron-list.html:292

这样的结构应该keyBindings有：object

    {
      'up': '_didMoveUp',
      'down': '_didMoveDown',
      'enter': '_didEnter'
    }

要构造这样的对象，您可以使用以下内容：

        new JSONObject() {{
            put("up", new JSONString("_didMoveUp"));
            put("down", new JSONString("_didMoveDown"));
            put("enter", new JSONString("_didEnter"));
        }}.getJavaScriptObject();

我不知道在哪里可以找到函数 _didMoveUp、_didMoveDown 和 _didEnter

它们可以在这里找到：com/vaadin/polymer/vaadin-gwt-polymer-elements/1.2.3.1-SNAPSHOT/vaadin-gwt-polymer-elements-1.2.3.1-20160201.114641-2.jar!/com/vaadin/polymer/public/bower_components/iron-list/iron-list.html:1504

这是摘录

    _didMoveUp: function() {
      this._focusPhysicalItem(Math.max(0, this._focusedIndex - 1));
    },

    _didMoveDown: function() {
      this._focusPhysicalItem(Math.min(this._virtualCount, this._focusedIndex + 1));
    },

    _didEnter: function(e) {
      // focus the currently focused physical item
      this._focusPhysicalItem(this._focusedIndex);
      // toggle selection
      this._selectionHandler(e.detail.keyboardEvent);
    }

如何使用 Vaadin Polymer GWT 库设置用于捕获键盘事件的处理程序？

当按下 Enter 等键时，如何接收事件？

我可以找到这个聚合物约定：不适合外部使用的属性应该以下划线为前缀。

这就是他们没有暴露在外的原因JsType IronListElement。您可以使用 更改此功能JSNI。我认为是这样的：

    private native static void changeDidMoveUp(IronListElement ironList) /*-{
        var _old = ironList._didMoveUp;
        ironList._didMoveUp = function() {
            console.log('tracking');
            _old();
        }
    }-*/;

或添加一个新的

    IronListElement element ...

    com.vaadin.polymer.elemental.Function<Void, Event> func = event -> {
        logger.debug(event.detail);
        ...
        return null;
    };

    private native static void addUpdatePressed(IronListElement ironList, Function func) /*-{
        ironList._updatePressed = func;
    }-*/;

    {
        addUpdatePressed(element, func);
        element.addOwnKeyBinding("a", "_updatePressed");
        element.addOwnKeyBinding("shift+a alt+a", "_updatePressed");
        element.addOwnKeyBinding("shift+tab shift+space", "_updatePressed");
    }

应该管用。您可以从中获取元素IronList#getPolymerElement()。

请记住，我还没有测试过这段代码:)