CODEWITHSUNDEEP
gwtpolymervaadinuibinderpaper-elements
techphd
techphd

Reputation: 31

GWT Polymer UiBinder Vaadin 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 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() ->

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

...

@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:

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

Upvotes: 0

Views: 142

Answers (2)

techphd
techphd

Reputation: 31

With the help of @Euclides answer I was able to fix the code and get it working.

Here is the working corrected version.

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

Upvotes: 0

Euclides
Euclides

Reputation: 415

What about this:

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

Upvotes: 0

Related Questions