dialog-for-vaadin
Configurable dialog extension for Vaadin's Dialog
Extending Vaadin's dialog to simplify creation of closable, preview or form dialogs.
Closable dialog
Closable dialogs are dialogs with a default close button and title. ClosableDialog
comes with a configuration class,
where mostly regular things can be configured, like close on escape, etc. Which also can be configured with default methods.
It is also supporting the title configuration.
CloseableDialog dialog = new CloseableDialog(VaadinIcon.WARNING, "Warning", createWarningContent());
or
DialogConfig config = DialogConfig.builder().title(TitleConfig.builder().enabled(false).build()).build();
CloseableDialog dialog = new CloseableDialog(config);
Closable dialogs comes with a configuration class, where you can configure the built-in properties of a Dialog
, like:
- modal
- closeable
- draggable
- resizable
- close on outside click
- close on escape
- width (+max width)
- height (+max height)
Through the configuration, title can be enabled or disabled, and also the color of the title text can be defined.
Positioning
Closable dialog comes with positioning support based on Notification's positions. This can be configured through the configuration class, or simple setting the position before opening the dialog.
CloseableDialog dialog = new CloseableDialog(VaadinIcon.WARNING, "Lorem Ipsum", createLipsumContent());
dialog.setPosition(Position.BOTTOM_END);
dialog.setDraggable(true);
dialog.open();
Form dialog
Form dialogs are dialogs which should hold a FormLayout
which is responsible to edit a
bean type. Form dialogs are using automatic data biding
so the best way to use FormDialog
with a bean type (e.g.: User
) to create a form (e.g.: UserForm
) extending the FormLayout
for it.
By default FormDialog
also using JSR 303 Bean Validation, but this can be turn off through the dialogs configuration class.
With bean validation (default)
The default configuration comes with bean validation support, buttons with icon and notification feedbacks.
FormDialog<User> dialog = new FormDialog<>(User.class, VaadinIcon.USER, "Create a new user", new UserForm());
Button demo = new Button("Open dialog", event -> dialog.open());
Without bean validation
There is a built in configuration without bean validation if you want to avoid to add any JSR 303 implementation.
DialogConfig config = FormDialogType.DEFAULT_WITHOUT_BEAN_VALIDATION.getConfig();
FormDialog<User> dialog = new FormDialog<>(User.class, config, VaadinIcon.USER, "Update user", new UserFormWithoutBeanValidation());
dialog.setValue(User.builder().firstName("John").lastName("Smith").username("john.smith").password("********").build());
Button demo = new Button("Open dialog", event -> {
dialog.setSaveFunction(modifiedUser -> {
log.info("You can do anything with this {}. If this method returns with false, the dialog won't close.", modifiedUser);
return true;
});
dialog.open();
});
Compact form
There is a configuration for displaying a compact form, which removes the header and puts an extra button to close the dialog. This configuration also have a version without bean validation.
DialogConfig config = FormDialogType.COMPACT.getConfig();
FormDialog<User> dialog = new FormDialog<>(User.class, config, VaadinIcon.USER, "Update user", new UserFormWithoutBeanValidation());
dialog.setValue(User.builder().firstName("John").lastName("Smith").username("john.smith").password("********").build());
Button demo = new Button("Open dialog", event -> {
dialog.open();
});
Custom form
Beside the predefined configuration, you can define your own configuration to have custom buttons and actions.
FormDialog<Scale> dialog = new FormDialog<>(Scale.class, config, VaadinIcon.CUBES, "Scale deployment", new ScaleForm());
dialog.setValue(Scale.builder().numberOfInstances(5).build());
dialog.setSaveFunction(scale -> {
log.info("Any custom logic can happen here, with the new value: {}", scale);
return true;
});
Button demo = new Button("Open dialog", event -> dialog.open());
Button demo = new Button("Open dialog", event -> {
dialog.open();
});
The configuration comes with a builder, you can override everything or you can keep the default values. Here is a complete example of configuration:
DialogConfig config = DialogConfig.builder()
.form(FormConfig.builder()
.beanValidationEnabled(false)
.saveAction(FormButtonConfig.builder()
.enabled(true)
.label("Scale")
.closeOnSuccess(true)
.notification(NotificationConfig.builder()
.enabled(true)
.duration(Duration.ofSeconds(10))
.position(Notification.Position.TOP_END)
.build())
.iconFactory(VaadinIcon.SAFE_LOCK)
.variants(List.of(ButtonVariant.LUMO_PRIMARY))
.successMessage("Deployment has been scaled.")
.errorMessage("Failed to scale service. Please contact your system administrator.")
.build())
.cancelAction(FormButtonConfig.builder().enabled(false).build())
.secondaryAction(FormButtonConfig.builder()
.enabled(true)
.label("Reset")
.closeOnSuccess(false)
.notification(NotificationConfig.builder().enabled(false).build())
.iconFactory(VaadinIcon.REFRESH)
.variants(List.of(ButtonVariant.LUMO_ERROR))
.build())
.build())
.build();
Preview dialog
Preview
is a dialog which can be displayed on hover action to create preview of an image. Once the hover left the
preview link, the preview dialog will be closed. Preview
also supporting linking and freezing features.
You only need to add these Preview
instances to your layout.
With freezing and linking (default)
If freezing is enabled, one click on the preview label will freeze the preview dialog. This dialog is draggable, so you
can move it around. Close on escape also supported, so you can close frozen dialogs.
Linking, opening an url on a new window, also working, but in case of freezing is enabled, you need to use double click.
Preview preview = new Preview("With freezing and linking", "thumbnail.webp", "image.webp")
Without freezing
Freezing can be disabled. In this case, linking is working with a single click.
DialogConfig config = PreviewDialogType.WITHOUT_FREEZING.getConfig();
Preview preview = new Preview(config, "Without freezing", "image.webp");
Without linking
Linking also can be disabled through the configuration class.
Preview preview = new Preview(PreviewDialogType.WITHOUT_LINKING.getConfig(), "Without linking", "thumbnail.webp");
Without linking and freezing
there is also a buil- in configuration to disable both functionality and provide simple preview without any extra functionality.
Preview preview = new Preview(PreviewDialogType.MINIMAL.getConfig(), "Without linking and freezing", "thumbnail.webp")
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
- Released
- 2024-02-14
- Maturity
- STABLE
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 23
- Browser
- N/A
dialog-for-vaadin - Vaadin Add-on Directory
Configurable dialog extension for Vaadin's DialogFormLayout
which is responsible to edit a
bean type. Form dialogs are using automatic data biding
so the best way to use FormDialog
with a bean type (e.g.: User
) to create a form (e.g.: UserForm
) extending the FormLayout
for it.By default
FormDialog
also using JSR 303 Bean Validation, but this can be turn off through the dialogs configuration class.
### With bean validation (default)
The default configuration comes with bean validation support, buttons with icon and notification feedbacks.
```java
FormDialog