Vaadin + Holon UI Components

Button

Components.configure(this)
                .add(Components.button().text("Hello")
                        .icon(VaadinIcon.TRASH)
                        .iconAfterText(true)
                        .withThemeVariants(ButtonVariant.LUMO_ERROR)
                        .withClickListener(event ->
                        {
                            Notification.show("Clicked");
                        })
                        .build());

Calendar

Components.configure(this)
                .add(Components.input.localDate()
                        .label("Calendar")
                        .required()
                        .withValueChangeListener(event -> {
                            Notification.show(event.getValue().toString());
                        })
                        .build());
Components.configure(this)
                .add(Components.input
                        .localDate()
                        .min(LocalDate.now().withDayOfMonth(5))
                        .max(LocalDate.now().withDayOfMonth(LocalDate.now().lengthOfMonth()))
                        .build());

For some reason, the below validation is not working. I’ll look into this again once I learned a bit about Holon Validation.

Components.configure(this)
                .add(Components.input.localDate()
                        .label("Calendar")
                        .required()
                        .validatable()
                        .validateOnValueChange(true)
                        .withValueChangeListener(event -> {
                            Notification.show(event.getValue().toString());
                        })
                        .withValidator(value -> {
                            Validator.greaterOrEqual(value).validate(LocalDate.now());
                        })
                        .build());

CheckBox

Components.configure(this)
                .add(Components.input.boolean_()
                        .label("Check Box")
                        .onClick(event -> {
                            event.toString();
                            Notification.show("Selected");
                        })
                        .build());

Combo Box

Components.configure(this)
                .add(Components.input
                        .singleSelect(String.class)
                        .label("Combo Box")
                        .items("A","B","C")
                        .withValueChangeListener(event -> {
                            Components.dialog.showMessage(event.getValue());
                        })
                        .build());

Email

Components.configure(this)
                .add(Components.input.string()
                        .label("Email")
                        .validatable()
                        .valueChangeMode(ValueChangeMode.EAGER)
                        .validateOnValueChange(true)
                        .withValidator(Validator.email())
                        .withValidator(Validator.min(5))
                        .build());

Textfield

Components.configure(this)
                .add(Components.input
                        .string()
                        .label("Text Field")
                        .placeholder("type here")
                        .withValueChangeListener(event -> {
                            Notification.show(event.getValue());
                        })
                        .build());
Components.configure(this)
                .add(Components.input
                        .string()
                        .label("Text Field")
                        .placeholder("type here")
                        .clearButtonVisible(true)
                        .autoselect()
                        .withValueChangeListener(event -> {
                            Notification.show(event.getValue());
                        })
                        .build());
Components.configure(this)
                .add(Components.input
                        .number(Integer.class)
                        .prefixComponent(new Span("$"))
                        .withValue(100)
                        .validatable()
                        .withValidator(Validator.min(100))
                        .withValidator(Validator.max(105))
                        .preventInvalidInput()
                        .validateOnValueChange(true)
                        .label("Text Field")
                        .withValueChangeListener(event -> {
                            Notification.show(String.valueOf(event.getValue()));
                        })
                        .build());

Password

Components.configure(this)
                .add(Components.input
                        .secretString()
                        .autoselect()
                        .clearButtonVisible(true)
                        .emptyValuesAsNull(true)
                        .required()
                        .validatable()
                        .withValidator(Validator.min(6))
                        .label("Password Field")
                        .withThemeVariants(TextFieldVariant.LUMO_SMALL)
                        .withValueChangeListener(event -> {
                            Notification.show(String.valueOf(event.getValue()));
                        })
                        .build());