ZK MVVM CRUD Without DB Connection - Part 6

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:                             <fImageEdit
  37:                                 onClick="@command('deleteThisCustomer')" />
  38:                             <fImageDelete
  39:                                 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:     @Init
  47:     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:     @Command
  57:     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:     @Command
  65:     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:     @Command
  73:     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:     @GlobalCommand
  85:     @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:     @Command
  99:     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:                     @Override
 117:                     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:     @Init
  58:     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:     @Command
  81:     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:     @Command
  91:     public void closeThis() {
  92:         win.detach();
  93:     }
  94: }

Download source here