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