validationgwtgwtpgwt-editorsgwt-material-design

How to display form validation constraints message on GWT Material inputs using Editor and Validation Framework from Presenter's class?


I use:

After constraints validation I would like to display error messages. This is supported by gwt material inputs, like MaterialTextBox using method:  materialTextBox.setError("Please provide your name");

The problem is that it can be only executed from view class:

public class LoginView extends ViewWithUiHandlers<LoginUiHandlers> implements LoginPresenter.MyView {
    interface Binder extends UiBinder<Widget, LoginView> {}

    /** The driver to link the proxy bean with the view. */
    public interface EditorDriver extends SimpleBeanEditorDriver<LoginModel, LoginView> { }

    @UiField MaterialTextBox email;
    @UiField MaterialTextBox password;
    @UiField MaterialButton loginButton;
    @UiField MaterialCheckBox keepMeLoggedInCheckbox;

    @Inject
    LoginView(Binder uiBinder) {
        initWidget(uiBinder.createAndBindUi(this));
        addClickHandlerToLoginButton();
    }



    //@UiHandler("loginButton")
    private void onLoginButtonClick(ClickEvent e){
        getUiHandlers().onLoginButtonClick();
    }
    private void addClickHandlerToLoginButton() {
        loginButton.addClickHandler(new ClickHandler() {
            @Override public void onClick(ClickEvent event) {
                onLoginButtonClick(event);
            }
        });     
    }
    @Override
    public SimpleBeanEditorDriver<LoginModel, ?> createEditorDriver() {
        EditorDriver driver = GWT.create(EditorDriver.class);
        driver.initialize(this);
        return driver;
    }
    public void test() {}
}

But I do all my editor/validation action in Presenter, and I do not have there any View connection I could use:

public class LoginPresenter extends Presenter<LoginPresenter.MyView, LoginPresenter.MyProxy> implements LoginUiHandlers {
    public interface MyView extends BeanEditView<LoginModel>, HasUiHandlers<LoginUiHandlers> {}
    public static final Type<RevealContentHandler<?>> SLOT_Login = new Type<RevealContentHandler<?>>();

    @ProxyStandard
    @NameToken(NameTokens.login)
    public interface MyProxy extends ProxyPlace<LoginPresenter> {}

    // Editor
    private SimpleBeanEditorDriver<LoginModel, ?> editorDriver;
    private static final LoginService service = GWT.create(LoginService.class);
    private LoginModel model = new LoginModel("","");


    @Override
    public void onLoginButtonClick() {
        if (editorDriver.isDirty()) {
            model = editorDriver.flush();
            validateModel();

            if (editorDriver.hasErrors()) {
                MaterialToast.fireToast("Errors occur");
                StringBuilder errorBuilder = new StringBuilder();
                for (EditorError error : editorDriver.getErrors()) {
                    errorBuilder.append(error.getMessage() + "\n");
                }
                MaterialToast.fireToast(errorBuilder.toString());
            } else {
                service.login(
                        model, new MethodCallback<Integer>() {
                            @Override
                            public void onSuccess(Method method, Integer response) {
                                MaterialToast.fireToast("Succefully set info. status code: " + response);
                            }
                            @Override
                            public void onFailure(Method method, Throwable exception) {
                                MaterialToast.fireToast("Error setting");
                            }
                    });
            }
        } else {
            MaterialToast.fireToast("Data has not changed");
        }
    }

    private void validateModel() {
        Validator validator = Validation.buildDefaultValidatorFactory().getValidator();
        Set<ConstraintViolation<LoginModel>> violations = validator.validate(model);
        if (violations.size() > 0) {
            editorDriver.setConstraintViolations(new ArrayList<ConstraintViolation<?>>(violations));
        }

    }

    @Inject
    LoginPresenter(EventBus eventBus,MyView view, MyProxy proxy) {
        super(eventBus, view, proxy, RevealType.Root);
        getView().setUiHandlers(this);
        editorDriver = getView().createEditorDriver();
        editorDriver.edit(model);

    }
}

I think that I should add an interface where I will declare methods to access inputs in view. And do implementation of that. But I don't know how. Please help me.


