Saturday, 3 November 2012

ZK MVVM CRUD Without DB Connection - Part 7

In this part, we will add more fields in our customer window such as Phone Number and DOB. Here I am going to show how we can use jquery to mask the input the fields in ZK.
And also I will show how to show the watermark text for the Date and Phone.

Step 1 :

Before going forward, please download jquery file from this location. Just choose the version you want - uncompressed or minified - and you should be set.
And place that file under the web content folder as shown below. You need to add two jquery files

image
Step 2:
Now let us two more fields in our customer.java bean file as follows
   1: package domain;
   2: 
   3: import java.util.Date;
   4: 
   5: public class Customer implements Cloneable {
   6: 
   7:     private String lastName;
   8:     private String firstName;
   9:     private String email;
  10:     private Date dateOfBirth;
  11:     private String phone;
  12: 
  13:     public String getLastName() {
  14:         return lastName;
  15:     }
  16: 
  17:     public void setLastName(String lastName) {
  18:         this.lastName = lastName;
  19:     }
  20: 
  21:     public String getFirstName() {
  22:         return firstName;
  23:     }
  24: 
  25:     public void setFirstName(String firstName) {
  26:         this.firstName = firstName;
  27:     }
  28: 
  29:     public String getEmail() {
  30:         return email;
  31:     }
  32: 
  33:     public void setEmail(String email) {
  34:         this.email = email;
  35:     }
  36:     
  37:     
  38: 
  39:     public Date getDateOfBirth() {
  40:         return dateOfBirth;
  41:     }
  42: 
  43:     public void setDateOfBirth(Date dateOfBirth) {
  44:         this.dateOfBirth = dateOfBirth;
  45:     }
  46: 
  47:     public String getPhone() {
  48:         return phone;
  49:     }
  50: 
  51:     public void setPhone(String phone) {
  52:         this.phone = phone;
  53:     }
  54: 
  55:     public Object clone() throws CloneNotSupportedException {
  56:         return super.clone();
  57:     }
  58: }

Step 2:
Now let us reference our jquery file in addon file as follows



   1: <?xml version="1.0" encoding="UTF-8"?>
   2: <language-addon>
   3:     <addon-name>myaddon</addon-name>
   4:     <language-name>xul/html</language-name>
   5:     <stylesheet href="/css/style.css" type="text/css" />
   6:     <javascript src="/js/jquery.maskedinput-1.3.js" />
   7:     <javascript src="/js/watermarkinput.js" />
   8: 
   9:     <component>
  10:         <component-name>fbutton</component-name>
  11:         <extends>button</extends>
  12:         <property>
  13:             <property-name>mold</property-name>
  14:             <property-value>trendy</property-value>
  15:         </property>
  16:         <property>
  17:             <property-name>sclass</property-name>
  18:             <property-value>mybutton orange small bigrounded</property-value>
  19:         </property>
  20:     </component>
  21: 
  22: 
  23:     <component>
  24:         <component-name>Addbutton</component-name>
  25:         <extends>button</extends>
  26:         <property>
  27:             <property-name>mold</property-name>
  28:             <property-value>trendy</property-value>
  29:         </property>
  30:         <property>
  31:             <property-name>sclass</property-name>
  32:             <property-value>mybutton green small bigrounded</property-value>
  33:         </property>
  34:     </component>
  35: 
  36: 
  37:     <component>
  38:         <component-name>GoButton</component-name>
  39:         <extends>button</extends>
  40:         <property>
  41:             <property-name>mold</property-name>
  42:             <property-value>trendy</property-value>
  43:         </property>
  44:         <property>
  45:             <property-name>sclass</property-name>
  46:             <property-value>mybutton roundsearch</property-value>
  47:         </property>
  48:     </component>
  49: 
  50: 
  51:     <component>
  52:         <component-name>flabeltitle</component-name>
  53:         <extends>label</extends>
  54:         <property>
  55:             <property-name>sclass</property-name>
  56:             <property-value>flbltitle</property-value>
  57:         </property>
  58:     </component>
  59: 
  60:     <component>
  61:         <component-name>fImageEdit</component-name>
  62:         <extends>image</extends>
  63:         <property>
  64:             <property-name>sclass</property-name>
  65:             <property-value>fimageedit</property-value>
  66:         </property>
  67:         <property>
  68:             <property-name>tooltiptext</property-name>
  69:             <property-value>Edit</property-value>
  70:         </property>
  71:     </component>
  72: 
  73: 
  74:     <component>
  75:         <component-name>fImageDelete</component-name>
  76:         <extends>image</extends>
  77:         <property>
  78:             <property-name>sclass</property-name>
  79:             <property-value>fimageDelete</property-value>
  80:         </property>
  81:         <property>
  82:             <property-name>tooltiptext</property-name>
  83:             <property-value>Delete</property-value>
  84:         </property>
  85:     </component>
  86: 
  87: 
  88:     <component>
  89:         <component-name>fgrid</component-name>
  90:         <extends>grid</extends>
  91:         <property>
  92:             <property-name>sclass</property-name>
  93:             <property-value>fgrid</property-value>
  94:         </property>
  95:     </component>
  96: 
  97: 
  98:     <component>
  99:         <component-name>ftextbox</component-name>
 100:         <extends>textbox</extends>
 101:         <property>
 102:             <property-name>sclass</property-name>
 103:             <property-value>ftextbox</property-value>
 104:         </property>
 105:     </component>
 106: 
 107:     <component>
 108:         <component-name>flabel</component-name>
 109:         <extends>label</extends>
 110:         <property>
 111:             <property-name>sclass</property-name>
 112:             <property-value>flabel</property-value>
 113:         </property>
 114:     </component>
 115: 
 116: 
 117: </language-addon>

