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

Overview

This is the first 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.
Step 1:
If you are new ZK, then you can setup the Development environment by downloading this document.
Step 2:Let us create the Project in eclipse. Click File -> New -> ZK Project . Let us name the project as ZKMVCPassingParameter1
image
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">

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

        <separator></separator>

        <textbox></textbox>

        <separator></separator>

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

        <separator></separator>

        <textbox></textbox>

        <separator></separator>

        <button label="Show Window"></button>

    </window>

</zk>

Step 4:
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.



 

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

<zk>

    <window title="Child Window" border="normal" mode="modal" width="20%">

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

        <separator></separator>

        <textbox></textbox>

        <separator></separator>

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

        <separator></separator>

        <textbox></textbox>

        <separator></separator>

        <button label="Close"></button>

    </window>

</zk>

Step 5:
Now let us start the actual implementation to acheive our output. First we will 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.
image



 

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);

    }

 

}

 

Step 6:
Now Let receive the parameter in the ChildWindow.zul. Here i am not using any controller class to support this zul file. But still, we can receive the values and show in the zul directly. This can be easily done using implicit arg object. Now let us change our ChildWindow.zul as follows



 

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

<zk>

    <window id="childwindow" title="Child Window" border="normal" mode="modal" width="20%">

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

        <separator></separator>

        <textbox value="${arg.firstName}"></textbox>

        <separator></separator>

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

        <separator></separator>

        <textbox value="${arg.lastName}"></textbox>

        <separator></separator>

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

    </window>

</zk>

     

 

Step 7:
Thats all. Now you can run ParentWindow.zul and type some value for first name and last name and click the button to show the values in the ChildWindow.zul

Project Structure

image

Labels: