ZK Passing Parameter between two files using MVC - Part 3.

Overview

This is the third of a series of articles about Passing parameter between two zul files using MVC Design pattern.This article will focus on the How to pass some arguments from one window to modal window.

 

So What we are going to do ?
1. Assume that you have small screen with a button to show another screen which opened as modal.
2. Now on Clicking of the Button, we will show the Second screen and also we will pass some arguments to the destination window.

 

In the first article, we just displayed the passed arguments in zul file which do not have any controller.
In the second article, we have seen how we can receive the parameters in the controller and show the them in the ZUL.
Now we will see how we can use ZK's annotated data binding manager utility to show the values in the ZUL from the controller.

Step 1:

If you are new ZK, then first set the development environment by following this document.

Step 2:
Let us create the Project in eclipse. Click File -> New -> ZK Project . Let us name the project as ZKMVCPassingParameter3

 

Step 3:

Now let us create a zul file in the name of ParentWindow.zul. This zul is pretty simple contains two labels with textboxes and one button. So on clicking the button, we will call another zul file and also we will also pass the value of the text boxes typed by the user.

<?page title="Parent Window" contentType="text/html;charset=UTF-8"?>
<zk>
    <window title="Parent Window" border="normal" apply="org.com.demo.ParentWindowController">
        <label value="First Name"></label>
        <separator></separator>
        <textbox id="firstName"></textbox>
        <separator></separator>
        <label value="Last Name"></label>
        <separator></separator>
        <textbox id="lastName"></textbox>
        <separator></separator>
        <button label="Show Window" id="showWindow"></button>
    </window>
</zk>

Step 4:
Now we will add our controller to our Parentwindow.zul as follows. Create a package called "org.com.demo" and create a java file called "ParentWindowController.java" Now on button click, we will call the ChildWindow.zul with the arguments as shown here.

package org.com.demo;

import java.util.HashMap;

import org.zkoss.zk.ui.Executions;

import org.zkoss.zk.ui.select.SelectorComposer;

import org.zkoss.zk.ui.select.annotation.Listen;

import org.zkoss.zk.ui.select.annotation.Wire;

import org.zkoss.zul.Textbox;

import org.zkoss.zul.Window;

@SuppressWarnings("serial")

public class ParentWindowController extends SelectorComposer<Window> {

    @Wire

    Textbox firstName;

    @Wire

    Textbox lastName;

    @Listen("onClick=#showWindow")

    public void submit() {

        final HashMap<String, Object> map = new HashMap<String, Object>();

        map.put("firstName", firstName.getValue());

        map.put("lastName", lastName.getValue());

        Executions.createComponents("ChildWindow.zul", null, map);

        /*Executions.createComponents("ChildWindow1.zul", null, map);*/

        /*Executions.createComponents("ChildWindow2.zul", null, map);*/

        /*Executions.createComponents("ChildWindow3.zul", null, map);*/

    }

}

Step 5:
Now let us create a zul file in the name of ChildWindow.zul. In this zul file also, we have two labels and two text boxes in which by default when this zul file is called we are going to receive the arguments and fill the values.

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="childwindow" ?>

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

<zk>

    <window id="childwindow" title="Child Window" border="normal"

        mode="modal" width="20%" apply="org.com.demo.ChildWindowController">

        <label value="First Name"></label>

        <separator></separator>

        <textbox id="firstName" value="@{childwindow$ChildWindowController.firstName}"></textbox>

        <separator></separator>

        <label value="Last Name"></label>

        <separator></separator>

        <textbox id="lastName"

            value="@{childwindow$ChildWindowController.lastName}">

        </textbox>

        <separator></separator>

        <textbox id="lastName1"

            value="@{childwindow$composer.lastName}">

        </textbox>

        <separator></separator>

    <textbox id="lastName2"

            value="@{$composer.lastName}">

        </textbox>

        <separator></separator>

        <button label="Close" onClick="childwindow.detach()"></button>

    </window>

</zk>

Step 6:
Now Let receive the parameter in the ChildWindow controller class. In the package “org.com.demo" and create a java file called "ChildWindowController.java"

package org.com.demo;

import java.util.HashMap;

import org.zkoss.zk.ui.Execution;

import org.zkoss.zk.ui.Executions;

import org.zkoss.zk.ui.select.SelectorComposer;

import org.zkoss.zk.ui.select.annotation.Listen;

import org.zkoss.zk.ui.select.annotation.Wire;

import org.zkoss.zul.Messagebox;

import org.zkoss.zul.Textbox;

import org.zkoss.zul.Window;

@SuppressWarnings("serial")

public class ChildWindowController extends SelectorComposer<Window> {

    private String firstName;

    private String lastName;

    public String getFirstName() {

        return firstName;

    }

