MVVM CRUD with Spring 3.1 and Hibernate 4 and ZK - Part 3 ~ Requirement Constraints

This article focus on Editing existing address in the modal window.

In the part 2 article, we have seen how to add new address list. Now we will use the same zul file AddressCRUD.zul for editing also.

Step 1:

Let us modify the AddressList.zul file to include action column in the listbox. In this column, we will show on Button to edit the currently selected address. The modified addressList.zul file as follows

<?page title="Address List" contentType="text/html;charset=UTF-8"?>
<zk>
	<window id="addressList" title="Address List" border="none"
		apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('zkoss.vm.AddressListVM')">
		<separator />
		<button label="New Address" onClick="@command('onAddNew')"></button>
		<separator />
		<listbox id="" mold="paging" pageSize="11" pagingPosition="top"
			selectedItem="@bind(vm.selectedItem)" model="@load(vm.dataSet)">
			<listhead sizable="true">
				<listheader label="Full Name" sortDirection="ascending"
					sort="auto(fullName)" />
				<listheader label="Email" sort="auto(email)" />
				<listheader label="Mobile" sort="auto(mobile)" />
				<listheader label="Action" />
			</listhead>
			<template name="model" var="p1">
				<listitem>
					<listcell label="@load(p1.fullName)" />
					<listcell label="@load(p1.email)" />
					<listcell label="@load(p1.mobile)" />
					<listcell>
						<hbox spacing="20px">
							<button label="Edit"
								onClick="@command('onEdit',addressRecord=p1)">
							</button>
						</hbox>
					</listcell>
				</listitem>
			</template>
		</listbox>
	</window>
</zk>

Step 2:

Let us modify the AddressList.zul VM AddressListVM as follows

package zkoss.vm;

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

import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.GlobalCommand;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.WireVariable;
import org.zkoss.zkplus.spring.SpringUtil;
import AddressBook.domain.AddressBook;
import AddressBook.service.CRUDService;

public class AddressListVM {

	@WireVariable
	private CRUDService CRUDService;

	private AddressBook selectedItem;
	private List<AddressBook> allReordsInDB = null;
	private Integer selectedItemIndex;

	public AddressBook getSelectedItem() {
		return selectedItem;
	}

	public void setSelectedItem(AddressBook selectedItem) {
		this.selectedItem = selectedItem;
	}

	public Integer getSelectedItemIndex() {
		return selectedItemIndex;
	}

	public void setSelectedItemIndex(Integer selectedItemIndex) {
		this.selectedItemIndex = selectedItemIndex;
	}

	@AfterCompose
	public void initSetup(@ContextParam(ContextType.VIEW) Component view) {
		Selectors.wireComponents(view, this, false);
		CRUDService = (CRUDService) SpringUtil.getBean("CRUDService");
		allReordsInDB = CRUDService.getAll(AddressBook.class);
	}

	public List<AddressBook> getDataSet() {
		return allReordsInDB;
	}

	@Command
	public void onAddNew() {
		final HashMap<String, Object> map = new HashMap<String, Object>();
		map.put("selectedRecord", null);
		map.put("recordMode", "NEW");
		Executions.createComponents("AddressCRUD.zul", null, map);
	}

	@Command
	public void onEdit(@BindingParam("addressRecord") AddressBook addressBook) {
		final HashMap<String, Object> map = new HashMap<String, Object>();
		this.selectedItem = addressBook;
		map.put("selectedRecord", addressBook);
		map.put("recordMode", "EDIT");
		setSelectedItemIndex(allReordsInDB.indexOf(selectedItem));
		Executions.createComponents("AddressCRUD.zul", null, map);
	}

 
	// note this will be executed from AddressListCRUDVM.java

	@GlobalCommand
	@NotifyChange("dataSet")
	public void refreshList(
			@BindingParam("selectedRecord") AddressBook addressbook,
			@BindingParam("recordMode") String recordMode) {
		if (recordMode.equals("NEW")) {
			allReordsInDB.add(addressbook);
		}

		if (recordMode.equals("EDIT")) {
			allReordsInDB.set(this.selectedItemIndex, addressbook);
		}
	}

}

As you can see, we have added another method called onEdit and inside that, we are doing the following
1. From the argument of Button OnClick, we are making that as the Selected Item in the VM.
2. Then we are passing the this selected address to the CRUD Form , so that user can modify it.
3. And also, we are storing the index value of the selected address in the collection, so then after any changes, we can just update only that item in the list, instead of updating the entire list.

Step 3:

There is no change in AddressCRUD.zul, but we have to some changes in the AddressListCRUDVM as follows

package zkoss.vm;

import java.util.HashMap;
import java.util.Map;

import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.AfterCompose;
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.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zk.ui.select.annotation.WireVariable;
import org.zkoss.zkplus.spring.SpringUtil;
import org.zkoss.zul.Window;

import AddressBook.domain.AddressBook;
import AddressBook.service.CRUDService;

public class AddressListCRUDVM {

	@Wire("#addressCRUD")
	private Window win;

	@WireVariable
	private CRUDService CRUDService;

	private AddressBook selectedRecord;
	private String recordMode;
	 

	public AddressBook getSelectedRecord() {
		return selectedRecord;
	}

	public void setSelectedRecord(AddressBook selectedRecord) {
		this.selectedRecord = selectedRecord;
	}

	public String getRecordMode() {
		return recordMode;
	}

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

	 
	@AfterCompose
	public void initSetup(@ContextParam(ContextType.VIEW) Component view,
			@ExecutionArgParam("selectedRecord") AddressBook addressBook,
			@ExecutionArgParam("recordMode") String recordMode)
			throws CloneNotSupportedException {
		Selectors.wireComponents(view, this, false);
		setRecordMode(recordMode);
		CRUDService = (CRUDService) SpringUtil.getBean("CRUDService");

		if (recordMode.equals("NEW")) {
			this.selectedRecord = new AddressBook();
		}

		if (recordMode.equals("EDIT")) {
			this.selectedRecord = addressBook;
		}

	}

	@Command
	public void saveThis() {
		Map<String, Object> args = new HashMap<String, Object>();
		CRUDService.Save(this.selectedRecord);
		args.put("selectedRecord", this.selectedRecord);
		args.put("recordMode", this.recordMode);
		BindUtils.postGlobalCommand(null, null, "refreshList", args);
		win.detach();
	}

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

Step 4:

Now we can run addresslist.zul and click on the button to add new address.

You can download the source here.

Requirement Constraints

Saturday, 2 February 2013