Step 3:


For DOB and Phone no, we are not going to use ZK Components. Instead of that we will create our simple component by extending ZK Textbox and then we will apply masking
water mark in that. Here are the two class which is the implementation our own component.





   1: package  component;
   2: import org.zkoss.zul.Textbox;
   3: 
   4: public class Datebox extends Textbox {
   5: 
   6:     private static final long serialVersionUID = 1L;
   7: 
   8:     public Datebox() {
   9:          
  10:         setWidgetListener("onBind", "jq(this).mask('99/99/9999');jq(this).Watermark('mm/dd/yyyy','gray');");
  11:     }
  12: 
  13: }




   1: package component;
   2: import org.zkoss.zul.Textbox;
   3: 
   4: public class Phonebox extends Textbox {
   5:     private static final long serialVersionUID = 1L;
   6:     public Phonebox() {
   7:         setWidgetListener("onBind", "jq(this).mask('(999) 999-9999');jq(this).Watermark('(###) ###-####','gray');");
   8:     }
   9: }

Step 4:


Then we need to inform ZK Engine that we are going to use our component in the zul files. This can be done by adding the reference in addon file as follows. Let us give the name
of our component such as myDateBox and myPhoneBox



   1: <?xml version="1.0" encoding="UTF-8"?>
   2: <language-addon>
   3:     <addon-name>myaddon</addon-name>
   4:     <language-name>xul/html</language-name>
   5:     <stylesheet href="/css/style.css" type="text/css" />
   6:     <javascript src="/js/jquery.maskedinput-1.3.js" />
   7:     <javascript src="/js/watermarkinput.js" />
   8: 
   9:     <component>
  10:         <component-name>fbutton</component-name>
  11:         <extends>button</extends>
  12:         <property>
  13:             <property-name>mold</property-name>
  14:             <property-value>trendy</property-value>
  15:         </property>
  16:         <property>
  17:             <property-name>sclass</property-name>
  18:             <property-value>mybutton orange small bigrounded</property-value>
  19:         </property>
  20:     </component>
  21: 
  22: 
  23:     <component>
  24:         <component-name>Addbutton</component-name>
  25:         <extends>button</extends>
  26:         <property>
  27:             <property-name>mold</property-name>
  28:             <property-value>trendy</property-value>
  29:         </property>
  30:         <property>
  31:             <property-name>sclass</property-name>
  32:             <property-value>mybutton green small bigrounded</property-value>
  33:         </property>
  34:     </component>
  35: 
  36: 
  37:     <component>
  38:         <component-name>GoButton</component-name>
  39:         <extends>button</extends>
  40:         <property>
  41:             <property-name>mold</property-name>
  42:             <property-value>trendy</property-value>
  43:         </property>
  44:         <property>
  45:             <property-name>sclass</property-name>
  46:             <property-value>mybutton roundsearch</property-value>
  47:         </property>
  48:     </component>
  49: 
  50: 
  51:     <component>
  52:         <component-name>flabeltitle</component-name>
  53:         <extends>label</extends>
  54:         <property>
  55:             <property-name>sclass</property-name>
  56:             <property-value>flbltitle</property-value>
  57:         </property>
  58:     </component>
  59: 
  60:     <component>
  61:         <component-name>fImageEdit</component-name>
  62:         <extends>image</extends>
  63:         <property>
  64:             <property-name>sclass</property-name>
  65:             <property-value>fimageedit</property-value>
  66:         </property>
  67:         <property>
  68:             <property-name>tooltiptext</property-name>
  69:             <property-value>Edit</property-value>
  70:         </property>
  71:     </component>
  72: 
  73: 
  74:     <component>
  75:         <component-name>fImageDelete</component-name>
  76:         <extends>image</extends>
  77:         <property>
  78:             <property-name>sclass</property-name>
  79:             <property-value>fimageDelete</property-value>
  80:         </property>
  81:         <property>
  82:             <property-name>tooltiptext</property-name>
  83:             <property-value>Delete</property-value>
  84:         </property>
  85:     </component>
  86: 
  87: 
  88:     <component>
  89:         <component-name>fgrid</component-name>
  90:         <extends>grid</extends>
  91:         <property>
  92:             <property-name>sclass</property-name>
  93:             <property-value>fgrid</property-value>
  94:         </property>
  95:     </component>
  96: 
  97: 
  98:     <component>
  99:         <component-name>ftextbox</component-name>
 100:         <extends>textbox</extends>
 101:         <property>
 102:             <property-name>sclass</property-name>
 103:             <property-value>ftextbox</property-value>
 104:         </property>
 105:     </component>
 106: 
 107:     <component>
 108:         <component-name>flabel</component-name>
 109:         <extends>label</extends>
 110:         <property>
 111:             <property-name>sclass</property-name>
 112:             <property-value>flabel</property-value>
 113:         </property>
 114:     </component>
 115: 
 116:     <component>
 117:         <component-name>myDateBox</component-name>
 118:         <component-class>component.Datebox
 119:         </component-class>
 120:         <extends>textbox</extends>
 121:     </component>
 122: 
 123:     <component>
 124:         <component-name>myPhoneBox</component-name>
 125:         <component-class>component.Phonebox
 126:         </component-class>
 127:         <extends>textbox</extends>
 128:     </component>
 129: 
 130: </language-addon>

