Обработать события клавиатуры для железного списка в GWT?

Я использую iron-list от google Polymer.

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

Я могу использовать Polymer.IronA11yKeysBehavior, но даже с примером Я понятия не имею, как добавить его в JavaScript в свой железный список.

Использование Vaadin Polymer GWT lib. В этой папке вы

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

Когда я проверяю текущие значения привязок клавиш, я определил функцию печати для регистрации переменной на консоли:

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? Как я могу получить событие, когда нажаты клавиши типа ввода?

Ответ 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 Полимер GWT lib?

Как я могу получить событие, когда такие ключи, как ввод, нажимается?

Я мог бы найти этот Полимер соглашение: свойства, не предназначенные для внешнего использования, должны иметь префикс с подчеркиванием.

Это причина, по которой они не отображаются в JsType IronListElement. Вы можете изменить эту функцию, используя JSNI. Я думаю, что smth вот так:

    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().

Имейте в виду, что я не тестировал этот код:)

Ответ 2

Если вы хотите добавить пользовательский элемент ключевого события (я не знаю, понял ли я правильный вопрос) Вам необходимо реализовать поведение Polymer.IronA11yKeysBehavior, а затем использовать свойство прототипа keyBindings, чтобы выразить, какая комбинация клавиш вызовет событие для запуска.

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <base href="#" onclick="location.href='https://polygit.org/components/'; return false;">
  <script src="webcomponentsjs/webcomponents.js"></script>
  
  <link rel="import" href="iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
  <link rel="import" href="iron-list/iron-list.html">
<body>
  
 <dom-module id="x-elem">

  <template>  
       <iron-list items="[[data]]" as="item">
    <template>
      <div>
        pressed: [[item]]
      </div>
    </template>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'x-elem',
    behaviors: [
      Polymer.IronA11yKeysBehavior
    ],
    properties: {
      preventDefault:{type:Boolean,value:true},
      data:{value:[]},
      keyEventTarget: {
        type: Object,
        value: function() {
          return document.body;
        }
      }
    },
    
    keyBindings: {
      '* pageup pagedown left right down up home end space enter @ ~ " $ ? ! \\ + : # backspace': '_handler',
      'a': '_handler',
      'shift+a alt+a': '_handler',
      'shift+tab shift+space': '_handler'
    },
    _handler: function(event) {
      if (this.preventDefault) {   // try to set true/false and press shit+a and press up or down
        event.preventDefault();
      }
      console.log(event.detail.combo);
      this.push('data',event.detail.combo);
      
    }
  });
  </script>
  <x-elem></x-elem>
</body>

</html>