This article focus on Viewing (Read only Mode) existing address in the modal window.
In the part 3 article, we have seen how to edit existing address record. Now we will use the same zul file AddressCRUD.zul for Just viewing the address(Open in read only mode).
Step 1:
Let us modify the AddressList.zul file to include one more Button to View 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>
<button label="View"
onClick="@command('openAsReadOnly',addressRecord=p1)">
</button>
</hbox>
</listcell>
</listitem>
</template>
</listbox>
</window>
</zk>
Step 2:
Let us modify AddressListVM.java as followspackage 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);
}
@Command
public void openAsReadOnly(@BindingParam("addressRecord") AddressBook addressBook) {
final HashMap<String, Object> map = new HashMap<String, Object>();
this.selectedItem = addressBook;
map.put("selectedRecord", addressBook);
map.put("recordMode", "READ");
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 openAsReadOnly 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.
Step 3:
Now let us change the AddressCRUD.zul file. All we need to add the readonly property for all the textbox(s) as shown here.<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Address" id="addressCRUD" border="normal" width="30%"
mode="modal" maximizable="false" closable="true"
position="center,parent" apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('zkoss.vm.AddressListCRUDVM')">
<panel width="100%">
<panelchildren>
<separator />
<grid>
<columns>
<column></column>
<column></column>
</columns>
<rows>
<row>
<cell colspan="2">
<vlayout>
<label value="Full Name" />
<textbox id="fullName" hflex="1"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.fullName) @save(vm.selectedRecord.fullName, before='saveThis')"
mold="rounded" />
</vlayout>
</cell>
</row>
<row>
<cell colspan="2">
<vlayout>
<label value="Address" />
<textbox id="address1" hflex="1"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.address1) @save(vm.selectedRecord.address2, before='saveThis')"
mold="rounded" />
</vlayout>
</cell>
</row>
<row>
<cell colspan="2">
<vlayout>
<textbox id="address2" hflex="1"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.address2) @save(vm.selectedRecord.address2, before='saveThis')"
mold="rounded" />
</vlayout>
</cell>
</row>
<row>
<vlayout>
<label value="City" />
<textbox id="City" hflex="1"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.city) @save(vm.selectedRecord.city, before='saveThis')"
mold="rounded" />
</vlayout>
<vlayout>
<grid sclass="vgrid">
<columns>
<column width="30%"></column>
<column></column>
</columns>
<rows>
<row>
<vlayout>
<label value="State" />
<textbox id="State"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.state) @save(vm.selectedRecord.state, before='saveThis')"
hflex="1" mold="rounded" />
</vlayout>
<vlayout>
<label value="ZipCode" />
<textbox id="zipcode"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.zipCode) @save(vm.selectedRecord.zipCode, before='saveThis')"
hflex="1" mold="rounded" />
</vlayout>
</row>
</rows>
</grid>
</vlayout>
</row>
<row>
<cell colspan="2">
<vlayout>
<label value="Email" />
<textbox id="email" hflex="1"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.email) @save(vm.selectedRecord.email, before='saveThis')"
mold="rounded" />
</vlayout>
</cell>
</row>
<row>
<vlayout>
<label value="Mobile" />
<textbox id="Mobile" hflex="1"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.mobile) @save(vm.selectedRecord.mobile, before='saveThis')"
mold="rounded" />
</vlayout>
</row>
</rows>
</grid>
</panelchildren>
</panel>
<separator />
<separator />
<separator />
<div align="center">
<button label="Save" visible="@load(not vm.makeAsReadOnly)"
onClick="@command('saveThis')" mold="trendy" />
<button label="@load(vm.makeAsReadOnly ?'Ok':'Cancel')"
onClick="@command('closeThis')" mold="trendy" />
</div>
<separator />
</window>
</zk>
Step 4:
Now Let us modify the AddressListCRUDVM.java. You can see here, we have added a property called makeAsReadonly.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;
private boolean makeAsReadOnly;
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;
}
public boolean isMakeAsReadOnly() {
return makeAsReadOnly;
}
public void setMakeAsReadOnly(boolean makeAsReadOnly) {
this.makeAsReadOnly = makeAsReadOnly;
}
@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;
}
if (recordMode == "READ") {
setMakeAsReadOnly(true);
this.selectedRecord = addressBook;
win.setTitle(win.getTitle() + " (Readonly)");
}
}
@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 5
Now we can run addresslist.zul and click on the button to add new address.
You can download the source here.