Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled 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 AMlinkLatest 10 Fiddles :
constraint binding textbox
3guest172.68.151.16220peldaDec 5, 2025 5:08:19 PMlinkAnother new ZK fiddle
2guest172.68.151.16320peldaDec 5, 2025 5:07:51 PMlinkAnother new ZK fiddle
1guest172.68.151.16220peldaDec 5, 2025 5:07:32 PMlinkAnother new ZK fiddle
1peggypeng172.71.154.99364f4neDec 5, 2025 9:24:31 AMlinktooltip example
2guest104.22.23.13rc1ntoDec 4, 2025 2:23:45 PMlinkAnother new ZK fiddle
1guest172.69.134.2277t7602Dec 4, 2025 1:40:46 PMlinkAnother new ZK fiddle
1peggypeng104.22.17.1802df6e3oDec 4, 2025 8:41:29 AMlinkonClose
1peggypeng172.68.87.248j8kd8aDec 3, 2025 4:10:26 AMlinkAnother new ZK fiddle
1peggypeng172.69.134.2271rm7f4eNov 26, 2025 3:31:24 AMlinkZK-5912-Suggestion
2rebeccalai104.22.20.1442qrmiiuNov 26, 2025 2:07:15 AMlinkAnother new ZK fiddle
4guest193.191.219.80c74icpAug 5, 2016 10:04:49 AMlinkresources
index.zulzul<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<window height="100%" id="root" position="center" width="100%" sclass="T_root">
<borderlayout>
<center autoscroll="true">
<include id="requests" src="requests.zul" sclass="T_requests" />
</center>
</borderlayout>
</window>
</zk>requests.zulzul<?page id="requestsPage" contentType="text/html;charset=UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<div id="requestDiv" apply="pkg$.RequestsController">
<tabbox id="allTabs" height="100%" width="100%" sclass="T_allTabs">
<!-- tabs will appear via RequestsController -->
<tabs id="tabsHeaders" sclass="T_tabsHeaders" />
<tabpanels id="tabsPanels" sclass="T_tabsPanels" />
</tabbox>
</div>
</zk>
RequestsController.javajavaimport java.util.Date;
import java.util.HashMap;
import java.util.Map;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Include;
import org.zkoss.zul.Tab;
import org.zkoss.zul.Tabbox;
import org.zkoss.zul.Tabpanel;
import org.zkoss.zul.Tabpanels;
import org.zkoss.zul.Tabs;
/**
*
*/
public class RequestsController extends SelectorComposer<Component> {
//<editor-fold defaultstate="collapsed" desc="attributes">
public static final String REQUEST = "request";
public static final String REQUESTS = "requests";
public static final String TAB_CLOSED = "tabClosed";
@Wire
private Tabbox allTabs;
@Wire
private Tabpanels tabsPanels;
@Wire
private Tabs tabsHeaders;
private final Map<Long, Request> tabs;
private final Map<Long, Tabpanel> panels;
private final Map<Long, Tab> tabz;
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="constructor">
public RequestsController() {
tabs = new HashMap<Long, Request>();
panels = new HashMap<Long, Tabpanel>();
tabz = new HashMap<Long, Tab>();
}
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="configuration">
@Override
public void doAfterCompose(Component component) throws Exception {
super.doAfterCompose(component);
InternetUser iUser = new InternetUser();
iUser.setLastname("Testing");
iUser.setFirstname("Test");
iUser.setStreet("TestStreet 8");
RequestInfo request = new RequestInfo();
request.setLang("NL");
request.setDtg(new Date());
request.setInternetUser(iUser);
request.setMedium(RequestMedium.EMAIL);
createTab(request);
}
private void createTab(Request heavyRequest) {
Map args = new HashMap();
// Tab creation
Tab newTab = new org.zkoss.zul.Tab(heavyRequest.getTitle());
newTab.setId("1");
newTab.setClosable(true);
tabsHeaders.appendChild(newTab);
tabs.put(Long.valueOf(newTab.getId()), heavyRequest);
// TabPanel creation
Tabpanel newTabPanel = new Tabpanel();
Component request = Executions.createComponents("request.zul", null, args);
System.out.println("component request: " + request.getClass());
Component component = request.getFirstChild().getFirstChild();
System.out.println("component: " + component.getClass());
Include include;
//add persDetails or iuDetails
include = new Include("iuDetails.zul");
include.setDynamicProperty("request", heavyRequest);
component.appendChild(include);
newTabPanel.appendChild(request);
tabsPanels.appendChild(newTabPanel);
panels.put(heavyRequest.getId(), newTabPanel);
tabz.put(heavyRequest.getId(), newTab);
// Focus
allTabs.setSelectedTab(newTab);
}
}
InternetUser.javajava/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
import java.util.Date;
/**
*
* @author mondelaers.p
*/
public class InternetUser {
private Long iUId;
private String lastname;
private String firstname;
private String phonenumber;
private String lang;
private Date registrationDTG;
private String street;
private String streetNum;
private String boxNum;
private String city;
private Integer countryId; // Country of the ADDRESS ! ! !
private String zip;
private String nationality;
public Long getiUId() {
return iUId;
}
public void setiUId(Long iUId) {
this.iUId = iUId;
}
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 getPhonenumber() {
return phonenumber;
}
public void setPhonenumber(String phonenumber) {
this.phonenumber = phonenumber;
}
public String getLang() {
return lang;
}
public void setLang(String lang) {
this.lang = lang;
}
public Date getRegistrationDTG() {
return registrationDTG;
}
public void setRegistrationDTG(Date registrationDTG) {
this.registrationDTG = registrationDTG;
}
public String getStreet() {
return street;
}
public void setStreet(String street) {
this.street = street;
}
public String getStreetNum() {
return streetNum;
}
public void setStreetNum(String streetNum) {
this.streetNum = streetNum;
}
public String getBoxNum() {
return boxNum;
}
public void setBoxNum(String boxNum) {
this.boxNum = boxNum;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
public Integer getCountryId() {
return countryId;
}
public void setCountryId(Integer countryId) {
this.countryId = countryId;
}
public String getZip() {
return zip;
}
public void setZip(String zip) {
this.zip = zip;
}
public String getNationality() {
return nationality;
}
public void setNationality(String nationality) {
this.nationality = nationality;
}
}
RequestInfo.javajava/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
/**
*
* @author mondelaers.p
*/
public class RequestInfo extends Request {
private String question;
private String summary = "";
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="constructor">
public RequestInfo() {
setDefaultPriority(4);
}
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="getters and setters">
public String getQuestion() {
return question;
}
public void setQuestion(String question) {
this.question = question;
}
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="overridden methods">
@Override
public String getDescription() {
StringBuilder sb = new StringBuilder("<html><p>Status : ").append("</p>");
sb.append("<p>Question : ").append(question).append("</p>");
sb.append("</html>");
return sb.toString();
}
@Override
public String getSummary() {
if (summary.isEmpty()) {
StringBuilder sb = new StringBuilder("Requested information :\n").append(this.question).append("\n");
if (getMedium() != null) {
sb.append("Medium: ").append(getMedium());
}
summary = sb.toString();
}
return summary;
}
@Override
public String getGroupName() {
return ("infoRequest.group.name");
}
@Override
public String getRequestDetail() {
StringBuilder sb = new StringBuilder("<html><p><u>Question :</u></p><p>").append(question).append("</p>");
if (getMedium() != null) {
sb.append("<p><u>via :</u> ").append(getMedium()).append("</p>");
}
sb.append("</html>");
return sb.toString();
}
@Override
public Object getRefId() {
return "";
}
@Override
public boolean isValidInDB() {
throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates.
}
}
Request.javajava/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
public abstract class Request {
//<editor-fold defaultstate="collapsed" desc="attributes">
private static final long serialVersionUID = -1594424052426493737L;
private Long id;
private Date dtg;
private String lang;
private RequestMedium medium;
private InternetUser internetUser;
private int defaultPriority;
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="constructor">
protected Request() {
}
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="abstracts">
/**
* Give a description of the concrete object of the request depending on its
* type: data on the solicitation; question; participation in an event ...
*
* @return
*/
public abstract String getSummary();
/**
* Returns the <code>RequestType</code> of the Request subclass
*
* @return RequestType the type of request
*/
public abstract boolean isValidInDB();
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="getters and setters">
public Long getId() {
return id;
}
public Date getDtg() {
return dtg;
}
public void setDtg(Date dtg) {
this.dtg = dtg;
}
public String getDtgString() {
SimpleDateFormat sdf = new SimpleDateFormat("dd HHmm MMM yy");
return sdf.format(dtg);
}
public String getLang() {
return lang;
}
public void setLang(String lang) {
this.lang = lang;
}
public InternetUser getInternetUser() {
return internetUser;
}
public void setInternetUser(InternetUser internetUser) {
this.internetUser = internetUser;
}
public RequestMedium getMedium() {
return medium;
}
public void setMedium(RequestMedium medium) {
this.medium = medium;
}
public abstract String getDescription();
public abstract String getGroupName();
public abstract String getRequestDetail();
public abstract Object getRefId();
public String getTitle() {
String format = "";
if (getDtg() != null) {
format += new SimpleDateFormat("dd HHmm MMM yyyy").format(getDtg());
format += " : ";
} else if (getDtg() != null && getInternetUser() != null) {
format += new SimpleDateFormat("dd HHmm MMM yyyy").format(getDtg());
format += " : " + getInternetUser().getLastname();
}
format = format + " (" + id + ")";
return format;
}
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="(pre/post load">
//</editor-fold>
@Override
public int hashCode() {
int hash = 0;
hash += (id != null ? id.hashCode() : 0);
return hash;
}
@Override
public boolean equals(Object object) {
// TODO: Warning - this method won't work in the case the id fields are not set
if (!(object instanceof Request)) {
return false;
}
Request other = (Request) object;
return !((this.id == null && other.id != null) || (this.id != null && !this.id.equals(other.id)));
}
@Override
public String toString() {
return getTitle() + " / ";
}
protected int getDefaultPriority() {
return defaultPriority;
}
protected void setDefaultPriority(int defaultPriority) {
this.defaultPriority = defaultPriority;
}
public Map<String, Class> getClasses() {
Map<String, Class> classes = new HashMap<String, Class>();
classes.put("internetUser", InternetUser.class);
return classes;
}
public Map<String, Object> getObjects() {
Map<String, Object> objects = new HashMap<String, Object>();
objects.put("internetUser", internetUser);
return objects;
}
}
RequestMedium.javajava/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
/**
*
* @author mondelaers.p
*/
public enum RequestMedium {
TF, EMAIL, LETTER , JOBSITE, FYSICAL, CTC_HRP, DGCOM
}
IUDetailsVM.javajavaimport java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.logging.Level;
import java.util.logging.Logger;
import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.util.resource.Labels;
import org.zkoss.zk.ui.ComponentNotFoundException;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.Path;
import org.zkoss.zk.ui.Sessions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventQueues;
import org.zkoss.zul.Messagebox;
import org.zkoss.zul.Window;
import org.zkoss.zk.ui.WrongValueException;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zul.Bandbox;
import org.zkoss.zul.Include;
import pkg$.Request;
/**
* @author janssens.r.gg
*/
public class IUDetailsVM {
//<editor-fold defaultstate="collapsed" desc="attributes">
private Request request;
private int age;
private boolean communication;
private boolean searchPersVisible = false;
private Include searchPers;
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="configuration">
public IUDetailsVM() {
}
@Init
public void initializeView() {
this.request = (Request) Executions.getCurrent().getAttribute("request");
// this.request = (Request) Sessions.getCurrent().getAttribute("request");
}
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="business">
@Command
@NotifyChange("age")
public void calculateAge(@BindingParam("date") Date date) {
Date dtg = date;
if (dtg != null) {
age = 40;
}
}
// public void onSelect$firstNationality() {
// int index = firstNationality.getSelectedIndex();
// Country selected = (Country) firstNationality.getListModel().getElementAt(index);
// selected.setLanguage(lang);
//
// if (selected.equals(belgium)) {
// secondNationality.setDisabled(true);
// secondNationality.setSelectedIndex(0);
// } else {
// secondNationality.setDisabled(false);
// secondNationality.setSelectedIndex(1);
// }
// }
@Command
public void openProfile() {
System.out.println("openprofile");
//To avoid wrong data in the profile for the selected InternetUser
Map<String, Boolean> params = new HashMap<String, Boolean>();
//Window window = (Window) Executions.createComponents("profiles.zul", null, params);
//window.setTitle(Labels.getLabel("person.profile.title"));
// window.setMaximizable(false);
//window.setClosable(true);
//window.setHeight("90%");
//window.setWidth("90%");
//window.doModal();
Messagebox.show("open profile");
}
@Command
@NotifyChange("request")
public void save() {
//request.getInternetUser().setNationality(firstNationality.getId());
try {
System.out.println("saving in IUDetailsVM");
} catch (ComponentNotFoundException e) {
System.out.println("error");
}
}
@Command
@NotifyChange("personSelected")
public void attachUser() {
Messagebox.show("AttachUser");
}
@Command
public void openNewClient() {
Window window = (Window) Executions.createComponents("business/m34/newClient.zul", null, null);
window.setMaximizable(false);
window.setClosable(true);
window.setWidth("710px");
window.doModal();
newPersonSelected();
}
private void setRobinsonListPerson() {
if (communication) {
}
}
private void newPersonSelected() {
BindUtils.postNotifyChange(null, null, IUDetailsVM.this, "personSelected");
}
private void newPersonAttached(String data, String name) {
}
@Command("onCheckRobinsonListCheckbox")
public void onCheckRobinsonListCheckbox() {
if (request == null || request.getInternetUser() == null || request.getInternetUser().getiUId() == null) {
return;
}
if (communication) {
} else {
}
EventQueues.lookup("communicationChanged", EventQueues.DESKTOP, Boolean.FALSE).publish(new Event("communicationEvent", null, new Object[]{request.getInternetUser(), communication}));
}
@Command
@NotifyChange("searchPersVisible")
public void searchPers(@BindingParam("include") Include include) {
searchPersVisible = !searchPersVisible;
searchPers = include;
searchPers.setVisible(searchPersVisible);
if (searchPersVisible) {
Clients.scrollIntoView(searchPers);
Bandbox persInfo = (Bandbox) searchPers.getChildPage().getFellow("persInfo").getFellow("fullname");
persInfo.open();
Events.echoEvent("onOpen", persInfo, null);
}
}
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="getters and setters">
public Request getRequest() {
return request;
}
public void setRequest(Request request) {
this.request = request;
}
// public void setAllCountries(List<Country> allCountries) {
// this.allCountries = allCountries;
// }
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public boolean getCommunication() {
return communication;
}
public void setCommunication(boolean communication) {
this.communication = communication;
}
public boolean isSearchPersVisible() {
return searchPersVisible;
}
public String getLastName() {
return "Peter";
}
//</editor-fold>
}
iuDetails.zulzul<?xml version="1.0" encoding="UTF-8"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<panel id="panel" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('pkg$.IUDetailsVM')" title="${labels.iu.window.title}" framable="true" border="normal" collapsible="true" height="385px">
<panelchildren style="overflow: auto" >
<grid form="@id('fx') @load(vm.request) @save(vm.request, before='save')" vflex="1" hflex="1">
<columns>
<column width="12%" />
<column width="74%" />
<column width="13%" />
</columns>
<rows>
<row>
<label value="${labels.request.person.title}" />
<radiogroup >
<radio value="F" label="${labels.request.person.gender.f}" />
<space width="8px" />
<radio value="M" label="${labels.request.person.gender.m}" />
<space width="8px" />
<radio value="A" label="${labels.request.person.gender.a}" disabled="true" />
</radiogroup>
<checkbox label="${labels.m00.robinsonlist.checkbox.text}" checked="@bind(vm.communication)" onCheck="@command('onCheckRobinsonListCheckbox')"/>
</row>
<row>
<label value="${labels.request.person.name}" />
<textbox value="@bind(vm.lastName)" width="70%" />
<label/>
</row>
<row>
<label value="${labels.request.person.firstname}" />
<textbox value="@bind(fx.internetUser.firstname)" width="70%" />
<label/>
</row>
<row>
<label value="" />
<hbox>
<datebox id="dbBirthDate" width="110px" constraint="no future" onChange="@command('calculateAge', date=dbBirthDate.value)" sclass="T_DA_dbBirthDate" />
<space width="20px" />
<label id="lblAge" value="@load(vm.age)" sclass="T_LA_lblAge" />
<label value="${labels.request.person.age.an}" />
</hbox>
<label/>
</row>
<row>
<label value="${labels.request.person.language}" />
<radiogroup selectedItem="@bind(fx.internetUser.lang)">
<radio value="fr" label="Fr" radiogroup="${self.parent}" />
<space width="7px" />
<radio value="nl" label="Ned" radiogroup="${self.parent}" />
<space width="7px" />
<radio value="de" label="De" radiogroup="${self.parent}" />
</radiogroup>
<label/>
</row>
<row>
<label value="${labels.request.person.nationality}" />
<listbox mold="select" width="200px" />
<label/>
</row>
<row>
<button id="save" label="Save" disabled="@load(not fxStatus.dirty)" onClick="@command('save')" style="margin: 4px" sclass="T_BU_save" />
<hbox>
<button label="PROFILE" onClick="@command('openProfile')" />
<space width="10px" />
<button label="${labels.m30.searchAresUser}" onClick="@command('searchPers',include=searchPers)" />
<space width="10px" />
<button id="btAttachUser" label="${labels.m30.attachAresUser}" onClick="@command('attachUser')" sclass="T_BU_btAttachUser" />
</hbox>
<label/>
</row>
<row>
<label/>
<button id="btNewClient" label="${labels.m30.consolidateInternetUser}" onClick="@command('openNewClient')" sclass="T_BU_btNewClient" autodisable="self" />
<label/>
</row>
<row>
<label/>
<hlayout>
<include id="searchPers" src="/module/common/persinfo" visible="false" sclass="T_searchPers" />
<separator width="5px"/>
</hlayout>
<button label="${c:l('4377')}" onClick="@command('showPropositions',include=searchPers)" visible="@load(vm.searchPersVisible)" style="margin-top: 1px"/>
</row>
</rows>
</grid>
</panelchildren>
</panel>
</zk>
request.zulzul<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<div>
<panel>
<panelchildren />
</panel>
</div>
</zk>