ZK MVVM CRUD Without DB Connection - Part 3

In Part 2, we have seen how we can change the look and Feel of the Listing records. Now we will design new form to add new customers

Project Structure

First let us add new zul file called as CustomerCRUD.zul under webcontent folder. The code is as follows

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
    <window title="Customer CRUD" border="normal" id="CustomerCRUD"
        width="430px" height="auto" apply="org.zkoss.bind.BindComposer"
        minimizable="false" mode="modal" maximizable="false" closable="true" position="center"
        viewModel="@id('vm') @init('appVM.CustomerCRUDVM')">
        <separator />
        <label value="Customer information" />
        <separator />
        <panel width="100%">
            <panelchildren>
                <separator />
                <grid width="99.5%">
                    <columns>
                        <column label="" width="150px" />
                        <column label="" />
                    </columns>
                    <rows>
                        <row>
                            <hbox>
                                <label value="First Name" />
                            </hbox>
                            <textbox name="firstName"
                                value="@bind(vm.selectedCustomer.firstName)" cols="20" />
                        </row>
                        <row>
                            <hbox>
                                <label value="Last Name" />
                            </hbox>
                            <textbox name="LastName"
                                value="@bind(vm.selectedCustomer.lastName)" cols="20" />
                        </row>
                        <row>
                            <hbox>
                                <label value="Email" />
                            </hbox>
                            <textbox name="firstName"
                                value="@bind(vm.selectedCustomer.email)" cols="20" />
                        </row>

                    </rows>
                </grid>
            </panelchildren>
        </panel>
        <separator />
        <div align="center">
            <button id="submit" label="Submit"
                onClick="@command('save')" />
            <button id="cancel" label="Cancel"
                onClick="@command('closeThis')" />
        </div>
    </window>
</zk>

Next we will add another ViewModel called as CustomerCRUDVM.java under the package appVM. Here is the code.

package appVM;

import java.util.HashMap;
import java.util.Map;
import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.ExecutionArgParam;
import org.zkoss.bind.annotation.Init;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;
import domain.Customer;

public class CustomerCRUDVM {

    /*
     * This is the window ID used in CustomerCRUD.Zul File. Using this only, we
     * can close the model window after save and cancel button
     */
    @Wire("#CustomerCRUD")
    private Window win;

    private Customer selectedCustomer;
    private String recordMode;

    public String getRecordMode() {
        return recordMode;
    }

    public void setRecordMode(String recordMode) {
        this.recordMode = recordMode;
    }

    public Customer getSelectedCustomer() {
        return selectedCustomer;
    }

    public void setSelectedCustomer(Customer selectedCustomer) {
        this.selectedCustomer = selectedCustomer;
    }

    @Init
    public void initSetup(@ContextParam(ContextType.VIEW) Component view,
            @ExecutionArgParam("sCustomer") Customer c1,
            @ExecutionArgParam("recordMode") String recordMode) {
        Selectors.wireComponents(view, this, false);

        setRecordMode(recordMode);
        if (recordMode.equals("NEW")) {
            this.selectedCustomer = new Customer();
        }
    }

    @SuppressWarnings({ "rawtypes", "unchecked" })
    @Command
    public void save() {
        Map args = new HashMap();
        args.put("pCustomer", this.selectedCustomer);
        args.put("recordMode", this.recordMode);
        BindUtils.postGlobalCommand(null, null, "updateCustomerList", args);
        win.detach();
    }

    @Command
    public void closeThis() {
        win.detach();
    }
}

Next we will modify our existing CustomerListVM.java to take care of add new customer and update listing records. The code as follows

package appVM;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.GlobalCommand;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.Executions;
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() {
        final HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("sCustomer", null);
        map.put("recordMode", "NEW");
        Executions.createComponents("CustomerCRUD.zul", null, map);
    }

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

    // The following method will be called from CustomerCRUDVM after the save
    // When we say Notifychange("allcustomers), then ZUL list items will be
    // updated
    @GlobalCommand
    @NotifyChange("allCustomers")
    public void updateCustomerList(@BindingParam("pCustomer") Customer cust1,
            @BindingParam("recordMode") String recordMode) {
        if (recordMode.equals("NEW")) {
            customerList.add(cust1);
        }
    }

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

}

Now again you can run customerList.zul file and Click add Customer.

 

Download Source code