Processing...

Suggested case list:

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

identify firefox or not in server side

1TonyQ198.203.175.1751nv2qreDec 10, 2011 4:25:04 AMlink

ZK addThis integration

1TonyQ198.203.175.1751apl96jNov 5, 2011 4:12:50 AMlink

Latest 10 Fiddles :

Another new ZK fiddle

1guest202.88.250.8030tu528Dec 7, 2019 5:02:20 AMlink

Using timer to refresh a grid

377guest189.211.185.16225nk0uiDec 7, 2019 12:52:31 AMlink

biglistbox scroll override

1guest213.61.180.1903hha7jdDec 6, 2019 9:49:15 AMlink

biglistbox scroll override

15guest220.134.32.2421pq0c6pDec 6, 2019 8:42:33 AMlink

Another new ZK fiddle

14guest220.134.32.2421pq0c6pDec 6, 2019 8:41:57 AMlink

biglistbox override

13guest220.134.32.2421pq0c6pDec 6, 2019 8:41:15 AMlink

Another new ZK fiddle

12guest220.134.32.2421pq0c6pDec 6, 2019 8:40:53 AMlink

Another new ZK fiddle

11guest220.134.32.2421pq0c6pDec 6, 2019 8:39:38 AMlink

biglistbox override

10guest220.134.32.2421pq0c6pDec 6, 2019 8:33:13 AMlink

biglistbox override

9guest220.134.32.2421pq0c6pDec 6, 2019 8:32:56 AMlink

CRUD

2guest186.77.193.1812g4t7l3Nov 20, 2019 3:28:27 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("mike@yahoo.com"); allcustomers.add(d1); d1 = new Customer(); d1.setLastName("James"); d1.setFirstName("Sean"); d1.setEmail("James@yahoo.com"); allcustomers.add(d1); d1 = new Customer(); d1.setLastName("Smith"); d1.setFirstName("Williams"); d1.setEmail("Smith@yahoo.com"); allcustomers.add(d1); d1 = new Customer(); d1.setLastName("Anderson"); d1.setFirstName("Harris"); d1.setEmail("Harris@yahoo.com"); allcustomers.add(d1); d1 = new Customer(); d1.setLastName("Lee"); d1.setFirstName("Martin"); d1.setEmail("Martin@yahoo.com"); 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(); } }