dialog-for-vaadin

Configurable dialog extension for Vaadin's Dialog

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

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

• Source code

Compatibility