Диалоги: Dialog и ConfirmDialog
Диалог — окно поверх экрана. Пока оно открыто, остальной экран недоступен, поэтому диалоги используют для коротких действий: посмотреть детали, подтвердить удаление, заполнить пару полей. В Vaadin есть два класса: Dialog — пустое окно, куда можно положить любые компоненты, и ConfirmDialog — готовое окно «Вы уверены?» с кнопками.
Кнопки в строках таблицы
Добавим в таблицу статей колонку с двумя кнопками-иконками: просмотр и удаление.
// src/main/java/com/example/blog/views/PostListView.java (фрагмент конструктора)
grid.addComponentColumn(this::actions).setHeader("Действия").setAutoWidth(true);// src/main/java/com/example/blog/views/PostListView.java (новый метод)
private HorizontalLayout actions(Post post) {
Button preview = new Button(VaadinIcon.EYE.create(), event -> preview(post));
Button delete = new Button(VaadinIcon.TRASH.create(), event -> confirmDelete(post));
preview.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
delete.addThemeVariants(ButtonVariant.LUMO_TERTIARY, ButtonVariant.LUMO_ERROR);
return new HorizontalLayout(preview, delete);
}В каждой строке появляются «глаз» и красная «корзина». Вариант LUMO_TERTIARY убирает у кнопки фон, остаётся только иконка.
Окно просмотра
// src/main/java/com/example/blog/views/PostListView.java (новый метод)
private void preview(Post post) {
Dialog dialog = new Dialog();
dialog.setHeaderTitle(post.getTitle());
dialog.add(new Paragraph(post.getContent() == null ? "Текста пока нет" : post.getContent()));
dialog.getFooter().add(new Button("Закрыть", event -> dialog.close()));
dialog.open();
}Нажмите «глаз» у статьи «Привет, Vaadin»: по центру откроется окно с заголовком статьи, её текстом и кнопкой «Закрыть» внизу. Окно закрывается и по Esc или клику мимо него.
Метод Dialog | Что делает |
|---|---|
setHeaderTitle("...") | Заголовок окна |
add(...) | Содержимое |
getFooter().add(...) | Кнопки внизу |
open(), close() | Показать и закрыть |
setCloseOnEsc(false) | Не закрывать по Esc |
setModal(false) | Не блокировать экран под окном |
Подтверждение удаления
// src/main/java/com/example/blog/views/PostListView.java (новый метод)
private void confirmDelete(Post post) {
ConfirmDialog dialog = new ConfirmDialog();
dialog.setHeader("Удалить статью?");
dialog.setText("Статья будет удалена навсегда: " + post.getTitle());
dialog.setCancelable(true);
dialog.setCancelText("Отмена");
dialog.setConfirmText("Удалить");
dialog.setConfirmButtonTheme("error primary");
dialog.addConfirmListener(event -> {
service.delete(post);
grid.getDataProvider().refreshAll();
Notification.show("Статья удалена");
});
dialog.open();
}Нажмите «корзину»: откроется окно с вопросом и кнопками «Отмена» и красной «Удалить». После «Удалить» строка исчезнет из таблицы и появится уведомление. Чтобы методы видели сервис, сохраните его в поле: private final PostService service; и this.service = service; в конструкторе.
Импорты для урока: com.vaadin.flow.component.dialog.Dialog, com.vaadin.flow.component.confirmdialog.ConfirmDialog, com.vaadin.flow.component.icon.VaadinIcon, com.vaadin.flow.component.html.Paragraph.
Частая ошибка
Статья удалена из базы, а строка осталась в таблице. Таблица не знает, что данные изменились, и показывает то, что загрузила раньше. После любого изменения данных вызывайте grid.getDataProvider().refreshAll() — таблица заново выполнит запрос к сервису.