Dialogs: Dialog and ConfirmDialog
A dialog is a window on top of the screen. While it is open, the rest of the screen is unavailable, so dialogs are used for short actions: viewing details, confirming a deletion, filling in a couple of fields. Vaadin has two classes: Dialog, an empty window that holds any components, and ConfirmDialog, a ready "Are you sure?" window with buttons.
Buttons in grid rows
Let us add a column with two icon buttons to the posts grid: preview and delete.
// src/main/java/com/example/blog/views/PostListView.java (part of the constructor)
grid.addComponentColumn(this::actions).setHeader("Actions").setAutoWidth(true);// src/main/java/com/example/blog/views/PostListView.java (new method)
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);
}Each row gets an "eye" and a red "trash can". The LUMO_TERTIARY variant removes the button background, leaving only the icon.
The preview window
// src/main/java/com/example/blog/views/PostListView.java (new method)
private void preview(Post post) {
Dialog dialog = new Dialog();
dialog.setHeaderTitle(post.getTitle());
dialog.add(new Paragraph(post.getContent() == null ? "No text yet" : post.getContent()));
dialog.getFooter().add(new Button("Close", event -> dialog.close()));
dialog.open();
}Click the "eye" next to "Hello, Vaadin": a window opens in the center with the post title, its text and a "Close" button at the bottom. The window also closes on Esc or a click outside it.
Dialog method | What it does |
|---|---|
setHeaderTitle("...") | Window title |
add(...) | Content |
getFooter().add(...) | Buttons at the bottom |
open(), close() | Show and close |
setCloseOnEsc(false) | Do not close on Esc |
setModal(false) | Do not block the screen under the window |
Confirming a deletion
// src/main/java/com/example/blog/views/PostListView.java (new method)
private void confirmDelete(Post post) {
ConfirmDialog dialog = new ConfirmDialog();
dialog.setHeader("Delete the post?");
dialog.setText("The post will be deleted for good: " + post.getTitle());
dialog.setCancelable(true);
dialog.setCancelText("Cancel");
dialog.setConfirmText("Delete");
dialog.setConfirmButtonTheme("error primary");
dialog.addConfirmListener(event -> {
service.delete(post);
grid.getDataProvider().refreshAll();
Notification.show("Post deleted");
});
dialog.open();
}Click the "trash can": a window opens with the question and the buttons "Cancel" and a red "Delete". After "Delete" the row disappears from the grid and a notification appears. So that the methods can see the service, keep it in a field: private final PostService service; and this.service = service; in the constructor.
Imports for this lesson: com.vaadin.flow.component.dialog.Dialog, com.vaadin.flow.component.confirmdialog.ConfirmDialog, com.vaadin.flow.component.icon.VaadinIcon, com.vaadin.flow.component.html.Paragraph.
Common mistake
The post is deleted from the database, but the row stays in the grid. The grid does not know the data changed and shows what it loaded before. After any data change call grid.getDataProvider().refreshAll() — the grid will run its query to the service again.