Processing...

Suggested case list:

Using timer to refresh a grid

383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlink

user model to move item to another listbox

120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlink

Disabled list item row passed to VM-1981

296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlink

Disabled list item row passed to VM-1981

295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlink

Disabled list item row passed to VM-1981

294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlink

grid sample with ListModel/RowRenderer

816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlink

grid sample with ListModel/RowRenderer

809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlink

grid sample with ListModel/RowRenderer

196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlink

grid sample with ListModel/RowRenderer

195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlink

grid sample with ListModel/RowRenderer

194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlink

grid sample with ListModel/RowRenderer

193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlink

grid sample with ListModel/RowRenderer

192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlink

grid sample with ListModel/RowRenderer

191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlink

Hierarchy table without using ZK PE/EE

1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlink

grid sample with ListModel/RowRenderer

128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlink

user model to move item to another listbox

1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlink

Using timer to refresh a grid

1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlink

Fire a event from child iframe

1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlink

Textbox input restriction sample

1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlink

Test web core taglib in ZUL

1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlink

Latest 10 Fiddles :

ComboBox - Selection with Checkboxes

25guest162.158.187.7elaaadMar 29, 2024 7:57:07 AMlink

ComboBox - Selection with Checkboxes

24guest172.70.206.179elaaadMar 29, 2024 7:27:32 AMlink

check

244guest172.71.126.18620t2jmoMar 29, 2024 7:08:48 AMlink

frozen scroll

1guest172.69.33.373j82a06Mar 28, 2024 8:03:44 AMlink

Gmarker and forEach

1guest172.68.67.1362lpvk1hMar 28, 2024 7:29:50 AMlink

Gmaps

1guest172.68.67.1363dvghg5Mar 28, 2024 7:28:20 AMlink

grid demo

5guest172.71.158.2371grhhu3Mar 27, 2024 7:46:36 AMlink

grid demo

4guest172.71.158.2371grhhu3Mar 27, 2024 7:46:25 AMlink

grid demo

3guest172.71.154.181grhhu3Mar 27, 2024 7:44:16 AMlink

grid demo

2guest172.71.154.181grhhu3Mar 27, 2024 7:43:58 AMlink

CRUD

1guest186.77.193.1812g4t7l3Nov 20, 2019 3:28:08 AMlink

resources

index.zulzul<?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.javajava 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.zulzul<?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.javajavaimport 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.javajava 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.javajava 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.javajavaimport 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.javajavaimport 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(); } }