Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

Оглавление

События и обработчики

Событие — сообщение о том, что пользователь что-то сделал: нажал кнопку, изменил поле, нажал клавишу. Обработчик (listener) — ваш код, который Vaadin вызывает на сервере в ответ. Обработчики обычно пишут лямбдами прямо в конструкторе экрана.

Нажатие кнопки

Обработчик можно передать в конструктор кнопки или добавить позже методом addClickListener:

// src/main/java/com/example/blog/views/DraftView.java (фрагмент конструктора)
Button publish = new Button("Опубликовать");
publish.addClickListener(event -> {
    event.getSource().setEnabled(false);
    Notification.show("Пост отправлен на публикацию");
});

После нажатия кнопка становится серой и неактивной, а снизу появляется уведомление. event.getSource() возвращает кнопку, которую нажали.

Изменение значения

У каждого поля есть addValueChangeListener. Сделаем счётчик символов под полем текста:

// 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("Текст");
        Span counter = new Span("Символов: 0");
 
        content.setValueChangeMode(ValueChangeMode.EAGER);
        content.addValueChangeListener(event ->
                counter.setText("Символов: " + event.getValue().length()));
 
        add(content, counter);
    }
}

Пока пользователь печатает, надпись под полем меняется: «Символов: 5», «Символов: 6» и так далее. У события есть getValue() — новое значение и getOldValue() — прежнее.

Когда поле сообщает об изменении

Режим ValueChangeModeКогда событие уходит на сервер
ON_CHANGEПользователь ушёл из поля или нажал Enter (по умолчанию)
EAGERПосле каждого нажатия клавиши
LAZYКогда пользователь сделал паузу в наборе (по умолчанию 400 мс)
TIMEOUTНе чаще одного раза за заданный интервал

Для поиска по таблице обычно выбирают LAZY: сервер не получает запрос на каждую букву.

Горячие клавиши

Кнопку можно нажимать с клавиатуры:

// src/main/java/com/example/blog/views/DraftView.java (фрагмент конструктора)
Button save = new Button("Сохранить", event -> Notification.show("Сохранено"));
save.addClickShortcut(Key.ENTER);

Теперь Enter в любом месте экрана срабатывает как нажатие «Сохранить». Нужен импорт com.vaadin.flow.component.Key.

Отписка от события

Каждый add...Listener возвращает объект Registration. Вызов remove() отключает обработчик:

// src/main/java/com/example/blog/views/DraftView.java (фрагмент конструктора)
Registration registration = content.addValueChangeListener(event -> Notification.show("Изменено"));
registration.remove();

Это нужно редко, чаще — когда подписываетесь на что-то, что живёт дольше экрана. Импорт: com.vaadin.flow.shared.Registration.

Частая ошибка

Счётчик не обновляется во время набора, а меняется только при уходе из поля. Причина — режим по умолчанию ON_CHANGE. Добавьте setValueChangeMode(ValueChangeMode.EAGER) или LAZY, если хотите реагировать на ввод сразу.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.