[英]Handle Keyboard events for iron-list in GWT?
I use iron-list from google Polymer. 我使用谷歌聚合物的铁列表 。
<iron-list items="[[data]]" as="item">
<template>
<div tabindex$="[[tabIndex]]">
Name: [[item.name]]
</div>
</template>
</iron-list>
I kwon you can use Polymer.IronA11yKeysBehavior but even with the example I have no idea how I add it in JavaScript to my iron-list. 我知道你可以使用Polymer.IronA11yKeysBehavior但是即使是这个例子,我也不知道如何将它添加到我的铁列表中。
Using Vaadin Polymer GWT lib . 使用Vaadin Polymer GWT lib 。 In this lib you have
在这个lib你有
IronList list;
list.setKeyBindings(???); // don't know how to use this function
list.setKeyEventTarget(????); // don't know how to use this function
When I check the current values of the key bindings I defined a print function to log a variable to the console: 当我检查键绑定的当前值时,我定义了一个print函数来将变量记录到控制台:
public native void print(JavaScriptObject obj) / -{ console.log(obj); public native void print(JavaScriptObject obj)/ - {console.log(obj); }- /;
} - /;
Then I print the current values with: 然后我打印当前值:
print(list.getKeyBindings());
The result is: 结果是:
Object {up: "_didMoveUp", down: "_didMoveDown", enter: "_didEnter"}
It seem that there are some key bindings already defined, but I have no idea where I find the functions _didMoveUp
, _didMoveDown
and _didEnter
. 似乎已经定义了一些键绑定,但我不知道在哪里找到函数
_didMoveUp
, _didMoveDown
和_didEnter
。
When I do 当我做
print(list.getKeyEventTarget());
I get: 我明白了:
<iron-list class="fit x-scope iron-list-0" tabindex="1" style="overflow: auto;">
</iron-list>
How can I set up a handler for capturing keyboard events using Vaadin Polymer GWT lib? 如何使用Vaadin Polymer GWT lib设置捕获键盘事件的处理程序? How can I receive an event when keys like enter are pressed?
当按下诸如enter之类的键时,如何收到事件?
answering this question 回答这个问题
list.setKeyBindings(???);
list.setKeyBindings(???); // don't know how to use this function
//不知道如何使用这个功能
according to 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
根据
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
the keyBindings
should have object
of such structure: keyBindings
应具有这种结构的object
:
{
'up': '_didMoveUp',
'down': '_didMoveDown',
'enter': '_didEnter'
}
to construct such object, you can use following: 构造这样的对象,你可以使用以下:
new JSONObject() {{
put("up", new JSONString("_didMoveUp"));
put("down", new JSONString("_didMoveDown"));
put("enter", new JSONString("_didEnter"));
}}.getJavaScriptObject();
I have no idea where I find the functions _didMoveUp, _didMoveDown and _didEnter
我不知道在哪里找到函数_didMoveUp,_didMoveDown和_didEnter
they can be found here: 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
它们可以在这里找到:
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
here's the extract 这是摘录
_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);
}
How can I set up a handler for capturing keyboard events using Vaadin Polymer GWT lib?
如何使用Vaadin Polymer GWT lib设置捕获键盘事件的处理程序?
How can I receive an event when keys like enter are pressed?
当按下诸如enter之类的键时,如何收到事件?
I could find this Polymer convention : properties not intended for external use should be prefixed with an underscore. 我可以找到这个Polymer 约定 :不打算外部使用的属性应该以下划线为前缀。
That's the reason why they are not exposed in JsType
IronListElement
. 这就是为什么它们没有在
JsType
IronListElement
中JsType
IronListElement
。 You can change this function using JSNI
. 您可以使用
JSNI
更改此功能。 I think that smth like this: 我觉得像这样:
private native static void changeDidMoveUp(IronListElement ironList) /*-{
var _old = ironList._didMoveUp;
ironList._didMoveUp = function() {
console.log('tracking');
_old();
}
}-*/;
or add a new one 或添加一个新的
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");
}
should work. 应该管用。 You can get element from
IronList#getPolymerElement()
. 您可以从
IronList#getPolymerElement()
获取元素。
keep in mind, that I haven't tested this code :) 请记住,我还没有测试过这段代码:)
If you want to add key event custom element (I dont know if I understand correct the question) You have to implement the Polymer.IronA11yKeysBehavior behavior and then to use the keyBindings
prototype property to express what combination of keys will trigger the event to fire. 如果你想添加关键事件自定义元素(我不知道我是否理解正确的问题)你必须实现Polymer.IronA11yKeysBehavior行为,然后使用
keyBindings
prototype属性来表示什么组合的键将触发事件触发。
<!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>
I hope that answer your question how to listen to keys. 我希望能回答你的问题,如何听取密钥。 the _handler function receive an event so you can look at the detail of the event and get the target (if something was in focus).
_handler函数接收一个事件,以便您可以查看事件的详细信息并获取目标(如果某些事情是焦点)。
event.detail.target
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.