Requirement Constraints

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Sunday, 13 January 2013

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

Posted on 20:56 by Unknown

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


You can download the source here.
Reference
1. http://books.zkoss.org/wiki/ZK_Developer's_Reference/MVC
2. http://www.zkoss.org/zkdemo/getting_started/mvc
3. http://books.zkoss.org/wiki/ZUML_Reference/EL_Expressions/Implicit_Objects/arg
4. http://books.zkoss.org/wiki/ZK_Component_Reference/Essential_Components/Include
Email ThisBlogThis!Share to XShare to Facebook
Posted in ZK Calling Another ZUL | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • ZK Example for inline Editing with Add New and Delete
    I am quite impressed on this demo from ZK . But adding new record and delete existing record is missing as part of typical CRUD. So i thoug...
  • ZK Passing Parameter between two files using MVVM–Part 1
    Overview This is the first series of articles about Passing parameter between two zul files using MVVM Design pattern .This article will fo...
  • Hibernate Validator Example 2
    In this example, we will see some more validation constraints such as @email, @past, @length, etc. And also we will also define custom error...
  • 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. The ZK binde...
  • History of Present Illness
    HPI - One of the main component of Clinical History. What is an HPI ? The history of present illness (HPI) is a chronological description...
  • ZK Border Layout–Another example
    This examples show how you can use ZK Border Layout to show the product information on clicking image. ZK Version 6 Project Name : BorderL...
  • Good Website Design Links
    Form Design Label Placement in Forms International Address Fields in Web Forms 40 Eye-Catching Registration Pages blog-comment-form-...
  • How to refer CSS File in ZK Style tag
    In this example, we will see how to create CSS file as separate file and include in zul file to change the look and feel Project structure a...
  • ZK MVVM Form Binding CRUD with Spring and Hibernate - Part 4
    Presentation Layer using ZK Framework          In part 3 , We have completed Spring integration with hibernate. In this post, we will des...
  • Load Tab box Content on Demand Using MVVM
    ZK Version : 6.5.0 CE In this post, let us see how we can load individual ZUL File on each tab box content Step : 1 First let us create indi...

Categories

  • Billing Process
  • C Workbook
  • C++ Workbook
  • Eclipse Tips
  • EDI 5010
  • EMR Appointment Features
  • EMR Labs Stuff
  • EMR PMS Links
  • EMR Use cases
  • EMR Vital Sign
  • Good Website Design
  • Hibernate Criteria Queries
  • Hibernate Introduction
  • Hibernate Introduction Setup
  • Hibernate Mapping
  • Hibernate POC
  • Hibernate Validator
  • Hibernate–Java Environment setup
  • HPI
  • Java
  • Maven
  • MU Certification
  • NPI
  • PQRS
  • Practice Management System
  • Spring Security
  • Tech Links
  • Today Tech Stuff
  • zk
  • ZK Hibernate
  • ZK 5 Databinding
  • ZK Application
  • ZK Calling Another ZUL
  • ZK CheckBox
  • ZK CreateComponents
  • ZK CSS
  • ZK extended Components
  • ZK Foreach
  • ZK Forum Posts
  • ZK Framework
  • ZK Hibernate Setup
  • ZK ID Space
  • ZK Include
  • ZK Installation
  • ZK iReport
  • ZK Layout
  • ZK Listitem Pagination
  • ZK Message Box
  • ZK MVC
  • ZK MVC Combox Box
  • ZK MVC CRUD Examples
  • ZK MVC Listbox
  • ZK MVVM
  • ZK MVVM Combo
  • ZK MVVM CRUD
  • ZK MVVM ListBox
  • ZK Spring
  • ZK TextBox

Blog Archive

  • ▼  2013 (105)
    • ►  December (3)
    • ►  September (7)
    • ►  August (13)
    • ►  July (1)
    • ►  June (11)
    • ►  May (3)
    • ►  April (14)
    • ►  March (19)
    • ►  February (21)
    • ▼  January (13)
      • ZK With Spring + JPA + Hibernate Entity Manager
      • ZK MVC CRUD With Spring 3 + JPA + Hibernate 4 Enti...
      • ZK MVC CRUD With Spring 3 + JPA + Hibernate 4 Enti...
      • ZK MVC CRUD With Spring 3 + JPA + Hibernate 4 Enti...
      • ZK Datebox: Customize Datebox as Yearbox/Monthbox
      • Listing Search using MVC Pattern
      • ZK MVC CRUD With Spring 3 + JPA + Hibernate 4 Enti...
      • ZK MVC CRUD With Spring 3 + JPA + Hibernate 4 Enti...
      • Some Button CSS In ZK
      • ZK Passing Parameter between two files using MVC -...
      • How to set Textbox Maxlength in the view model ?
      • MVVM Pass Parameter between two zul files using UR...
      • Spring Security Form Login Example
  • ►  2012 (177)
    • ►  December (1)
    • ►  November (13)
    • ►  October (19)
    • ►  September (24)
    • ►  August (26)
    • ►  July (6)
    • ►  June (37)
    • ►  May (30)
    • ►  April (16)
    • ►  March (1)
    • ►  January (4)
  • ►  2011 (5)
    • ►  December (1)
    • ►  November (1)
    • ►  July (1)
    • ►  June (1)
    • ►  April (1)
  • ►  2010 (1)
    • ►  September (1)
Powered by Blogger.

About Me

Unknown
View my complete profile