Gestire gli eventi della tastiera per la lista di ferro in GWT?

Question

Io uso iron-list da google Polymer.

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

Ho Kwon è possibile utilizzare Polymer.IronA11yKeysBehavior, ma anche con la example non ho idea di come lo aggiungo in JavaScript per il mio ferro-list.

Utilizzo di Vaadin Polymer GWT lib. In questo lib avete

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

Quando controllo i valori attuali delle combinazioni di tasti ho definito una funzione di stampa per registrare una variabile alla console:

void print nativa pubblica (JavaScriptObject obj)/- { console.log (obj); } - /;

Poi stampare i valori correnti con:

print(list.getKeyBindings()); 

Il risultato è:

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

sembrare che ci sono alcune combinazioni di tasti già definite, ma non ho idea di dove trovo il funzioni _didMoveUp, _didMoveDown e _didEnter.

Quando faccio

print(list.getKeyEventTarget()); 

ottengo:

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

Come posso impostare un gestore per catturare gli eventi della tastiera utilizzando Vaadin Polymer GWT lib? Come posso ricevere un evento quando vengono premuti i tasti come enter?

Answer 1

rispondere a questa domanda

list.setKeyBindings (???); // non so come utilizzare questa funzione

in base alle 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

il keyBindings dovrebbe avere object di tale struttura:

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

per costruire tale oggetto, è possibile utilizzare i seguenti:

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

Non ho idea di dove trovo le funzioni _didMoveUp, _didMoveDown e _didEnter

possono essere trovati qui: 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

ecco l'estratto

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

Come posso configurare un gestore per catturare eventi di tastiera usando Vaadin lib Polymer GWT?

Come posso ricevere un evento quando i tasti come enter sono premuti?

Sono riuscito a trovare questo Polimero convention: le proprietà non destinate all'uso esterno devono essere precedute da un trattino di sottolineatura.

Questo è il motivo per cui non sono esposti in JsTypeIronListElement. È possibile modificare questa funzione utilizzando JSNI. Penso che si dovrebbe occupare in questo modo:

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

o aggiungerne uno nuovo

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

dovrebbe funzionare. È possibile ottenere elementi da IronList#getPolymerElement().

tenere a mente, che non ho testato questo codice :)

Answer 2

Se si desidera aggiungere chiave elemento evento personalizzato (non so se ho capito correggere il problema) Bisogna implementare il comportamento Polymer.IronA11yKeysBehavior e quindi di utilizzare la proprietà keyBindings prototipo di esprimere quale combinazione di tasti sarà innesca l'evento al fuoco.

<!DOCTYPE html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <base href="https://polygit.org/components/"> 
 
    <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>

spero che risponde alla tua domanda come ascoltare le chiavi. la funzione _handler riceve un evento in modo da poter guardare i dettagli dell'evento e ottenere l'obiettivo (se qualcosa era a fuoco).

event.detail.target