MVVM Modal window–Pass Parameter and Return values

In this post, we will see how we can pass some values to the modal window when calling from the parent window and also vice versa (i.e) return some values from the modal window to parent window

 

Project Name : MVVMModalWindow
Project Structure:

Demo.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
    <window title="MVVM Modal window Passing arguments and retur values"
        border="normal" apply="org.zkoss.bind.BindComposer"
        viewModel="@id('e') @init('com.demo.UI.demoVM')">
        Type any value and Press the Model Window Button
        <separator />
        Value 1 :
        <textbox value="@bind(e.value1)" />
        Value 2 :
        <textbox value="@bind(e.value2)" />
        <button label="Model Window" onClick="@command('showModelWin')" />
    </window>
</zk>

 

demoVM.java

 

package com.demo.UI;

import java.util.HashMap;

import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.GlobalCommand;
import org.zkoss.zk.ui.Executions;
import org.zkoss.bind.annotation.NotifyChange;

public class demoVM {

    private String value1;
    private String value2;
    

    public String getValue1() {
        return value1;
    }

    public void setValue1(String value1) {
        this.value1 = value1;
    }

    public String getValue2() {
        return value2;
    }

    public void setValue2(String value2) {
        this.value2 = value2;
    }
    
    @Command
    public void showModelWin()
    {
        final HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("value1", this.value1 );
        map.put("value2", this.value2);
        Executions.createComponents("ModelWindow.zul", null, map);
    }
    
    @GlobalCommand
    @NotifyChange({"value1","value2"})
    public void refreshvalues(@BindingParam("returnvalue1") String str1, @BindingParam("returnvalue2") String str2)
    {
        this.value1 = str1;
        this.value2 = str2;
    }
}

ModelWindow.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>

    <window id="modalDialog"
        title="MVVM Modal window Passing arguments and retur values"
        width="420px" height="auto" border="normal" minimizable="false"
        mode="modal" maximizable="false" closable="true"
        action="hide: slideUp" apply="org.zkoss.bind.BindComposer"
        onCancel="@command('closeThis')"
        viewModel="@id('e') @init('com.demo.UI.ModelWindowVM')">

        Change the values and Press the Ok Button to return changed
        values.
        <separator />
        Value 1 :
        <textbox value="@bind(e.value1)" />
        Value 2 :
        <textbox value="@bind(e.value2)" />
        <button label="Ok" onClick="@command('save')" />
    </window>
</zk>

ModelWindowVM.java

 

package com.demo.UI;

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.ExecutionArgParam;
import org.zkoss.bind.annotation.Init;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;
import java.util.HashMap;
import org.zkoss.bind.BindUtils;
import java.util.Map;

public class ModelWindowVM {

    @Wire("#modalDialog")
    private Window win;
    private String value1;
    private String value2;
    

    public String getValue1() {
        return value1;
    }

    public void setValue1(String value1) {
        this.value1 = value1;
    }

    public String getValue2() {
        return value2;
    }

    public void setValue2(String value2) {
        this.value2 = value2;
    }

    @Init
    public void init(@ContextParam(ContextType.VIEW) Component view,
            @ExecutionArgParam("value1") String v1,
            @ExecutionArgParam("value2") String v2) {
        Selectors.wireComponents(view, this, false);
        this.value1 = v1;
        this.value2 = v2;

    }

    @SuppressWarnings({ "unchecked", "rawtypes" })
    @Command
    public void save() {
        Map args = new HashMap();
        args.put("returnvalue1", this.value1);
        args.put("returnvalue2", this.value2);
        BindUtils.postGlobalCommand(null, null, "refreshvalues", args);
        win.detach();
    }
    
    @Command
    public void closeThis() {
        win.detach();
    }
}

Now you can run the demo.zul file