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());

 

2 thoughts on “Vaadin + Holon UI Components

  • April 28, 2019 at 11:45 pm
    Permalink

    Do you mid if I quote a few of your posts as long as
    I provide credit and sources back to your blog? My blog site is
    in the exact same area of interest as yours and myy visitors would truly
    benefit from some of the information you present here.

    Please let mee know if thiis ok with you. Thahks a lot!

    Reply
    • May 21, 2019 at 2:23 am
      Permalink

      I’m ok. You can use these posts as long as you provided the credits.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.