answered 2014-09-11 08:14:47 +0800

M4tt
39 ● 5

updated 2014-09-11 08:33:30 +0800

Hi chill,

Thank you for replying, I didn't know there is an util class, it would help a lot. :)

Maybe my understanding about the form validation is wrong, but here what I want is triggering the validation before I click a button outside the "input-field-only" div.

For example, like I said, a wizard page with several steps, each step has it's own input-field div, and user can switch between steps by click the prev or next button.

I know it's a bit complicated, so I'd show what I've done for easy understanding. Sorry for the long post in advanced.

Wizard.zul

<div align="center" xmlns:n="native" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('vm.WizardVM'))">
<div>
    <div align="left">
        <label value="@load(vm.state.UIState.title)"/>
    </div>
    <n:hr/>
    <!-- input-field-only here, it would be Input1Div.zul here -->
    <include id="formInput" src="@load(vm.state.UIState.uri)"/>
    <n:hr/>
    <n:div >
        <button id="prevBtn" label="prev" disabled="@load(not vm.state.UIState.prevBtnState)" onClick="@command('prevStep')" iconSclass="z-icon-arrow-left"/>
           <!-- A local command and a global-command here -->
        <button id="nextBtn" label="next" disabled="@load(not vm.state.UIState.nextBtnState)" onClick="@command('nextStep') @global-command('goNext')" iconSclass="z-icon-arrow-right"/>
    </n:div>
</div>

WizardVM.java

   public class WizardVM {

    private WizardState state;
    @Wire("#formInput")
    private Include input;
    private Component view;

    @AfterCompose
    public void afterCompose(@ContextParam(ContextType.VIEW) Component view, @ExecutionArgParam(AttributeUtil.ENTITY) Object entity) {
        Selectors.wireComponents(view, this, false);
        this.view = view;
        WizardState initState = new SetupStep1(null);
        updateEntity(initState.getEntity());
        this.state = initState;
    }

    public WizardState getState() {
        return state;
    }

    @NotifyChange
    public void setState(WizardState state) {
        this.state = state;
    }

    private void updateEntity(Object entity) {
        input.setDynamicProperty(AttributeUtil.ENTITY, entity);
    }

    @NotifyChange("state")
    @Command
    public void nextStep(MouseEvent event) {
        //*******************************************
        //Global-command "Input1Div.goNext" is also invoked to trigger the form validation. If validation is passed (use a EventQueue to communicate maybe?), then go to next step
        //else just return
        //*******************************************
        //go next step
        if(passed){
            WizardState next = state.getNext();
            if (next != null) {
                updateEntity(next.getEntity());
                setState(next);
            }
        }
    }

    @NotifyChange("state")
    @Command
    public void prevStep(MouseEvent event) {
    //same as nextStep() here
        if(passed){
            WizardState prev = state.getPrev();
            if (prev != null) {
                updateEntity(prev.getEntity());
                setState(prev);
            }
        }
    }
}

WizardState.java

public interface WizardState<T> {
        public WizardState getNext();
        public WizardState getPrev();
        public WizardUIState getUIState();
        public T getEntity();
        public void setEntity(T entity);
}

Input1Div.zul

<div  apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('vm.Input1VM'))"  validationMessages="@id('vmsgs')">
    <div form="@id('fx') @load(vm.entity) @save(vm.entity, before='saveEntity')" >
        <!-- **********************************
        You can see I have to add an invisible button here to trigger validation
        ********************************** -->
        <button id="btn" visible="flase" onClick="@command('saveEntity')"/>
        <div align="left">
            <div>
                <label value="name"/>    
            </div>
            <div>
                <textbox id="cn" value="@bind(fx.name) @validator('beanValidator')" placeholder="input name" />
            </div>
            <div>
                <label value="@load(vmsgs[cn])"  />
            </div>
        </div>
    </div>
</div>

Input1VM.java

public class Input1VM {

    private Entity entity;
    @Wire("#btn")
    Button btn;

     @AfterCompose
    public void afterCompose(@ContextParam(ContextType.VIEW) Component view, @ExecutionArgParam(AttributeUtil.ENTITY) Object entity) {
        Selectors.wireComponents(view, this, false);
        this.entity = (Entity) entity;    
    }

    public Entity getEntity() {
        return entity;
    }

    public void setEntity(Entity entity) {
        this.entity = entity;
    }

    @GlobalCommand
    public void goNext(){
        //trigger invisible button for validation
        Events.sendEvent(Events.ON_CLICK, btn, null);
    }

    @Command("saveEntity")
    public void saveEntity() {
        //save entity
        //give WizardVM.nextStep&prevStep a green light
    }
}

Sorry for the messy code, I've tried my best to simplify them.

You can see the problem here is I can't trigger form validation when clicking the button in the outside div (Wizard.zul), so I declared a global-command in the inner div view model (Input1VM.java), which will trigger the form validation by sending a click event to an invisible button. It might work but I don't think it's the right way. That's the reason why I ask this question here.

Thank you.