Retrieving User Input

To make a fully functional application, you need to be able to accept input from the user. You can add a text input field to let the user enter her name as follows:

Element textInput = ElementFactory.createInput();
textInput.setAttribute("placeholder", "Please enter your name");

To get the value from the input to the server, you could use the event data feature described in the event listener tutorial but you can also ask the client to update the server side input element every time the value changes in the browser:

textInput.synchronizeProperty("value","change");

Any changes in the listed properties will be synchronized to the server when any one of the listed events occur in the browser.

The synchronized properties can be retrieved using the Element.getProperty API so a button click listener looks like:

button.addEventListener("click", e -> {
    String responseText = "Hello " + textInput.getProperty("value");
    Element response = ElementFactory.createDiv(responseText);
    getElement().appendChild(response);
});
Note
TextInputs’s "value" property may return null sometimes, for instance if the property was not set before and the user has not typed any text into the field.