Step 5:
We are done. Now we can start using our newly created component. See below



   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: 
  36:                         </row>
  37:                         <row>
  38:                             <hbox>
  39:                                 <flabel value="DOB" />
  40:                             </hbox>
  41:                             <myDateBox name="DOB"
  42:                                 readonly="@load(vm.makeAsReadOnly)"
  43:                                 value="@bind(vm.selectedCustomer.dateOfBirth)" />
  44:                         </row>
  45:                         <row>
  46:                             <hbox>
  47:                                 <flabel value="Phone" />
  48:                             </hbox>
  49:                             <myPhoneBox name="Phone"
  50:                                 readonly="@load(vm.makeAsReadOnly)"
  51:                                 value="@bind(vm.selectedCustomer.phone)" />
  52:                         </row>
  53:                         <row>
  54:                             <hbox>
  55:                                 <flabel value="Email" />
  56:                             </hbox>
  57:                             <ftextbox name="firstName"
  58:                                 readonly="@load(vm.makeAsReadOnly)"
  59:                                 value="@bind(vm.selectedCustomer.email)" cols="20" />
  60:                         </row>
  61: 
  62:                     </rows>
  63:                 </fgrid>
  64:             </panelchildren>
  65:         </panel>
  66:         <separator />
  67:         <div align="center">
  68:             <fbutton id="submit" label="Submit"
  69:                 onClick="@command('save')" visible="@load(not vm.makeAsReadOnly)" />
  70:             <fbutton id="cancel"
  71:                 label="@load(vm.makeAsReadOnly ?'Ok':'Cancel')"
  72:                 onClick="@command('closeThis')" />
  73:         </div>
  74:         <separator />
  75:     </window>
  76: </zk>

Step 6:
Now let us add the two new fields in the list also as follows



   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="300px"
  21:                     sort="auto(lastName)" />
  22:                 <listheader label="First Name" width="200px"
  23:                     sort="auto(firstName)" />
  24:                 <listheader label="DOB" width="150px"
  25:                     sort="auto(dateOfBirth)" />
  26:                 <listheader label="Phone" width="150px"
  27:                     sort="auto(phone)" />
  28:                 <listheader label="Email" width="200px"
  29:                     sort="auto(email)" />
  30:                 <listheader label="Action" />
  31:             </listhead>
  32:             <template name="model" var="p1">
  33:                 <listitem>
  34:                     <listcell label="@load(p1.lastName)"
  35:                         onClick="@command('openAsReadOnly')" sclass="highlightcell" />
  36:                     <listcell label="@load(p1.firstName)" />
  37:                     <listcell
  38:                         label="@load(p1.dateOfBirth)" />
  39:                     <listcell label="@load(p1.phone)" />
  40:                     <listcell label="@load(p1.email)" />
  41:                     <listcell>
  42:                         <hbox spacing="20px">
  43:                             <fImageEdit
  44:                                 onClick="@command('editThisCustomer')" />
  45:                             <fImageDelete
  46:                                 onClick="@command('deleteThisCustomer')" />
  47:                         </hbox>
  48:                     </listcell>
  49:                 </listitem>
  50:             </template>
  51:         </listbox>
  52:     </window>
  53: </zk>

