Компоненты: кнопки, поля, уведомления

Компонент — готовый элемент интерфейса: кнопка, поле ввода, флажок, таблица. В Vaadin каждый компонент — Java-класс. Вы создаёте объект через new, настраиваете его методами и добавляете на экран через add. Внешний вид и поведение в браузере компонент берёт на себя.

Поле и кнопка

Сделаем экран быстрого черновика: пользователь вводит заголовок и нажимает кнопку.

// src/main/java/com/example/blog/views/DraftView.java
package com.example.blog.views;
 
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
 
@Route("draft")
public class DraftView extends VerticalLayout {
 
    public DraftView() {
        TextField title = new TextField("Заголовок");
        Button create = new Button("Создать черновик",
                event -> Notification.show("Черновик создан: " + title.getValue()));
 
        add(title, create);
    }
}

Откройте http://localhost:8080/draft, введите «Мой первый пост» и нажмите кнопку. Внизу экрана на несколько секунд появится уведомление «Черновик создан: Мой первый пост».

Второй аргумент Button — обработчик нажатия. Он выполняется на сервере, поэтому title.getValue() сразу возвращает то, что пользователь набрал в браузере.

Настройка компонентов

У полей и кнопок много полезных методов:

// src/main/java/com/example/blog/views/DraftView.java (фрагмент конструктора)
title.setPlaceholder("Например, Итоги месяца");
title.setClearButtonVisible(true);
title.setMaxLength(120);
title.setWidth("400px");
 
create.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
create.setIcon(VaadinIcon.PLUS.create());

Поле получает подсказку внутри, крестик очистки и ограничение длины, а кнопка становится синей основной кнопкой с иконкой «плюс». Для фрагмента нужны импорты com.vaadin.flow.component.button.ButtonVariant и com.vaadin.flow.component.icon.VaadinIcon.

Часто используемые компоненты

У всех полей одинаковые методы getValue() и setValue(...), а подпись передаётся в конструктор.

Уведомления

Notification.show(текст) — самый короткий способ что-то сообщить пользователю. Для настройки создайте объект:

// src/main/java/com/example/blog/views/DraftView.java (фрагмент обработчика)
Notification note = Notification.show("Черновик сохранён", 3000, Notification.Position.TOP_CENTER);
note.addThemeVariants(NotificationVariant.LUMO_SUCCESS);

Уведомление появится вверху по центру, будет зелёным и исчезнет через 3 секунды.

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

Компонент создан, но не виден на странице:

// src/main/java/com/example/blog/views/DraftView.java (фрагмент)
TextField author = new TextField("Автор");
// забыли add(author);

Ошибки нет, просто поле никуда не добавлено. Компонент появляется в браузере только после add(...) в экран или в контейнер, который уже лежит на экране.