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 AMlinkAnchornav
19guest172.69.33.63spblbuNov 16, 2020 10:27:48 AMlinkresources
index.zulzul<zk>
<style>
.z-anchornav-link-active {
background-color: yellow;
}
.padding{
padding: 20px;
}
.title{
font-size: 1.5em;
font-weight: bold;
}
</style>
<window border="normal" title="hello" height="400px" width="600px" xmlns:ca="client/attribute" apply="pkg$.DynamicAnchorNavComposer">
<hlayout vflex="1" hflex="1">
<div class="padding">
<anchornav id="anchornav" name="anchor1">
<vlayout id="titles">
</vlayout>
</anchornav>
</div>
<div class="padding" vflex="1" hflex="1">
<div vflex="1" style="overflow: auto;" ca:data-anchornav-scroll="anchor1" hflex="1" id="content">
</div>
</div>
</hlayout>
</window>
</zk>
DynamicAnchorNavComposer.javajavaimport java.util.HashMap;
import java.util.Map;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zkmax.zul.Coachmark;
import org.zkoss.zul.A;
import org.zkoss.zul.Div;
import org.zkoss.zul.Label;
import org.zkoss.zul.Separator;
import org.zkoss.zul.Vlayout;
public class DynamicAnchorNavComposer extends SelectorComposer {
@Wire
private Vlayout titles;
@Wire
private Div content;
private Map<String,Map<String, String>> contentMap;
@Override
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
generateContent();
for (String stringId : contentMap.keySet()) {
A title = new A();
title.setClientAttribute("data-anchornav-target", "$"+stringId);
title.appendChild(new Label(contentMap.get(stringId).get("title")));
titles.appendChild(title);
Div contentDiv = new Div();
contentDiv.setId(stringId);
contentDiv.appendChild(new Label(contentMap.get(stringId).get("content")));
content.appendChild(contentDiv);
content.appendChild(new Separator());
}
}
private void generateContent() {
contentMap = new HashMap<String, Map<String,String>>();
for (int i = 0; i < 10; i++) {
String key = "id"+i;
contentMap.put(key,new HashMap<String,String>());
contentMap.get(key).put("title", "title "+ i);
contentMap.get(key).put("content", LOREM);
}
}
public static String LOREM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi tortor, porta quis pharetra non, pharetra ut lacus. Suspendisse tristique posuere volutpat. Etiam at ullamcorper nunc, quis tempus libero. Praesent condimentum vel mauris condimentum fermentum. Sed eget urna id odio congue dictum. Nam blandit finibus purus, in cursus nisi porta quis. Aliquam dui lorem, rutrum a eros et, elementum euismod lectus. Etiam in erat porttitor, dignissim ante sit amet, ullamcorper mi. Maecenas maximus, nisl quis blandit aliquet, mauris libero tincidunt velit, et posuere eros nibh at diam. Donec cursus, orci vel commodo luctus, turpis est ultrices sem, ut ultrices libero massa ac enim. Donec facilisis tellus magna, eget condimentum risus facilisis in. Ut sit amet ultricies sapien. Integer justo ipsum, scelerisque vestibulum pulvinar ut, varius quis nisi.\r\n" +
"\r\n" +
"Aliquam erat volutpat. Phasellus a molestie nulla, id ornare magna. Sed mollis ut risus ac hendrerit. Donec dignissim, tellus id bibendum tincidunt, ipsum diam congue lacus, at rhoncus velit nulla vel est. Fusce lacinia, nunc sit amet maximus faucibus, est metus dignissim felis, eu hendrerit erat dui sit amet magna. Vestibulum vehicula magna ac urna hendrerit, eu egestas neque varius. Sed posuere mauris id posuere congue. Sed eu felis vestibulum, gravida arcu non, dignissim quam.\r\n" +
"\r\n" +
"Mauris vel ipsum eget neque finibus tincidunt. Integer sem velit, vestibulum sit amet rutrum vitae, imperdiet id arcu. Ut pellentesque sem et mattis blandit. Maecenas pellentesque tincidunt risus ornare dictum. Aliquam consectetur tortor varius posuere congue. Quisque dictum sagittis maximus. Suspendisse eget leo cursus, venenatis risus a, vestibulum orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt nulla ut lacus tincidunt molestie. Nulla ac venenatis ligula. Praesent faucibus venenatis lorem at tristique.\r\n" +
"\r\n" +
"Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin vitae mattis ligula. Donec sed neque vitae libero ultrices volutpat a in lectus. Nam ultricies arcu nec eros semper, in rhoncus eros pellentesque. Suspendisse imperdiet viverra risus, id ornare diam hendrerit a. Pellentesque quis auctor arcu, quis tristique nibh. Phasellus tincidunt nunc condimentum nulla dapibus commodo. Quisque feugiat lorem eget ipsum placerat condimentum varius eget nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam dignissim ligula vel placerat faucibus.\r\n" +
"\r\n" +
"Duis odio diam, mattis in finibus at, volutpat quis risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non dolor ullamcorper, tincidunt orci ac, aliquet augue. Nulla in nisi turpis. Nulla convallis ante pharetra tortor congue, eu laoreet felis sodales. Cras pellentesque, nunc eget viverra venenatis, nibh diam pretium sem, eget faucibus velit quam eu mauris. Curabitur laoreet, enim vel feugiat fringilla, risus mi posuere lectus, mollis rutrum dolor ligula in mi. Fusce sed pretium odio. Phasellus dignissim justo quis purus sollicitudin, a elementum est rutrum. Integer elementum ultricies arcu. Nam ultrices nibh vel tortor luctus mollis. Etiam ullamcorper molestie lorem ut scelerisque.\r\n" +
"\r\n" +
"Etiam iaculis orci ut diam convallis suscipit. Etiam at erat aliquam, luctus ipsum at, varius enim. Donec porttitor hendrerit turpis, eu mattis risus iaculis eget. Quisque sagittis, tortor quis ultricies aliquam, dui.";
}