ZK MVVM CRUD Without DB Connection - Part 1

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

Environment

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"?>
<zk>

    <style>
    
        /* 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
        ---------------------------------------------- */

    </style>
    
    <window title="Customer List" border="normal"
        apply="org.zkoss.bind.BindComposer"
        viewModel="@id('myvm') @init('appVM.CustomerListVM')">

        <div>
            <button label="Add New Customer"
                onClick="@command('addNewCustomer')" />
        </div>
        <separator />

        <listbox id="test" model="@load(myvm.allCustomers)"
            selectedItem="@bind(myvm.curSelectedCustomer)">
            <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" />
            </listhead>
            <template name="model" var="p1">
                <listitem>
                    <listcell label="@load(p1.lastName)" />
                    <listcell label="@load(p1.firstName)" />
                    <listcell label="@load(p1.email)" />
                    <listcell>
                        <hbox spacing="20px">
                            <image sclass="fimageDelete"
                                onClick="@command('deleteThisCustomer')" />
                            <image sclass="fimageedit"
                                onClick="@command('editThisCustomer')" />
                        </hbox>
                    </listcell>
                </listitem>
            </template>
        </listbox>
    </window>
</zk>

 

Create a package called appdata and add the following CustomerData.java

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.setLastName("John");
        d1.setFirstName("Mike");
        d1.setEmail("mike@yahoo.com");
        allcustomers.add(d1);

        d1 = new Customer();
        d1.setLastName("James");
        d1.setFirstName("Sean");
        d1.setEmail("James@yahoo.com");
        allcustomers.add(d1);

        d1 = new Customer();
        d1.setLastName("Smith");
        d1.setFirstName("Williams");
        d1.setEmail("Smith@yahoo.com");
        allcustomers.add(d1);

        d1 = new Customer();
        d1.setLastName("Anderson");
        d1.setFirstName("Harris");
        d1.setEmail("Harris@yahoo.com");
        allcustomers.add(d1);

        d1 = new Customer();
        d1.setLastName("Lee");
        d1.setFirstName("Martin");
        d1.setEmail("Martin@yahoo.com");
        allcustomers.add(d1);

        return allcustomers;
    }
}

Create a package called appVM and the following CustomerListVM.java

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

    @Init
    public void initSetup() {
        customerList= new CustomerData().getAllCustomers();
    }
    
    public List<Customer> getallCustomers() {
        return customerList;
    }

    @Command
    public void addNewCustomer() {
        Messagebox.show("Add New Customer Code goes here");
    }

    @Command
    public void editThisCustomer() {
        Messagebox.show("Edit Existing Customer Code goes here");
    }

    @Command
    public void deleteThisCustomer() {
        Messagebox.show("Delete Existing Customer Code goes here");
    }

}

Create a Package called domain and add the following Customer.java

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) {
        this.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