Vaadin + Holon Platform Form Demo

Here is an example which explains how Vaadin Form works. I’d like to show the same using Holon Platform. This is more simple, less code and easy to understand.

First, we need to create an interface with all Form fields and its validators.

import com.holonplatform.core.Validator;
import com.holonplatform.core.property.BooleanProperty;
import com.holonplatform.core.property.PropertySet;
import com.holonplatform.core.property.StringProperty;

public interface SignUp {

    public static final StringProperty FIRSTNAME = StringProperty.create("firstname")
            .message("First Name")
            .withValidator(Validator.min(3))
            .withValidator(Validator.notNull())
            ;

    public static final StringProperty LASTTNAME = StringProperty.create("lastname")
            .message("Last Name")
            .withValidator(Validator.min(3))
            .withValidator(Validator.notNull())
            ;

    public static final StringProperty USRHANDLE = StringProperty.create("userhandle")
            .message("User Handle")
            .withValidator(Validator.min(3))
            .withValidator(Validator.notNull())
            ;

    public static final StringProperty PWD1 = StringProperty.create("password1")
            .message("Wanted Password")
            .withValidator(Validator.min(3))
            .withValidator(Validator.notNull())
            ;

    public static final StringProperty PWD2 = StringProperty.create("firstname")
            .message("Password again")
            .withValidator(Validator.min(3))
            .withValidator(Validator.notNull())
            ;

    public static final StringProperty EMAIL = StringProperty.create("email")
            .message("Email")
            .withValidator(Validator.email())
            ;

    public static final BooleanProperty ALLOW_MARKETING = BooleanProperty.create("allow_marketing")
            .message("Allow Marketing")
            ;

    public static final PropertySet<?> PROPERTIES = PropertySet.of(FIRSTNAME,LASTTNAME,USRHANDLE,PWD1,PWD2,ALLOW_MARKETING,EMAIL);
}

import com.holonplatform.core.Validator;
import com.holonplatform.vaadin.flow.components.Components;
import com.holonplatform.vaadin.flow.components.Input;
import com.holonplatform.vaadin.flow.components.PropertyInputForm;
import com.holonplatform.vaadin.flow.components.ValidatableInput;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.PasswordField;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.data.binder.ErrorLevel;
import com.vaadin.flow.data.binder.ValidationResult;
import com.vaadin.flow.router.Route;

import javax.annotation.PostConstruct;

@Route

public class MainView extends VerticalLayout {

    private ValidatableInput<String> pwd1;
    private ValidatableInput<String> pwd2;

    @PostConstruct
    public void init() {

        FormLayout formLayout = new FormLayout();

        PropertyInputForm inputForm = PropertyInputForm.builder(formLayout, SignUp.PROPERTIES)
                .composer((content, source) -> {
                    source.getComponents().forEach(component -> {
                        content.add(component);
                    });
                })
                .withPostProcessor((property, input) -> {
                    input.setRequired(true);
                    if (SignUp.USRHANDLE.equals(property)) {
                        formLayout.setColspan(input.getComponent(), 2);
                    }

                    if (SignUp.ALLOW_MARKETING.equals(property)) {
                        input.setRequired(false);
                    }

                    if (SignUp.EMAIL.equals(property)) {
                        input.getComponent().setVisible(false);
                        input.setRequired(false);
                    }
                })
                .initializer(content -> {
                    content.setMaxWidth("500px");
                    content.getStyle().set("margin", "0 auto");
                    content.setResponsiveSteps(new FormLayout.ResponsiveStep("0", 1, FormLayout.ResponsiveStep.LabelsPosition.TOP),
                            new FormLayout.ResponsiveStep("490px", 2, FormLayout.ResponsiveStep.LabelsPosition.TOP));
                })
                .bind(SignUp.PWD1, pwd1 = createSecretInput())
                .bind(SignUp.PWD2, pwd2 = createSecretInput())
                .withValidator(SignUp.PWD2,Validator.create(s -> s.equals(pwd1.getValue()),"Password1 and Password2 should match"))
                .validateOnValueChange(true)
                .build();

        inputForm.getInput(SignUp.ALLOW_MARKETING).get().addValueChangeListener(event -> {
            inputForm.getInput(SignUp.EMAIL).get().setVisible(event.getValue());
            inputForm.getInput(SignUp.EMAIL).get().setRequired(event.getValue());
        });

        Button join_the_comm = Components.button().text("Join the Comm")
                .withThemeVariants(ButtonVariant.LUMO_PRIMARY)
                .onClick(event -> {
                    inputForm.validate();
                    if (inputForm.isValid()) {
                        PropertyInputForm form = Components.input.form(SignUp.PROPERTIES)
                                .build();
                        form.setValue(inputForm.getValue());
                        Components.dialog
                                .message()
                                .withComponent(form)
                                .open();

                    }
                })
                .build();

        Components.configure(this)
                .addAndAlign(formLayout, Alignment.CENTER)
                .addAndAlign(join_the_comm, Alignment.CENTER)
        ;
    }

    private ValidatableInput<String> createSecretInput() {

        return ValidatableInput.builder(Components.input.secretString()
                .required()
                .build())
                .validateOnValueChange(false).build();
    }
}

And the screenprints are