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.

Environment

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

    Project Structure

    image

    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
    icon-editicon-enableicon-trash-red

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

    image



    Download Source code