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