Step 7:
Now you can run customerlist.zul file and check the output.


image
Step 8:
There is small issue in using masking and watermask. If we are not entering any characters, then masked characters will be stored in the bean. In order to avoid that, we can write
our own converters as follows



   1: package component;
   2: 
   3: import java.text.ParseException;
   4: import java.text.SimpleDateFormat;
   5: import java.util.Date;
   6: 
   7: import org.zkoss.bind.BindContext;
   8: import org.zkoss.bind.Converter;
   9: import org.zkoss.zk.ui.Component;
  10: 
  11: 
  12: @SuppressWarnings("rawtypes")
  13: public class MyDateFormatConverter implements Converter {
  14:     /**
  15:      * Convert Date to String.
  16:      * 
  17:      * @param val
  18:      *            date to be converted
  19:      * @param comp
  20:      *            associated component
  21:      * @param ctx
  22:      *            bind context for associate Binding and extra parameter (e.g.
  23:      *            format)
  24:      * @return the converted String
  25:      */
  26: 
  27:     /**
  28:     * The method coerceToUi() is invoked when loading ViewModel's property to component and its return type should correspond to bound 
  29:     * component attribute's  value[1]. The coerceToBean() is invoked when saving. If you only need to one way conversion, you can 
  30:     * leave unused method empty.
  31:     */
  32:     
  33:     private static SimpleDateFormat sdf = new SimpleDateFormat("MM/dd/yyyy");
  34: 
  35:     public Object coerceToUi(Object val, Component comp,  BindContext ctx) {
  36:         final Date date = (Date) val;
  37:         return date == null ? null : sdf.format(date);
  38:     }
  39: 
  40:     /**
  41:      * Convert String to Date.
  42:      * 
  43:      * @param val
  44:      *            date in string form
  45:      * @param comp
  46:      *            associated component
  47:      * @param ctx
  48:      *            bind context for associate Binding and extra parameter (e.g.
  49:      *            format)
  50:      * @return the converted Date
  51:      */
  52:     public Object coerceToBean(Object val, Component comp, BindContext ctx) {
  53:         final String date = (String) val;
  54:         sdf.setLenient(false);
  55:         try {
  56:             return date == null ? null : sdf.parse(date);
  57:         } catch (ParseException e) {
  58:             comp.invalidate();
  59:             return null;
  60: 
  61:         }
  62:     }
  63: 
  64: }



   1: package component;
   2: 
   3: import org.zkoss.bind.BindContext;
   4: import org.zkoss.bind.Converter;
   5: import org.zkoss.zk.ui.Component;
   6: 
   7: @SuppressWarnings("rawtypes")
   8: public class MyPhoneConverter implements Converter {
   9: 
  10:     /**
  11:      * The method coerceToUi() is invoked when loading ViewModel's property to
  12:      * component and its return type should correspond to bound component
  13:      * attribute's value[1]. The coerceToBean() is invoked when saving. If you
  14:      * only need to one way conversion, you can leave unused method empty.
  15:      */
  16: 
  17:     public Object coerceToUi(Object val, Component comp, BindContext ctx) {
  18:         // do nothing
  19:         return val;
  20:     }
  21: 
  22:     public Object coerceToBean(Object val, Component comp, BindContext ctx) {
  23:         /*
  24:          * Here we will check only masking characters are present, if so, then
  25:          * return null
  26:          */
  27:         final String propValue = (String) val;
  28:         if (IsEmptyByMask(propValue))
  29:             return null;
  30:         else
  31:             return val;
  32: 
  33:     }
  34: 
  35:     public boolean IsEmptyByMask(String s1) {
  36:         if (isEmpty(s1) == false) {
  37:             s1 = s1.replaceAll("_", "").replace("(", "").replace(")", "")
  38:                     .replace("-", "").replace(" ", "").replace("/", "").trim();
  39:             if (isEmpty(s1))
  40:                 return true;
  41:             else
  42:                 return false;
  43:         }
  44:         return true;
  45:     }
  46: 
  47:     public static boolean isEmpty(String s) {
  48:         return s == null || s.trim().length() == 0;
  49:     }
  50: }

