In Part 5, we have seen how to change the look and feel. In this part 6, we will add one more option to view the details. In the “CRUD”, we have completed C,U and D.
Now we will see “R”. We will just open our Customer model window in read only mode when “Last Name” cell is clicked. And also, I shown the successful message after each operation using ZK Java utility clients notification.
1. First we include readonly property of textbox in CustomerCRUD.Zul.
2. Secondly we also change the button caption by condition.
customerList.zul
1: <?page title="CustomerList" contentType="text/html;charset=UTF-8"?>
2: <zk> 3: 4: 5: 6: <window title="Customer List" border="normal" id="list"
7: apply="org.zkoss.bind.BindComposer"
8: viewModel="@id('myvm') @init('appVM.CustomerListVM')">
9: 10: <div>11: <Addbutton label="Add New Customer"
12: onClick="@command('addNewCustomer')" />
13: </div> 14: <separator /> 15: 16: <listbox sclass="mylist" id="test"
17: model="@load(myvm.allCustomers)"
18: selectedItem="@bind(myvm.curSelectedCustomer)">
19: <listhead sizable="true">
20: <listheader label="Last Name" width="400px"
21: sort="auto(lastName)" />
22: <listheader label="First Name" width="400px"
23: sort="auto(firstName)" />
24: <listheader label="Email" width="400px"
25: sort="auto(email)" />
26: <listheader label="Action" />
27: </listhead>28: <template name="model" var="p1">
29: <listitem>30: <listcell label="@load(p1.lastName)"
31: onClick="@command('openAsReadOnly')" sclass="highlightcell" />
32: <listcell label="@load(p1.firstName)" />
33: <listcell label="@load(p1.email)" />
34: <listcell>35: <hbox spacing="20px">
36: <fImageEdit37: onClick="@command('deleteThisCustomer')" />
38: <fImageDelete39: onClick="@command('editThisCustomer')" />
40: </hbox> 41: </listcell> 42: </listitem> 43: </template> 44: </listbox> 45: </window> 46: </zk>CustomerListVM.java
1: package appVM; 2: 3: import java.util.ArrayList; 4: import java.util.HashMap; 5: import java.util.List; 6: import org.zkoss.bind.BindUtils; 7: import org.zkoss.bind.annotation.BindingParam; 8: import org.zkoss.bind.annotation.Command; 9: import org.zkoss.bind.annotation.ContextParam; 10: import org.zkoss.bind.annotation.ContextType; 11: import org.zkoss.bind.annotation.GlobalCommand; 12: import org.zkoss.bind.annotation.Init; 13: import org.zkoss.bind.annotation.NotifyChange; 14: import org.zkoss.zk.ui.Component; 15: import org.zkoss.zk.ui.Executions;16: import org.zkoss.zk.ui.event.Event;
17: import org.zkoss.zk.ui.event.EventListener;
18: import org.zkoss.zk.ui.select.Selectors; 19: import org.zkoss.zk.ui.util.Clients; 20: import org.zkoss.zul.Messagebox; 21: import appData.CustomerData; 22: import domain.Customer; 23: 24: public class CustomerListVM {
25: 26: private List<Customer> customerList = new ArrayList<Customer>();
27: private Customer curSelectedCustomer;
28: private Integer curSelectedCustomerIndex;
29: 30: public Customer getCurSelectedCustomer() {
31: return curSelectedCustomer;
32: } 33: 34: public void setCurSelectedCustomer(Customer curSelectedCustomer) {
35: this.curSelectedCustomer = curSelectedCustomer;
36: } 37: 38: public Integer getCurSelectedCustomerIndex() {
39: return curSelectedCustomerIndex;
40: } 41: 42: public void setCurSelectedCustomerIndex(Integer curSelectedCustomerIndex) {
43: this.curSelectedCustomerIndex = curSelectedCustomerIndex;
44: } 45: 46: @Init47: public void initSetup(@ContextParam(ContextType.VIEW) Component view) {
48: Selectors.wireComponents(view, this, false);
49: customerList = new CustomerData().getAllCustomers();
50: } 51: 52: public List<Customer> getallCustomers() {
53: return customerList;
54: } 55: 56: @Command57: public void addNewCustomer() {
58: final HashMap<String, Object> map = new HashMap<String, Object>();
59: map.put("sCustomer", null);
60: map.put("recordMode", "NEW");
61: Executions.createComponents("CustomerCRUD.zul", null, map);
62: } 63: 64: @Command65: public void openAsReadOnly() {
66: final HashMap<String, Object> map = new HashMap<String, Object>();
67: map.put("sCustomer", this.curSelectedCustomer);
68: map.put("recordMode", "READ");
69: Executions.createComponents("CustomerCRUD.zul", null, map);
70: } 71: 72: @Command73: public void editThisCustomer() {
74: final HashMap<String, Object> map = new HashMap<String, Object>();
75: map.put("sCustomer", this.curSelectedCustomer);
76: map.put("recordMode", "EDIT");
77: setCurSelectedCustomerIndex(customerList.indexOf(curSelectedCustomer));78: Executions.createComponents("CustomerCRUD.zul", null, map);
79: } 80: 81: // The following method will be called from CustomerCRUDVM after the save
82: // When we say Notifychange("allcustomers), then ZUL list items will be
83: // updated
84: @GlobalCommand85: @NotifyChange("allCustomers")
86: public void updateCustomerList(@BindingParam("pCustomer") Customer cust1,
87: @BindingParam("recordMode") String recordMode) {
88: if (recordMode.equals("NEW")) {
89: customerList.add(cust1); 90: }91: if (recordMode.equals("EDIT")) {
92: customerList.set(this.curSelectedCustomerIndex, cust1);
93: } 94: 95: } 96: 97: @SuppressWarnings({ "unchecked", "rawtypes" })
98: @Command99: public void deleteThisCustomer() {
100: int OkCancel;
101: 102: String str = "The Selected Customer LastName \""
103: + curSelectedCustomer.getLastName() + "\" will be deleted.";
104: OkCancel = Messagebox.show(str, "Confirm", Messagebox.OK
105: | Messagebox.CANCEL, Messagebox.QUESTION);106: if (OkCancel == Messagebox.CANCEL) {
107: return;
108: } 109: 110: str = "The Selected Customer LastName \""
111: + curSelectedCustomer.getLastName()112: + "\" will be permanently deleted and the action cannot be undone.";
113: 114: Messagebox.show(str, "Confirm", Messagebox.OK | Messagebox.CANCEL,
115: Messagebox.QUESTION, new EventListener() {
116: @Override117: public void onEvent(Event event) throws Exception {
118: if (((Integer) event.getData()).intValue() == Messagebox.OK) {
119: customerList.remove(customerList 120: .indexOf(curSelectedCustomer));121: Clients.showNotification("Operation completed sucessfully", Clients.NOTIFICATION_TYPE_INFO, null, "top_center" ,4100);
122: BindUtils.postNotifyChange(null, null,
123: CustomerListVM.this, "allCustomers");
124: } 125: } 126: }); 127: } 128: }CustomerCRUD.zul
1: <?page title="new page title" contentType="text/html;charset=UTF-8"?>
2: <zk>3: <window title="Customer CRUD" border="normal" id="CustomerCRUD"
4: width="430px" height="auto" apply="org.zkoss.bind.BindComposer"
5: sclass="mymodal" minimizable="false" mode="modal" maximizable="false"
6: closable="true" position="center"
7: viewModel="@id('vm') @init('appVM.CustomerCRUDVM')">
8: <separator />9: <flabeltitle value="Customer information" />
10: <separator />11: <panel width="100%">
12: <panelchildren> 13: <separator />14: <fgrid width="99.5%">
15: <columns>16: <column label="" width="150px" />
17: <column label="" />
18: </columns> 19: <rows> 20: <row> 21: <hbox>22: <flabel value="First Name" />
23: </hbox>24: <ftextbox name="firstName"
25: readonly="@load(vm.makeAsReadOnly)"
26: value="@bind(vm.selectedCustomer.firstName)" cols="20" />
27: </row> 28: <row> 29: <hbox>30: <flabel value="Last Name" />
31: </hbox>32: <ftextbox name="LastName"
33: readonly="@load(vm.makeAsReadOnly)"
34: value="@bind(vm.selectedCustomer.lastName)" cols="20" />
35: </row> 36: <row> 37: <hbox>38: <flabel value="Email" />
39: </hbox>40: <ftextbox name="firstName"
41: readonly="@load(vm.makeAsReadOnly)"
42: value="@bind(vm.selectedCustomer.email)" cols="20" />
43: </row> 44: 45: </rows> 46: </fgrid> 47: </panelchildren> 48: </panel> 49: <separator />50: <div align="center">
51: <fbutton id="submit" label="Submit"
52: onClick="@command('save')" visible="@load(not vm.makeAsReadOnly)" />
53: <fbutton id="cancel"
54: label="@load(vm.makeAsReadOnly ?'Ok':'Cancel')"
55: onClick="@command('closeThis')" />
56: </div> 57: <separator /> 58: </window> 59: </zk>CustomerCRUDVM.java
1: package appVM; 2: 3: import java.util.HashMap; 4: import java.util.Map; 5: 6: import org.zkoss.bind.BindUtils; 7: import org.zkoss.bind.annotation.Command; 8: import org.zkoss.bind.annotation.ContextParam; 9: import org.zkoss.bind.annotation.ContextType; 10: import org.zkoss.bind.annotation.ExecutionArgParam; 11: import org.zkoss.bind.annotation.Init; 12: import org.zkoss.zk.ui.Component; 13: import org.zkoss.zk.ui.select.Selectors; 14: import org.zkoss.zk.ui.select.annotation.Wire; 15: import org.zkoss.zk.ui.util.Clients; 16: import org.zkoss.zul.Window; 17: 18: import domain.Customer; 19: 20: public class CustomerCRUDVM {
21: 22: /*
23: * This is the window ID used in CustomerCRUD.Zul File. Using this only, we
24: * can close the model window after save and cancel button
25: */
26: @Wire("#CustomerCRUD")
27: private Window win;
28: 29: private Customer selectedCustomer;
30: private String recordMode;
31: private boolean makeAsReadOnly;
32: 33: public String getRecordMode() {
34: return recordMode;
35: } 36: 37: public void setRecordMode(String recordMode) {
38: this.recordMode = recordMode;
39: } 40: 41: public Customer getSelectedCustomer() {
42: return selectedCustomer;
43: } 44: 45: public void setSelectedCustomer(Customer selectedCustomer) {
46: this.selectedCustomer = selectedCustomer;
47: } 48: 49: public boolean isMakeAsReadOnly() {
50: return makeAsReadOnly;
51: } 52: 53: public void setMakeAsReadOnly(boolean makeAsReadOnly) {
54: this.makeAsReadOnly = makeAsReadOnly;
55: } 56: 57: @Init58: public void initSetup(@ContextParam(ContextType.VIEW) Component view,
59: @ExecutionArgParam("sCustomer") Customer c1,
60: @ExecutionArgParam("recordMode") String recordMode)
61: throws CloneNotSupportedException {62: Selectors.wireComponents(view, this, false);
63: setRecordMode(recordMode);64: if (recordMode.equals("NEW")) {
65: this.selectedCustomer = new Customer();
66: } 67: 68: if (recordMode.equals("EDIT")) {
69: this.selectedCustomer = (Customer) c1.clone();
70: } 71: 72: if (recordMode == "READ") {
73: setMakeAsReadOnly(true);
74: this.selectedCustomer = (Customer) c1.clone();
75: win.setTitle(win.getTitle() + " (Readonly)");
76: } 77: } 78: 79: @SuppressWarnings({ "rawtypes", "unchecked" })
80: @Command81: public void save() {
82: Map args = new HashMap();
83: args.put("pCustomer", this.selectedCustomer);
84: args.put("recordMode", this.recordMode);
85: Clients.showNotification("Operation completed sucessfully", Clients.NOTIFICATION_TYPE_INFO, null, "top_center" ,4100);
86: BindUtils.postGlobalCommand(null, null, "updateCustomerList", args);
87: win.detach(); 88: } 89: 90: @Command91: public void closeThis() {
92: win.detach(); 93: } 94: }Download source here