Passing Parameter between two files using MVVM

---

This examples shows how to pass parameter between two zul screens. In this example, we are passing some parameters from the parent vm to child VM and child VM returns back some information.

ZK Dynamic Menu Part 6 Using ZK 7 Navigation Bar

ZK and Lookup Components using MVVM–Part 1

ZK and Lookup(Selection) Components using MVVM

ZK MVVM List Box Export to Excel

ZK MVVM List Box–Retrieve records from MYSQL with Hibernate and Spring integration

ZK MVVM List box with Dynamic Template

ZK Dropupload example

ZK MVVM Form Binding CRUD with Spring and Hibernate

MVVM Pass Parameter between two zul files using URL Redirect

MVVM Command annotation and Notify change example

Here is an example, how to pass parameter on a zul through MVVM Command binding annotation.

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

MVVM Example for Form Validation

In this post, we will see how we can validate the form inputs on click of submit button and show all the errors in one window.

ViewModel Class Java Annotation @Init, @NotifyChange, @Command

In following sections we'll list all syntaxes that can be used in implementing a ViewModel and applying ZK bind annotation.

MVVM Examples–Example 2

Concept

Initialization

The binder is responsible for creating and initializing a ViewModel instance. If you want to perform your own initialization in a ViewModel, you can declare your own initial method by annotating a method with @Init . The Binder will invoke this method when initializing a ViewModel. Each ViewModel can only have one initial
method

MVVM Examples–Example 1

Example 1:

In this example, how we can convert MVC GenericForwardComposer into new MVVM + Data binding