Step 9:
Now let us add the converter both in Listing and CRUD Page as follows



   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="300px"
  21:                     sort="auto(lastName)" />
  22:                 <listheader label="First Name" width="200px"
  23:                     sort="auto(firstName)" />
  24:                 <listheader label="DOB" width="150px"
  25:                     sort="auto(dateOfBirth)" />
  26:                 <listheader label="Phone" width="150px"
  27:                     sort="auto(phone)" />
  28:                 <listheader label="Email" width="200px"
  29:                     sort="auto(email)" />
  30:                 <listheader label="Action" />
  31:             </listhead>
  32:             <template name="model" var="p1">
  33:                 <listitem>
  34:                     <listcell label="@load(p1.lastName)"
  35:                         onClick="@command('openAsReadOnly')" sclass="highlightcell" />
  36:                     <listcell label="@load(p1.firstName)" />
  37:                     <listcell
  38:                         label="@load(p1.dateOfBirth) @converter('component.MyDateFormatConverter')" />
  39:                     <listcell label="@load(p1.phone)" />
  40:                     <listcell label="@load(p1.email)" />
  41:                     <listcell>
  42:                         <hbox spacing="20px">
  43:                             <fImageEdit
  44:                                 onClick="@command('editThisCustomer')" />
  45:                             <fImageDelete
  46:                                 onClick="@command('deleteThisCustomer')" />
  47:                         </hbox>
  48:                     </listcell>
  49:                 </listitem>
  50:             </template>
  51:         </listbox>
  52:     </window>
  53: </zk>



   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: 
  36:                         </row>
  37:                         <row>
  38:                             <hbox>
  39:                                 <flabel value="DOB" />
  40:                             </hbox>
  41:                             <myDateBox name="DOB"
  42:                                 readonly="@load(vm.makeAsReadOnly)"
  43:                                 value="@bind(vm.selectedCustomer.dateOfBirth) @converter('component.MyDateFormatConverter')" />
  44:                         </row>
  45:                         <row>
  46:                             <hbox>
  47:                                 <flabel value="Phone" />
  48:                             </hbox>
  49:                             <myPhoneBox name="Phone"
  50:                                 readonly="@load(vm.makeAsReadOnly)"
  51:                                 value="@bind(vm.selectedCustomer.phone) @converter('component.MyPhoneConverter')" />
  52:                         </row>
  53:                         <row>
  54:                             <hbox>
  55:                                 <flabel value="Email" />
  56:                             </hbox>
  57:                             <ftextbox name="firstName"
  58:                                 readonly="@load(vm.makeAsReadOnly)"
  59:                                 value="@bind(vm.selectedCustomer.email)" cols="20" />
  60:                         </row>
  61: 
  62:                     </rows>
  63:                 </fgrid>
  64:             </panelchildren>
  65:         </panel>
  66:         <separator />
  67:         <div align="center">
  68:             <fbutton id="submit" label="Submit"
  69:                 onClick="@command('save')" visible="@load(not vm.makeAsReadOnly)" />
  70:             <fbutton id="cancel"
  71:                 label="@load(vm.makeAsReadOnly ?'Ok':'Cancel')"
  72:                 onClick="@command('closeThis')" />
  73:         </div>
  74:         <separator />
  75:     </window>
  76: </zk>


image

That’s all


Download Source code


Tutorial Home Page

2 comments:

  1. The addon is working when replaceing jq(this) with jQuery(this). I couldn't find exact reason, but I guess this is required to make jQuery work. or any other change is required to defined jquery as jq?

    ReplyDelete
  2. We are a third party technical support service. Avast Customer Support is here to help you out with the whole procedure to Download Avast Antivirus online, We not only fix your Avast Support related issues but will guide with how to get started with your new Avast product once it gets installed successfully. Call on our Toll Free no. 1 855 966 3855
    Gmail Customer service is a third party technical support service for Gmail users when they face any technical issue or error in their Gmail account. Our Gmail Customer Support team solves issues like forgot Gmail account password, Gmail configuration or Sync issues, recover deleted emails and many more. Toll Free number (800) 986-9271
    How you install or reinstall Office 365 or Office 2016 depends on whether your Office product is part of an Office for home or Office for business plan. If you're not sure what you have, see what office com setup products are included in each plan and then follow the steps for your product. The steps below also apply if you're installing a single, stand-alone Office application such as Access 2016 or Visio 2016. Need Help with office setup Enter Product Key? Call 1-800-000-0000 Toll Free
    Norton Tech Support is a third party service provider and not in any way associated with Norton or any of its partner companies. We offer support for Norton products and sell subscription based additional warranty on computer and other peripheral devices. Call our Toll Free number 1 855 966 3855
    Other Services
    Norton Toll Free , Office-Setup , office.com/setup.

    ReplyDelete