GWT Polymer UiBinder Elements addEventListener Event KeysPressedEvent

Flow
1

I’m trying to follow the basic hello world examples that use GWT Polymer with the UiBinder Elements.
The basic GWT example stub generated code handles the key to specify input.
I thought it would be easy to have an event handler and check the key that was pressed.

I’m probably doing something very basic wrong.
Maybe some
import
 I’m not doing or
Polymer.importHref
 I forgot to include.

The event does trigger but I get undefined when I attempt to get the key from the event.
I guessed using “keypress” as the other examples use “click” and it did trigger but what is the right type to use?
I outputed some of the values and get the following:

event.getDetail().getKey()
 → undefined

event.toString()
 → [object KeyboardEvent]


nameFieldInput.getValue()
 → <paper-input-container class

nameFieldInput.getInnerHTML()
 → show what was typed before processing the current key

I also need to know what the string value or Constant to use for the key to do the test.
Please advise how to make this work using the event listener.

Here is my current code:

Main.ui.xml file
----------
        <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();
          }
      }
    });

I used the two following examples documents to get to this point and they show the following examples of using the listener. Unfortunately the gwtproject example only uses the event trigger and does not use the event object information…

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

[code]
…

@UiField PaperTabsElement paperTabs;

…

paperTabs.addEventListener(IronSelectEvent.NAME, new EventListener() {
public void handleEvent(IronSelectEvent event) {
PaperTabElement tab = (PaperTabElement)event.getDetail().getItem();
toast.close();
toast.setText(“Tab "” + tab.getTextContent() + “" has been selected”);
toast.open();
}
});
[/code]Here is an example that uses GWT standard Ui instead of polymer from

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

z.ui.xml file
--------
<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 file
---------
  @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();
    }
  }
2

With the help from stackoverflow I have the answer.
I’ll post it hear for those with the same issue.

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

}
});