Monday, 15 October 2012

ZK MVVM CRUD Without DB Connection - Part 1


Summary :
In this Part 1, Just we are showing the List of Customers without any CRUD operation.


  • Eclipse 3.7 Indigo IDE Download
  • JavaSE 1.6 Download
  • ZK 6.0.1 CE Version

    Project Structure


    Add the following CustomerList.zul in the webcontent folder

    <?page title="CustomerList" contentType="text/html;charset=UTF-8"?>
    /* Start: Action Images- Edit
    ---------------------------------------------- */ .fimageedit {
    width: 25px; background-image: url('./images/icon-edit.png');
    background-repeat: no-repeat; border: 0 none; cursor: pointer; }
    /* End: Action Images - Edit
    ---------------------------------------------- */ /* Start:
    Action Images- Delete
    ---------------------------------------------- */ .fimageDelete
    { width: 25px; background-image:
    url('./images/icon-trash-red.png'); background-repeat:
    no-repeat; border: 0 none; cursor: pointer; } /* End: Action
    Images - Delete ----------------------------------------------
    <window title="Customer List" border="normal"
    viewModel="@id('myvm') @init('appVM.CustomerListVM')">
    <button label="Add New Customer"
    onClick="@command('addNewCustomer')" />
    <separator />
    <listbox id="test" model="@load(myvm.allCustomers)"
    <listhead sizable="true">
    <listheader label="Last Name" width="400px"
    sort="auto(lastName)" />
    <listheader label="First Name" width="400px"
    sort="auto(firstName)" />
    <listheader label="email" width="400px"
    sort="auto(email)" />
    <listheader label="Action" />
    <template name="model" var="p1">
    <listcell label="@load(p1.lastName)" />
    <listcell label="@load(p1.firstName)" />
    <listcell label="@load(" />
    <hbox spacing="20px">
    <image sclass="fimageDelete"
    onClick="@command('deleteThisCustomer')" />
    <image sclass="fimageedit"
    onClick="@command('editThisCustomer')" />

    Create a package called appdata and add the following

    package appData;

    import java.util.ArrayList;
    import java.util.List;
    import domain.Customer;

    public class CustomerData {
    public List<Customer> getAllCustomers() {
    List<Customer> allcustomers = new ArrayList<Customer>();
    Customer d1 = new Customer();
    d1 = new Customer();
    d1 = new Customer();
    d1 = new Customer();
    d1 = new Customer();
    return allcustomers;

    Create a package called appVM and the following

    package appVM;

    import java.util.ArrayList;
    import java.util.List;
    import org.zkoss.bind.annotation.Command;
    import org.zkoss.bind.annotation.Init;
    import org.zkoss.zul.Messagebox;
    import domain.Customer;
    import appData.CustomerData;

    public class CustomerListVM {
    private List<Customer> customerList = new ArrayList<Customer>();
    private Customer curSelectedCustomer;

    public Customer getCurSelectedCustomer() {
    return curSelectedCustomer;

    public void setCurSelectedCustomer(Customer curSelectedCustomer) {
    this.curSelectedCustomer = curSelectedCustomer;

    public void initSetup() {
    customerList = new CustomerData().getAllCustomers();

    public List<Customer> getallCustomers() {
    return customerList;

    public void addNewCustomer() {"Add New Customer Code goes here");

    public void editThisCustomer() {"Edit Existing Customer Code goes here");

    public void deleteThisCustomer() {"Delete Existing Customer Code goes here");

    Create a Package called domain and add the following Customer

    package domain;

    public class Customer {
    private String lastName;
    private String firstName;
    private String email;

    public String getLastName() {
    return lastName;

    public void setLastName(String lastName) {
    this.lastName = lastName;

    public String getFirstName() {
    return firstName;

    public void setFirstName(String firstName) {
    this.firstName = firstName;

    public String getEmail() {
    return email;

    public void setEmail(String email) { = email;

    Create a folder called Images under webcontent folder and add the following image

    Now run the customerList.zul file to see the following output.


    Download Source code



    1. i have error with
      Servlet.service() for servlet zkLoader threw exception
      java.lang.NoClassDefFoundError: appData/CustomerData
      at appVM.CustomerListVM.initSetup(

      do you know how to resolve it?

    2. We are a third party technical support service. Avast Customer Support is here to help you out with the whole procedure to Download Avast Antivirus online, We not only fix your Avast Support related issues but will guide with how to get started with your new Avast product once it gets installed successfully. Call on our Toll Free no. 1 855 966 3855
      Gmail Customer service is a third party technical support service for Gmail users when they face any technical issue or error in their Gmail account. Our Gmail Customer Support team solves issues like forgot Gmail account password, Gmail configuration or Sync issues, recover deleted emails and many more. Toll Free number (800) 986-9271
      How you install or reinstall Office 365 or Office 2016 depends on whether your Office product is part of an Office for home or Office for business plan. If you're not sure what you have, see what office com setup products are included in each plan and then follow the steps for your product. The steps below also apply if you're installing a single, stand-alone Office application such as Access 2016 or Visio 2016. Need Help with office setup Enter Product Key? Call 1-800-000-0000 Toll Free
      Norton Tech Support is a third party service provider and not in any way associated with Norton or any of its partner companies. We offer support for Norton products and sell subscription based additional warranty on computer and other peripheral devices. Call our Toll Free number 1 855 966 3855
      Other Services
      Norton Toll Free , Office-Setup ,


    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...