    public void setFirstName(String firstName) {

        this.firstName = firstName;

    }

    public String getLastName() {

        return lastName;

    }

    public void setLastName(String lastName) {

        this.lastName = lastName;

    }

    public void doAfterCompose(Window comp) throws Exception {

        super.doAfterCompose(comp);

        final Execution execution = Executions.getCurrent();

        setFirstName((String) execution.getArg().get("firstName"));

        setLastName((String) execution.getArg().get("lastName"));

        comp.setAttribute("cp", this);

    }

}

Step 7:
That’s all. Now you can run ParentWindow.zul and type some value for first and last Name and click the button to show the values in the childwindow.zul
If you look closely in the ChildWindow.zul , you can see how we have access the value from the composer as shown.
<textbox id="firstName" value="@{childwindow$ChildWindowController.firstName}"></textbox>
Here is the documentation from ZK
Access Controller's Variables in View
We may access variables in the controller from view by the use of an EL Expression:${expression}. The implicit variable win$composer is a reference to the controller which was assigned to the Window component with the ID: win. For instance, to assign the component attribute model with the a data model called carsModel in the controller, we write model="${win$composer.carsModel}".

Default Names of Composer
If a composer extends from one of ZK skeletal implementations (such as SelectorComposer and GenericForwardComposer), the composer is stored in three component attributes called $composer, id$composer and id$ClassName, where id is the component's ID, and ClassName is the class name of the composer. If ID is not assigned, it is default to an empty string, so the composer will be stored to two component attributes: $composer and $ClassName.

As per the documentation, here I have used id$ClassName
We can also use the other option. The following zul file shows with the option $composer

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="childwindow" ?>

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

<zk>

    <window id="childwindow" title="Child Window" border="normal"

        mode="modal" width="20%" apply="org.com.demo.ChildWindowController">

        <label value="First Name"></label>

        <separator></separator>

        <textbox id="firstName"

            value="@{childwindow$composer.firstName}">

        </textbox>

        <separator></separator>

        <label value="Last Name"></label>

        <separator></separator>

        <textbox id="lastName"

            value="@{childwindow$composer.lastName}">

        </textbox>

        <separator></separator>

        <button label="Close" onClick="childwindow.detach()"></button>

    </window>

</zk>

The following zul file shows with the option $composer

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="childwindow" ?>

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

<zk>

    <window id="childwindow" title="Child Window" border="normal"

        mode="modal" width="20%" apply="org.com.demo.ChildWindowController">

        <label value="First Name"></label>

        <separator></separator>

        <textbox id="firstName" value="@{$composer.firstName}"></textbox>

        <separator></separator>

        <label value="Last Name"></label>

        <separator></separator>

        <textbox id="lastName" value="@{$composer.lastName}"></textbox>

        <separator></separator>

        <button label="Close" onClick="childwindow.detach()"></button>

    </window>

</zk>

The following is another way

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="childwindow" ?>

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

<zk>

    <window id="childwindow" title="Child Window" border="normal"

        mode="modal" width="20%" apply="org.com.demo.ChildWindowController">

        <label value="First Name"></label>

        <separator></separator>

        <textbox id="firstName" value="@{cp.firstName}"></textbox>

        <separator></separator>

        <label value="Last Name"></label>

        <separator></separator>

        <textbox id="lastName" value="@{cp.lastName}"></textbox>

        <separator></separator>

        <button label="Close" onClick="childwindow.detach()"></button>

    </window>

</zk>

Project Structure

You can download the source here.
Reference
1. http://books.zkoss.org/wiki/ZK_Developer's_Reference/MVC
2. http://books.zkoss.org/wiki/ZK_Developer's_Reference/MVC/Controller/Composer
3. http://books.zkoss.org/wiki/ZK_Developer's_Reference/MVC/Controller/Wire_Variables
4. http://www.zkoss.org/zkdemo/getting_started/mvc
5. http://books.zkoss.org/wiki/ZUML_Reference/EL_Expressions/Implicit_Objects/arg
6. http://books.zkoss.org/wiki/ZK_Component_Reference/Essential_Components/Include
7. http://books.zkoss.org/wiki/ZK%20Developer's%20Reference/MVC/Controller/Composer
8. http://books.zkoss.org/wiki/ZK%20Developer's%20Reference/UI%20Composing/ZUML/EL%20Expressions
9. http://books.zkoss.org/wiki/Small_Talks/2008/August/ZK_MVC_Made_Easy
10. http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkplus/databind/AnnotateDataBinder.html
11. http://books.zkoss.org/wiki/Small_Talks/2010/July/Improved_AnnotateDataBinder_Initializer

12. http://books.zkoss.org/wiki/ZK_Essentials/Displaying_Information_in_a_Grid_Using_Data_Binding/The_Concept_of_Data_Binding