Events and listeners

An event is a message that the user did something: clicked a button, changed a field, pressed a key. A listener is your code that Vaadin calls on the server in response. Listeners are usually written as lambdas right in the view constructor.

A button click

You can pass the listener to the button constructor or add it later with addClickListener:

// src/main/java/com/example/blog/views/DraftView.java (part of the constructor)
Button publish = new Button("Publish");
publish.addClickListener(event -> {
    event.getSource().setEnabled(false);
    Notification.show("The post was sent for publishing");
});

After a click the button turns grey and inactive, and a notification appears at the bottom. event.getSource() returns the button that was clicked.

A value change

Every field has addValueChangeListener. Let us add a character counter under the text field:

// src/main/java/com/example/blog/views/DraftView.java
package com.example.blog.views;
 
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.data.value.ValueChangeMode;
import com.vaadin.flow.router.Route;
 
@Route("draft")
public class DraftView extends VerticalLayout {
 
    public DraftView() {
        TextArea content = new TextArea("Text");
        Span counter = new Span("Characters: 0");
 
        content.setValueChangeMode(ValueChangeMode.EAGER);
        content.addValueChangeListener(event ->
                counter.setText("Characters: " + event.getValue().length()));
 
        add(content, counter);
    }
}

While the user types, the label below the field changes: "Characters: 5", "Characters: 6" and so on. The event has getValue() with the new value and getOldValue() with the previous one.

When a field reports a change

Grid search usually uses LAZY: the server does not get a request for every letter.

Keyboard shortcuts

A button can be pressed from the keyboard:

// src/main/java/com/example/blog/views/DraftView.java (part of the constructor)
Button save = new Button("Save", event -> Notification.show("Saved"));
save.addClickShortcut(Key.ENTER);

Now Enter anywhere on the screen works as a click on "Save". You need the import com.vaadin.flow.component.Key.

Removing a listener

Every add...Listener returns a Registration object. Calling remove() turns the listener off:

// src/main/java/com/example/blog/views/DraftView.java (part of the constructor)
Registration registration = content.addValueChangeListener(event -> Notification.show("Changed"));
registration.remove();

You rarely need this, mostly when you subscribe to something that lives longer than the screen. Import: com.vaadin.flow.shared.Registration.

Common mistake

The counter does not update while typing and changes only when the user leaves the field. The reason is the default ON_CHANGE mode. Add setValueChangeMode(ValueChangeMode.EAGER), or LAZY, if you want to react to input right away.