Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
GWT Polymer UiBinder Elements addEventListener Event KeysPressedEvent
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 <enter> 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 <enter> 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
...
@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();
}
});
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();
}
}
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();
}
}
});