Suggested case list:
Disabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkidentify firefox or not in server side
1TonyQ198.203.175.1751nv2qreDec 10, 2011 4:25:04 AMlinkZK addThis integration
1TonyQ198.203.175.1751apl96jNov 5, 2011 4:12:50 AMlinkLatest 10 Fiddles :
Another new ZK fiddle
1guest202.88.250.8030tu528Dec 7, 2019 5:02:20 AMlinkUsing timer to refresh a grid
377guest189.211.185.16225nk0uiDec 7, 2019 12:52:31 AMlinkbiglistbox scroll override
1guest213.61.180.1903hha7jdDec 6, 2019 9:49:15 AMlinkbiglistbox scroll override
15guest220.134.32.2421pq0c6pDec 6, 2019 8:42:33 AMlinkAnother new ZK fiddle
14guest220.134.32.2421pq0c6pDec 6, 2019 8:41:57 AMlinkbiglistbox override
13guest220.134.32.2421pq0c6pDec 6, 2019 8:41:15 AMlinkAnother new ZK fiddle
12guest220.134.32.2421pq0c6pDec 6, 2019 8:40:53 AMlinkAnother new ZK fiddle
11guest220.134.32.2421pq0c6pDec 6, 2019 8:39:38 AMlinkbiglistbox override
10guest220.134.32.2421pq0c6pDec 6, 2019 8:33:13 AMlinkbiglistbox override
9guest220.134.32.2421pq0c6pDec 6, 2019 8:32:56 AMlinkCRUD
2guest186.77.193.1812g4t7l3Nov 20, 2019 3:28:27 AMlinkresources
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();
}
}