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
1guest220.135.202.140v997qrOct 8, 2014 9:05:10 AMlinkresources
index.zulzul<zk>
<window apply="pkg$.LayoutSampleComposer" vflex="1">
<vlayout hflex="1" vflex="1">
<div height="200px">
Master 基本資料
</div>
Detail 清單
<vlayout id="vlayout" hflex="1" vflex="1" spacing="15px" style="overflow: auto;">
<template name="list" var="each">
<vlayout>
<hlayout hflex="1">
<textbox hflex="1" value="${each.id}" readonly="true" />
<textbox hflex="1" value="${each.field1}" id="${each.id}_field1" />
<textbox hflex="1" value="${each.field2}" id="${each.id}_field2" />
<textbox hflex="1" value="${each.field3}" id="${each.id}_field3" />
<textbox hflex="1" value="${each.field4}" id="${each.id}_field4" />
</hlayout>
<hlayout hflex="1">
<textbox hflex="1" value="${each.field5}" id="${each.id}_field5" />
<textbox hflex="1" value="${each.field6}" id="${each.id}_field6" />
<textbox hflex="1" value="${each.field7}" id="${each.id}_field7" />
<textbox hflex="1" value="${each.field8}" id="${each.id}_field8" />
<textbox hflex="1" value="${each.field9}" id="${each.id}_field9" />
</hlayout>
<hlayout hflex="1">
<textbox hflex="1" value="${each.field10}" id="${each.id}_field10" />
<textbox hflex="1" value="${each.field11}" id="${each.id}_field11" />
<textbox hflex="1" value="${each.field12}" id="${each.id}_field12" />
<textbox hflex="1" value="${each.field13}" id="${each.id}_field13" />
<textbox hflex="1" value="${each.field14}" id="${each.id}_field14" />
</hlayout>
</vlayout>
</template>
</vlayout>
</vlayout>
</window>
</zk>LayoutSampleComposer.javajava
import java.util.ArrayList;
import java.util.List;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Textbox;
import org.zkoss.zul.Vlayout;
import org.zkoss.zul.Window;
public class LayoutSampleComposer extends SelectorComposer<Window> {
private static final long serialVersionUID = 7475939125370764603L;
@Wire
private Vlayout vlayout;
private List<Bean> list;
private DataRenderer renderer = new DataRenderer();
public void doAfterCompose(Window comp) throws Exception {
super.doAfterCompose(comp);
list = new ArrayList<Bean>();
//should load data from DB, here use dummy data
for (int i = 0; i < 10; i++) {
list.add(new Bean(i, "field1", "field2", "field3", "field4", "field5",
"field6", "field7", "field8", "field9", "field10", "field11",
"field12", "field13", "field14"));
}
constructUI();
}
private void constructUI() throws Exception {
for (Bean bean : list) {
renderer.render(vlayout, bean, list.indexOf(bean), "list");
}
}
@Listen("onChange=#vlayout textbox")
public void saveData(Event event) {
Textbox tb = (Textbox) event.getTarget();
String[] id = tb.getId().split("_");
Bean updatebean = null;
for (Bean bean : list) {
if (bean.getId() == Integer.parseInt(id[0])) {
updatebean = bean;
break;
}
}
if (id[1].equals("field1")) {
updatebean.setField1(tb.getValue());
} else if (id[1].equals("field2")) {
updatebean.setField2(tb.getValue());
} else if (id[1].equals("field3")) {
updatebean.setField3(tb.getValue());
} else if (id[1].equals("field4")) {
updatebean.setField4(tb.getValue());
} else if (id[1].equals("field5")) {
updatebean.setField5(tb.getValue());
} else if (id[1].equals("field6")) {
updatebean.setField6(tb.getValue());
} else if (id[1].equals("field7")) {
updatebean.setField7(tb.getValue());
} else if (id[1].equals("field8")) {
updatebean.setField8(tb.getValue());
} else if (id[1].equals("field9")) {
updatebean.setField9(tb.getValue());
} else if (id[1].equals("field10")) {
updatebean.setField10(tb.getValue());
} else if (id[1].equals("field11")) {
updatebean.setField11(tb.getValue());
} else if (id[1].equals("field12")) {
updatebean.setField12(tb.getValue());
} else if (id[1].equals("field13")) {
updatebean.setField13(tb.getValue());
} else if (id[1].equals("field14")) {
updatebean.setField14(tb.getValue());
} else {
System.out.println("unknown field");
}
System.out.println(updatebean.getId() + ", " + updatebean.getField12());
//save updatebean to DB
}
}
Bean.javajava
public class Bean {
private int id;
private String field1, field2, field3, field4, field5;
private String field6, field7, field8, field9, field10;
private String field11, field12, field13, field14;
public Bean() {
}
public Bean(int id, String field1, String field2, String field3,
String field4, String field5, String field6, String field7,
String field8, String field9, String field10, String field11,
String field12, String field13, String field14) {
super();
this.id = id;
this.field1 = field1;
this.field2 = field2;
this.field3 = field3;
this.field4 = field4;
this.field5 = field5;
this.field6 = field6;
this.field7 = field7;
this.field8 = field8;
this.field9 = field9;
this.field10 = field10;
this.field11 = field11;
this.field12 = field12;
this.field13 = field13;
this.field14 = field14;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getField1() {
return field1;
}
public void setField1(String field1) {
this.field1 = field1;
}
public String getField2() {
return field2;
}
public void setField2(String field2) {
this.field2 = field2;
}
public String getField3() {
return field3;
}
public void setField3(String field3) {
this.field3 = field3;
}
public String getField4() {
return field4;
}
public void setField4(String field4) {
this.field4 = field4;
}
public String getField5() {
return field5;
}
public void setField5(String field5) {
this.field5 = field5;
}
public String getField6() {
return field6;
}
public void setField6(String field6) {
this.field6 = field6;
}
public String getField7() {
return field7;
}
public void setField7(String field7) {
this.field7 = field7;
}
public String getField8() {
return field8;
}
public void setField8(String field8) {
this.field8 = field8;
}
public String getField9() {
return field9;
}
public void setField9(String field9) {
this.field9 = field9;
}
public String getField10() {
return field10;
}
public void setField10(String field10) {
this.field10 = field10;
}
public String getField11() {
return field11;
}
public void setField11(String field11) {
this.field11 = field11;
}
public String getField12() {
return field12;
}
public void setField12(String field12) {
this.field12 = field12;
}
public String getField13() {
return field13;
}
public void setField13(String field13) {
this.field13 = field13;
}
public String getField14() {
return field14;
}
public void setField14(String field14) {
this.field14 = field14;
}
}
DataRenderer.javajava
import org.zkoss.xel.VariableResolver;
import org.zkoss.xel.XelException;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.Template;
public class DataRenderer {
public void render(Component parent, final Object data, int index, String name) throws Exception {
Template tm = parent.getTemplate(name);
if (tm != null) {
tm.create(parent, null, new VariableResolver() {
public Object resolveVariable(String name) throws XelException {
return "each".equals(name) ? data : null;
}
}, null);
}
}
}