Processing...
Suggested case list:
Using timer to refresh a grid
383
guest
172.69.33.121
25nk0ui
May 7, 2020 7:23:47 AM
link
user model to move item to another listbox
120
guest
162.158.193.148
d0n3kr
Apr 2, 2020 5:28:28 AM
link
Disabled list item row passed to VM-1981
296
fatih123
160.83.36.130
25nk0ui
Feb 13, 2018 4:25:44 PM
link
Disabled list item row passed to VM-1981
295
fatih123
160.83.36.130
25nk0ui
Feb 13, 2018 4:25:16 PM
link
Disabled list item row passed to VM-1981
294
fatih123
160.83.36.132
25nk0ui
Feb 13, 2018 3:30:44 PM
link
grid sample with ListModel/RowRenderer
816
guest
80.82.2.131
2vah9aj
Feb 21, 2017 11:42:21 AM
link
grid sample with ListModel/RowRenderer
809
guest
175.98.113.162
2vah9aj
Jan 26, 2017 9:19:33 AM
link
grid sample with ListModel/RowRenderer
196
guest
79.185.142.40
2vah9aj
Apr 26, 2014 10:53:57 PM
link
grid sample with ListModel/RowRenderer
195
guest
79.185.142.40
2vah9aj
Apr 26, 2014 10:53:54 PM
link
grid sample with ListModel/RowRenderer
194
guest
79.185.142.40
2vah9aj
Apr 26, 2014 10:53:51 PM
link
grid sample with ListModel/RowRenderer
193
guest
79.185.142.40
2vah9aj
Apr 26, 2014 10:53:48 PM
link
grid sample with ListModel/RowRenderer
192
guest
79.185.142.40
2vah9aj
Apr 26, 2014 10:53:44 PM
link
grid sample with ListModel/RowRenderer
191
guest
79.185.142.40
2vah9aj
Apr 26, 2014 10:53:40 PM
link
Hierarchy table without using ZK PE/EE
1
aaknai
151.28.135.213
1s871da
Jul 29, 2013 11:02:46 PM
link
grid sample with ListModel/RowRenderer
128
aaknai
151.28.135.213
2vah9aj
Jul 29, 2013 7:20:00 PM
link
user model to move item to another listbox
1
TonyQ
114.25.109.94
d0n3kr
Apr 21, 2012 10:43:27 AM
link
Using timer to refresh a grid
1
TonyQ
220.133.44.37
25nk0ui
Feb 17, 2012 3:17:34 AM
link
Fire a event from child iframe
1
TonyQ
220.133.44.37
2eupjot
Feb 3, 2012 5:04:52 AM
link
Textbox input restriction sample
1
TonyQ
72.21.245.243
1b3nlr0
Dec 20, 2011 10:09:10 AM
link
Test web core taglib in ZUL
1
TonyQ
198.203.175.175
ofqkem
Dec 17, 2011 3:36:08 AM
link
Latest 10 Fiddles :
constraint binding textbox
3
guest
172.68.151.162
20pelda
Dec 5, 2025 5:08:19 PM
link
Another new ZK fiddle
2
guest
172.68.151.163
20pelda
Dec 5, 2025 5:07:51 PM
link
Another new ZK fiddle
1
guest
172.68.151.162
20pelda
Dec 5, 2025 5:07:32 PM
link
Another new ZK fiddle
1
peggypeng
172.71.154.99
364f4ne
Dec 5, 2025 9:24:31 AM
link
tooltip example
2
guest
104.22.23.13
rc1nto
Dec 4, 2025 2:23:45 PM
link
Another new ZK fiddle
1
guest
172.69.134.227
7t7602
Dec 4, 2025 1:40:46 PM
link
Another new ZK fiddle
1
peggypeng
104.22.17.180
2df6e3o
Dec 4, 2025 8:41:29 AM
link
onClose
1
peggypeng
172.68.87.248
j8kd8a
Dec 3, 2025 4:10:26 AM
link
Another new ZK fiddle
1
peggypeng
172.69.134.227
1rm7f4e
Nov 26, 2025 3:31:24 AM
link
ZK-5912-Suggestion
2
rebeccalai
104.22.20.144
2qrmiiu
Nov 26, 2025 2:07:15 AM
link
MVVM
12
guest
187.50.44.52
11gqlir
Dec 17, 2012 9:21:23 PM
link
resources
index.zul
zul
<?page title="CustomerList" contentType="text/html;charset=UTF-8"?> <zk> <style> /* Start: Action Images- Edit ---------------------------------------------- */ .fimageedit { width: 25px; background-image: url('./images/icon-edit.png'); background-repeat: no-repeat; border: 0 none; cursor: pointer; } /* End: Action Images - Edit ---------------------------------------------- */ /* Start: Action Images- Delete ---------------------------------------------- */ .fimageDelete { width: 25px; background-image: url('./images/icon-trash-red.png'); background-repeat: no-repeat; border: 0 none; cursor: pointer; } /* End: Action Images - Delete ---------------------------------------------- */ </style> <window title="Customer List" border="normal" apply="org.zkoss.bind.BindComposer, pkg$.CustomerListComposer" viewModel="@id('myvm') @init('pkg$.CustomerListVM')"> <div> <button label="Add New Customer" id="addNewCustomerButton" /> <!-- onClick="@command('addNewCustomer')" --> </div> <separator /> <listbox id="test" model="@load(myvm.allCustomers)" selectedItem="@bind(myvm.curSelectedCustomer)"> <listhead sizable="true"> <listheader label="Last Name" width="400px" sort="auto(lastName)" /> <listheader label="First Name" width="400px" sort="auto(firstName)" /> <listheader label="email" width="400px" sort="auto(email)" /> <listheader label="Action" /> </listhead> <template name="model" var="p1"> <listitem> <listcell label="@load(p1.lastName)" /> <listcell label="@load(p1.firstName)" /> <listcell label="@load(p1.email)" /> <listcell> <hbox spacing="20px"> <image sclass="fimageDelete" onClick="@command('deleteThisCustomer')" /> <image sclass="fimageedit" onClick="@command('editThisCustomer')" /> </hbox> </listcell> </listitem> </template> </listbox> </window> </zk>
CustomerCRUDVM.java
java
import java.util.HashMap; import java.util.Map; import org.zkoss.bind.BindUtils; 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.bind.annotation.Init; import org.zkoss.zk.ui.Component; import org.zkoss.zk.ui.select.Selectors; import org.zkoss.zk.ui.select.annotation.Wire; import org.zkoss.zul.Window; public class CustomerCRUDVM { /* * This is the window ID used in CustomerCRUD.Zul File. Using this only, we * can close the model window after save and cancel button */ // @Wire("#CustomerCRUD") // private Window win; private Customer selectedCustomer; private String recordMode; public String getRecordMode() { return recordMode; } public void setRecordMode(String recordMode) { this.recordMode = recordMode; } public Customer getSelectedCustomer() { return selectedCustomer; } public void setSelectedCustomer(Customer selectedCustomer) { this.selectedCustomer = selectedCustomer; } @Init public void initSetup(@ContextParam(ContextType.VIEW) Component view, @ExecutionArgParam("sCustomer") Customer c1, @ExecutionArgParam("recordMode") String recordMode) { Selectors.wireComponents(view, this, false); setRecordMode(recordMode); if (recordMode.equals("NEW")) { this.selectedCustomer = new Customer(); } } @SuppressWarnings({ "rawtypes", "unchecked" }) @Command public void save() { Map args = new HashMap(); args.put("pCustomer", this.selectedCustomer); args.put("recordMode", this.recordMode); BindUtils.postGlobalCommand(null, null, "updateCustomerList", args); // win.detach(); } // @Command // public void closeThis() { // win.detach(); // } }
CustomerCRUD.zul
zul
<?page title="new page title" contentType="text/html;charset=UTF-8"?> <zk> <window title="Customer CRUD" border="normal" id="CustomerCRUD" width="430px" height="auto" apply="org.zkoss.bind.BindComposer" minimizable="false" mode="modal" maximizable="false" closable="true" position="center" viewModel="@id('vm') @init('pkg$.CustomerCRUDVM')"> <separator /> <label value="Customer information" /> <separator /> <panel width="100%"> <panelchildren> <separator /> <grid width="99.5%"> <columns> <column label="" width="150px" /> <column label="" /> </columns> <rows> <row> <hbox> <label value="First Name" /> </hbox> <textbox name="firstName" value="@bind(vm.selectedCustomer.firstName)" cols="20" /> </row> <row> <hbox> <label value="Last Name" /> </hbox> <textbox name="LastName" value="@bind(vm.selectedCustomer.lastName)" cols="20" /> </row> <row> <hbox> <label value="Email" /> </hbox> <textbox name="firstName" value="@bind(vm.selectedCustomer.email)" cols="20" /> </row> </rows> </grid> </panelchildren> </panel> <separator /> <div align="center"> <button id="submit" label="Submit" onClick="@command('save')" /> <button id="cancel" label="Cancel" /> <!-- onClick="@command('closeThis')" --> </div> </window> </zk>
CustomerListVM.java
java
import java.util.ArrayList; import java.util.HashMap; import java.util.List; import org.zkoss.bind.annotation.BindingParam; import org.zkoss.bind.annotation.Command; import org.zkoss.bind.annotation.GlobalCommand; import org.zkoss.bind.annotation.Init; import org.zkoss.bind.annotation.NotifyChange; import org.zkoss.zk.ui.Executions; import org.zkoss.zul.Messagebox; public class CustomerListVM { private List<Customer> customerList = new ArrayList<Customer>(); private Customer curSelectedCustomer; public Customer getCurSelectedCustomer() { return curSelectedCustomer; } public void setCurSelectedCustomer(Customer curSelectedCustomer) { this.curSelectedCustomer = curSelectedCustomer; } @Init public void initSetup() { customerList = new CustomerData().getAllCustomers(); } public List<Customer> getallCustomers() { return customerList; } // @Command // public void addNewCustomer() { // final HashMap<String, Object> map = new HashMap<String, Object>(); // map.put("sCustomer", null); // map.put("recordMode", "NEW"); // Executions.createComponents("CustomerCRUD.zul", null, map); // } @Command public void editThisCustomer() { Messagebox.show("Edit Existing Customer Code goes here"); } // The following method will be called from CustomerCRUDVM after the save // When we say Notifychange("allcustomers), then ZUL list items will be // updated @GlobalCommand @NotifyChange("allCustomers") public void updateCustomerList(@BindingParam("pCustomer") Customer cust1, @BindingParam("recordMode") String recordMode) { if (recordMode.equals("NEW")) { customerList.add(cust1); } } @Command public void deleteThisCustomer() { Messagebox.show("Delete Existing Customer Code goes here"); } }
CustomerData.java
java
import java.util.ArrayList; import java.util.List; public class CustomerData { public List<Customer> getAllCustomers() { List<Customer> allcustomers = new ArrayList<Customer>(); Customer d1 = new Customer(); d1.setLastName("John"); d1.setFirstName("Mike"); d1.setEmail("
[email protected]
"); allcustomers.add(d1); d1 = new Customer(); d1.setLastName("James"); d1.setFirstName("Sean"); d1.setEmail("
[email protected]
"); allcustomers.add(d1); d1 = new Customer(); d1.setLastName("Smith"); d1.setFirstName("Williams"); d1.setEmail("
[email protected]
"); allcustomers.add(d1); d1 = new Customer(); d1.setLastName("Anderson"); d1.setFirstName("Harris"); d1.setEmail("
[email protected]
"); allcustomers.add(d1); d1 = new Customer(); d1.setLastName("Lee"); d1.setFirstName("Martin"); d1.setEmail("
[email protected]
"); allcustomers.add(d1); return allcustomers; } }
Customer.java
java
public class Customer { private String lastName; private String firstName; private String email; public String getLastName() { return lastName; } public void setLastName(String lastName) { this.lastName = lastName; } public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this.firstName = firstName; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } }
CustomerListComposer.java
java
import org.zkoss.zk.ui.*; import org.zkoss.zk.ui.event.*; import org.zkoss.zk.ui.util.*; import org.zkoss.zk.ui.ext.*; import org.zkoss.zk.au.*; import org.zkoss.zk.au.out.*; import org.zkoss.zul.*; import org.zkoss.zk.ui.select.SelectorComposer; import org.zkoss.zk.ui.select.annotation.Wire; import org.zkoss.zk.ui.select.annotation.Listen; import java.util.ArrayList; import java.util.HashMap; import java.util.List; public class CustomerListComposer extends SelectorComposer<Component> { public void doAfterCompose(Component comp) throws Exception { super.doAfterCompose(comp); } @Listen("onClick = #addNewCustomerButton") public void addNewCustomer() { final HashMap<String, Object> map = new HashMap<String, Object>(); map.put("sCustomer", null); map.put("recordMode", "NEW"); Executions.createComponents("CustomerCRUD.zul", null, map); } }
CustomerCRUDComposer.java
java
import org.zkoss.zk.ui.*; import org.zkoss.zk.ui.event.*; import org.zkoss.zk.ui.util.*; import org.zkoss.zk.ui.ext.*; import org.zkoss.zk.au.*; import org.zkoss.zk.au.out.*; import org.zkoss.zul.*; import org.zkoss.zk.ui.select.SelectorComposer; import org.zkoss.zk.ui.select.annotation.Wire; import org.zkoss.zk.ui.select.annotation.Listen; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.ArrayList; import java.util.Map; public class CustomerCRUDComposer extends SelectorComposer<Component> { @Wire("#CustomerCRUD") private Window win; public void doAfterCompose(Component comp) throws Exception { super.doAfterCompose(comp); } @Listen("onClick = #submit") public void save() { //Map args = new HashMap(); //args.put("pCustomer", this.selectedCustomer); //args.put("recordMode", this.recordMode); //BindUtils.postGlobalCommand(null, null, "updateCustomerList", args); win.detach(); } @Listen("onClick = #cancel") public void closeThis() { win.detach(); } }
Sorry, JavaScript must be enabled.
Change your browser options, then
try again
.