GWT 聚合物 UiBinder Vaadin 元素 addEventListener 事件 KeysPressedEvent

Question

我正在尝试遵循将 GWT Polymer 与 UiBinder 元素结合使用的基本 hello world 示例。基本 GWT 示例存根生成的代码处理指定输入的键。我认为有一个事件处理程序并检查按下的键会很容易。

我可能犯了一些非常基本的错误。也许有些 import 我没有做或者 Polymer.importHref 我忘了包括。

事件确实触发了，但是当我试图从事件中获取密钥时，我得到了未定义的信息。我猜想使用 "keypress" 因为其他示例使用 "click" 并且它确实触发了但正确的类型是什么？我输出了一些值并得到以下内容：

event.getDetail().getKey() -> 未定义

event.toString() -> [object KeyboardEvent]

nameFieldInput.getValue() ->

nameFieldInput.getInnerHTML() -> 显示在处理当前键之前键入的内容

我还需要知道用于测试的键的字符串值或常量是什么。请告知如何使用事件侦听器进行这项工作。

这是我当前的代码：

Main.ui.xml 文件

    <paper-fab ui:field="sendButton" icon="gavel" title="send rpc" class="sendrpc" />

    <paper-dialog ui:field="sendMsgDialog" entry-animation="fade-in-animation"
        class="dialog" modal="">
        <h2>Send RPC to Server</h2>
        <paper-input ui:field="nameFieldInput" label="Please enter your name:"
            required="" auto-validate="" pattern="[a-zA-Z]*"
            minlength="4" char-counter="" error-message="required input!"/>
        <div class="buttons">
            <paper-button dialog-dismiss="">Cancel</paper-button>
            <paper-button ui:field="sendFieldButton"
                dialog-confirm="">Send</paper-button>
        </div>
    </paper-dialog>

Main.java class

  @UiField PaperInputElement nameFieldInput;

...
   nameFieldInput.addEventListener("keypress",  new EventListener<KeysPressedEvent>() {
      public void handleEvent(KeysPressedEvent event) {
          if (event.getDetail().getKey() == "enter" && event.getDetail().getCtrl() == false) {
              sendMsgDialog.close();
              sendNameToServer();
          }
      }
    });

我使用了以下两个示例文档来达到这一点，它们显示了以下使用侦听器的示例。不幸的是，gwtproject 示例只使用了事件触发器而没有使用事件对象信息..

http://www.gwtproject.org/doc/latest/polymer-tutorial/elements-applogic.html

...

@UiField PaperFabElement addButton;

...

public Main() {
  initWidget(ourUiBinder.createAndBindUi(this));
  addButton.addEventListener("click", new EventListener() {
    @Override
    public void handleEvent(Event event) {
        addItemDialog.open();
    }
  });
}

http://vaadin.github.io/gwt-polymer-elements/demo/#gwt/UiBinderElement

...

@UiField PaperTabsElement paperTabs;

...

paperTabs.addEventListener(IronSelectEvent.NAME, new EventListener<IronSelectEvent>() {
  public void handleEvent(IronSelectEvent event) {
    PaperTabElement tab = (PaperTabElement)event.getDetail().getItem();
    toast.close();
    toast.setText("Tab \"" + tab.getTextContent() + "\" has been selected");
    toast.open();
  }
});

这是一个使用 GWT 标准 Ui 而不是聚合物的示例：

h2g2java.blessedgeek.com/2010/02/tutorial-gwt-rpc-stub-modified-with.html

z.ui.xml 文件

<g:HorizontalPanel ui:field="hPanel">
      <g:Button ui:field="sendButton" text="Send"
       styleName="{style.sendButton}" />
      <g:TextBox ui:field="nameField" text="GWT User" />
    </g:HorizontalPanel>

z.java 文件

  @UiField
  HorizontalPanel hPanel;
  @UiField
  Button sendButton;
  @UiField
  TextBox nameField;

  //Fired when user clicks send Button
  @UiHandler("sendButton")
  public void sendOnClick(ClickEvent event){
    sendNameToServer();
  }

  //Fired when user types in the nameField.
  @UiHandler("nameField")
  public void nameOnKeyUp(KeyUpEvent event){
    if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
      sendNameToServer();
    }
  }

Answer 1

这个怎么样：

nameFieldInput.getPolymerElement().addEventListener("keyup", new EventListener() {
    @Override
    public void handleEvent(Event e) {
        NativeEvent ne = (NativeEvent)e;
        if (ne.getKeyCode() == KeyCodes.KEY_ENTER && !ne.getCtrlKey()) {
            sendMsgDialog.close();
            sendNameToServer();
        }
    }           
});

Answer 2

在@Euclides 回答的帮助下，我能够修复代码并使其正常工作。

这是工作更正后的版本。

Main.java class

sendButton.addEventListener("click", new EventListener() {
  public void handleEvent(Event event) {
    sendMsgDialog.open();
    nameFieldInput.setAutofocus(true);
  }
});

...

nameFieldInput.addEventListener("keyup",  new EventListener<KeysPressedEvent>() {
  public void handleEvent(KeysPressedEvent event) {
    NativeEvent nativeEvent = (NativeEvent)event;
    // CharCode is blank unless you use "keypress" as the event
    // nameFieldInput.setErrorMessage(nativeEvent.getCharCode()+":"+nativeEvent.getKeyCode()+":"+nativeEvent.getAltKey()+":"+nativeEvent.getCtrlKey()+":"+nativeEvent.getMetaKey()+":"+nativeEvent.getShiftKey());
    if (nativeEvent.getKeyCode() == KeyCodes.KEY_ENTER 
        && !nativeEvent.getAltKey() && !nativeEvent.getCtrlKey() 
        && !nativeEvent.getMetaKey() && !nativeEvent.getShiftKey()) {
        sendMsgDialog.close();
        sendNameToServer();
    }
  }
});

GWT 聚合物 UiBinder Vaadin 元素 addEventListener 事件 KeysPressedEvent

GWT Polymer UiBinder Vaadin Elements addEventListener Event KeysPressedEvent

gwt

vaadin

uibinder

polymer

paper-elements

Main.ui.xml 文件

Main.java class

z.ui.xml 文件

z.java 文件