Solution

  • I've make it working. But really I am not quite sure what did happened that it start to work. So I will just share my working code:

    Presenter

    package pl.korbeldaniel.cms.client.login;
    
    import java.util.ArrayList;
    import java.util.Set;
    
    import javax.validation.ConstraintViolation;
    import javax.validation.Validation;
    import javax.validation.Validator;
    
    import org.fusesource.restygwt.client.Method;
    import org.fusesource.restygwt.client.MethodCallback;
    
    import gwt.material.design.client.ui.MaterialToast;
    
    import com.google.gwt.core.shared.GWT;
    import com.google.gwt.editor.client.SimpleBeanEditorDriver;
    import com.google.gwt.event.shared.GwtEvent.Type;
    import com.google.inject.Inject;
    import com.google.web.bindery.event.shared.EventBus;
    import com.gwtplatform.mvp.client.Presenter;
    import com.gwtplatform.mvp.client.annotations.ProxyStandard;
    import com.gwtplatform.mvp.client.proxy.ProxyPlace;
    import com.gwtplatform.mvp.client.annotations.NameToken;
    import com.gwtplatform.mvp.client.proxy.RevealContentHandler;
    import com.gwtplatform.mvp.client.HasUiHandlers;
    
    import pl.korbeldaniel.cms.client.editor.BeanEditView;
    import pl.korbeldaniel.cms.client.model.LoginModel;
    import pl.korbeldaniel.cms.client.place.NameTokens;
    import pl.korbeldaniel.cms.client.service.LoginService;
    
    
    public class LoginPresenter extends Presenter<LoginPresenter.MyView, LoginPresenter.MyProxy> implements LoginUiHandlers {
    
        @ProxyStandard
        @NameToken(NameTokens.login)
        public interface MyProxy extends ProxyPlace<LoginPresenter> {}
        public interface MyView extends BeanEditView<LoginModel>, HasUiHandlers<LoginUiHandlers> {}
    
        public static final Type<RevealContentHandler<?>> SLOT_Login = new Type<RevealContentHandler<?>>();
    
        // Editor
        private SimpleBeanEditorDriver<LoginModel, ?> editorDriver;
        private static final LoginService service = GWT.create(LoginService.class);
        private LoginModel model = new LoginModel();
    
    
        @Override
        public void onLoginButtonClick() {
            if (editorDriver.isDirty()) {
                model = editorDriver.flush();
                validateModel();
                if (editorDriver.hasErrors()) {
                    MaterialToast.fireToast("Errors occur");
                } else {
                    service.login(
                            model, new MethodCallback<Integer>() {
                                @Override
                                public void onSuccess(Method method, Integer response) {
                                    MaterialToast.fireToast("Succefully set info. status code: " + response);
                                }
                                @Override
                                public void onFailure(Method method, Throwable exception) {
                                    MaterialToast.fireToast("Error setting");
                                }
                        });
                }
            } else {
                MaterialToast.fireToast("Data has not changed");
            }
        }
    
        private void validateModel() {
            Validator validator = Validation.buildDefaultValidatorFactory().getValidator();
            Set<ConstraintViolation<LoginModel>> violations = validator.validate(model);
            GWT.log(String.valueOf(violations.size()));
            if (violations.size() > 0) {
                editorDriver.setConstraintViolations(new ArrayList<ConstraintViolation<?>>(violations));
            }
            model.validate();
        }
    
        @Inject
        LoginPresenter(EventBus eventBus,MyView view, MyProxy proxy) {
            super(eventBus, view, proxy, RevealType.Root);
            getView().setUiHandlers(this);
            editorDriver = getView().createEditorDriver();
            editorDriver.edit(model);
    
        }
        public enum EditorMode {
            VIEW, EDIT, CREATE
        };
    
    }
    

    Ui Handler

    package pl.korbeldaniel.cms.client.login;
    
    
    import com.gwtplatform.mvp.client.UiHandlers;
    
    
    interface LoginUiHandlers extends UiHandlers {
        void onLoginButtonClick();
    }
    

    ValidatorFactory

    package pl.korbeldaniel.cms.client.login;
    
    import javax.validation.Validator;
    import pl.korbeldaniel.cms.client.model.LoginModel;
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.validation.client.AbstractGwtValidatorFactory;
    import com.google.gwt.validation.client.GwtValidation;
    import com.google.gwt.validation.client.impl.AbstractGwtValidator;
    
    public final class SampleValidatorFactory extends AbstractGwtValidatorFactory {
        /**
         * Validator marker for the Validation Sample project. Only the classes and
         * groups listed in the {@link GwtValidation} annotation can be validated.
         */
        @GwtValidation(LoginModel.class)
        public interface GwtValidator extends Validator {
        }
    
        @Override
        public AbstractGwtValidator createValidator() {
            return GWT.create(GwtValidator.class);
        }
    }
    

    View

    package pl.korbeldaniel.cms.client.login;
    
    import gwt.material.design.client.ui.MaterialButton;
    import gwt.material.design.client.ui.MaterialCheckBox;
    import gwt.material.design.client.ui.MaterialTextBox;
    import javax.inject.Inject;
    import pl.korbeldaniel.cms.client.model.LoginModel;
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.editor.client.SimpleBeanEditorDriver;
    import com.google.gwt.event.dom.client.ClickEvent;
    import com.google.gwt.event.dom.client.ClickHandler;
    import com.google.gwt.uibinder.client.UiBinder;
    import com.google.gwt.uibinder.client.UiField;
    import com.google.gwt.user.client.ui.Widget;
    import com.gwtplatform.mvp.client.ViewWithUiHandlers;
    
    public class LoginView extends ViewWithUiHandlers<LoginUiHandlers> implements LoginPresenter.MyView {
        interface Binder extends UiBinder<Widget, LoginView> {}
    
        /** The driver to link the proxy bean with the view. */
        public interface EditorDriver extends SimpleBeanEditorDriver<LoginModel, LoginView> { }
    
        @UiField MaterialTextBox email;
        @UiField MaterialTextBox password;
        @UiField MaterialButton loginButton;
        @UiField MaterialCheckBox keepMeLoggedInCheckbox;
    
        @Inject
        LoginView(Binder uiBinder) {
            initWidget(uiBinder.createAndBindUi(this));
            addClickHandlerToLoginButton();
        }
    
    
    
        //@UiHandler("loginButton")
        private void onLoginButtonClick(ClickEvent e){
            getUiHandlers().onLoginButtonClick();
        }
        private void addClickHandlerToLoginButton() {
            loginButton.addClickHandler(new ClickHandler() {
                @Override public void onClick(ClickEvent event) {
                    onLoginButtonClick(event);
                }
            });     
        }
        @Override
        public SimpleBeanEditorDriver<LoginModel, ?> createEditorDriver() {
            EditorDriver driver = GWT.create(EditorDriver.class);
            driver.initialize(this);
            return driver;
        }
    
    }
    

    View Binder

    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:g="urn:import:com.google.gwt.user.client.ui"
        xmlns:m="urn:import:gwt.material.design.client.ui"
        xmlns:e="urn:import:pl.korbeldaniel.cms.client.login">
    
    
        <m:MaterialRow ui:field="loginWidget">
    
            <m:MaterialColumn grid="s12 m4 l4" offset="l4 m4" >
                    <m:MaterialTitle title="Login" description="Please provide your account credentials."/>
                    <m:MaterialPanel padding="5" shadow="1" addStyleNames="{style.panel}">
                        <m:MaterialPanel addStyleNames="{style.fieldPanel}">
                            <!-- <m:MaterialImage url="http://b.vimeocdn.com/ps/339/488/3394886_300.jpg" type="CIRCLE" addStyleNames="{style.imgProfile} z-depth-1"/> -->
    
                            <m:MaterialTextBox ui:field="email" type="EMAIL" placeholder="Email"/>
                            <m:MaterialTextBox ui:field="password" type="PASSWORD" placeholder="Password"/>
                            <m:MaterialRow addStyleNames="{style.rowAction}">
                                <m:MaterialColumn grid="s12 m12 l6">
                                    <m:MaterialCheckBox ui:field="keepMeLoggedInCheckbox" text="Keep me logged in"/>
                                </m:MaterialColumn>
                            </m:MaterialRow>
                            <m:MaterialButton ui:field="loginButton" waves="LIGHT" text="Log In" width="100%"/>
    
    
                        </m:MaterialPanel>
                    </m:MaterialPanel>
            </m:MaterialColumn>
    
        </m:MaterialRow>
    </ui:UiBinder>