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 :
Another new ZK fiddle
2
guest
172.68.3.6
k9aj2u
Apr 16, 2025 2:59:44 AM
link
Another new ZK fiddle
1
guest
172.68.174.139
k9aj2u
Apr 16, 2025 2:58:39 AM
link
Another new ZK fiddle
4
guest
172.70.211.162
2elmlng
Apr 15, 2025 10:00:25 AM
link
Another new ZK fiddle
2
guest
172.70.210.171
1ca152f
Apr 15, 2025 9:19:30 AM
link
Another new ZK fiddle
3
guest
172.69.22.96
3cvtbjb
Apr 15, 2025 8:49:28 AM
link
Another new ZK fiddle
2
guest
172.69.22.96
3cvtbjb
Apr 15, 2025 8:48:36 AM
link
Another new ZK fiddle
1
guest
172.71.158.18
c8bhc2
Apr 15, 2025 8:40:59 AM
link
Another new ZK fiddle
1
guest
162.158.167.89
3cvtbjb
Apr 15, 2025 8:27:55 AM
link
Another new ZK fiddle
1
guest
162.158.186.161
1ca152f
Apr 15, 2025 8:06:11 AM
link
combobox onChange onSelect
13
guest
141.101.76.83
2ju0ebe
Apr 15, 2025 7:58:20 AM
link
CustomerCRUD MVVM+MVC test
9
ojerteg
89.160.65.169
11gqlir
Nov 4, 2012 12:39:52 PM
link
resources
index.zul
zul
<?page title="CustomerList" contentType="text/html;charset=UTF-8"?> <zk> <!-- Playing around with a sample from http://emrpms.blogspot.in/2012/07/zk-mvvm-crud-without-db-connection-part.html The purpose was to try to see if it was possible to separate the UI knowledge from the view model when using MVVM. This is done by applying multiple composers and letting the composers handle the UI creation stuff while the MVVM binder handles update of the data model. This approach has the drawback that it is not clear what happens when a button is pressed (i.e that a window popups) since that binding now is in the composer. Other actions like saving data to the model is still visible though. An example on how this was done before can be seen in CustomerCrudVM where the window was @Wire-d into the VM and used in the @command annotaded methods. --> <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); } // @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, pkg$.CustomerCRUDComposer" 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="submitNewCustomer" label="Submit" onClick="@command('save')" /> <button id="cancelNewCustomer" 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 = #submitNewCustomer") // public void save() { // win.detach(); // } @Listen("onClick = #submitNewCustomer, #cancelNewCustomer") public void closeThis() { win.detach(); } }
Sorry, JavaScript must be enabled.
Change your browser options, then
try again
.