Berikut adalah contoh componen pada zkoss
1. Listbox
<window title="Listbox" border="normal">
<listbox rows="1" mold="select">
<listitem label="Inbox"/>
<listitem label="Received"/>
<listitem label="Draft"/>
</listbox>
<separator bar="true"/>
<listbox>
<listhead sizable="true">
<listheader align="center" width="40px"
image="/img/Centigrade-Widget-Icons/ArrowsUpDown-16x16.png" />
<listheader align="center" width="40px" image="/img/Centigrade-Widget-Icons/Envelope-16x16.png" />
<listheader align="center" width="40px"
image="/img/Centigrade-Widget-Icons/PaperClip-16x16.png" />
<listheader label="Subject" sort="auto"/>
<listheader label="Received" sort="auto"/>
</listhead>
<listitem height="28px">
<listcell image="/img/Centigrade-Widget-Icons/ArrowUpOrange-16x16.png" />
<listcell image="/img/Centigrade-Widget-Icons/EnvelopeOpen-16x16.png" />
<listcell image="/img/Centigrade-Widget-Icons/PaperClip-16x16.png" />
<listcell label="ZK Jet 0.8.0 is released" />
<listcell label="2008/11/17 17:41:29" />
</listitem>
<listitem height="28px">
<listcell image="/img/Centigrade-Widget-Icons/ArrowDown-16x16.png" />
<listcell image="/img/Centigrade-Widget-Icons/Envelope-16x16.png" />
<listcell image="/img/Centigrade-Widget-Icons/PaperClip-16x16.png" />
<listcell label="URLs for iPhone-Optimized Google Sites" />
<listcell label="2008/11/17 15:56:37" />
</listitem>
<listitem height="28px">
<listcell label=" " />
<listcell image="/img/Centigrade-Widget-Icons/EnvelopeOpen-16x16.png" />
<listcell label=" " />
<listcell label="Style Guide for ZK 3.5 released" />
<listcell label="2008/11/14 13:23:07" />
</listitem>
<listitem height="28px">
<listcell image="/img/Centigrade-Widget-Icons/ArrowUpOrange-16x16.png" />
<listcell image="/img/Centigrade-Widget-Icons/EnvelopeOpen-16x16.png" />
<listcell label=" " />
<listcell label="ZK Studio 0.9.0 released." />
<listcell label="2008/11/16 10:26:37" />
</listitem>
</listbox>
</window>
2. Listbox with data
<zk>
<zscript>
ListModel strset = new org.zkoss.zksandbox.grid.FakeListModel(20000);
</zscript>
<listbox id="list" width="200px" rows="10" model="${strset}">
<listhead>
<listheader label="Load on Demend" sort="auto"/>
</listhead>
</listbox>
</zk>
3. Listbox dengan checkmarks
<zk>
<button label="Toggle checkmark" onClick="box.checkmark = !box.checkmark"/>
<button label="Toggle multiple" onClick="box.multiple = !box.multiple"/>
<listbox id="box" multiple="true" checkmark="true">
<listhead>
<listheader label="Name"/>
<listheader label="Gender"/>
<listheader label="Age"/>
<listheader label="Description"/>
</listhead>
<listitem>
<listcell label="Mary"/>
<listcell label="FEMALE"/>
<listcell label="18"/>
<listcell label="A young lady."/>
</listitem>
<listitem>
<listcell label="John"/>
<listcell label="MALE"/>
<listcell label="20"/>
<listcell label="A college student."/>
</listitem>
<listitem>
<listcell label="Jane"/>
<listcell label="FEMALE"/>
<listcell label="32"/>
<listcell label="A remarkable artist."/>
</listitem>
<listitem>
<listcell label="Henry"/>
<listcell label="MALE"/>
<listcell label="29"/>
<listcell label="A graduate."/>
</listitem>
</listbox>
</zk>
4. Listbox With Paging
<zk>
Paging can be supported to locate at three position: Top, Bottom, and Both.
<radiogroup
onCheck="tree.pagingPosition = self.selectedItem.label;listbox.pagingPosition = self.selectedItem.label">
<radio label="top" />
<radio label="bottom" checked="true" />
<radio label="both" />
</radiogroup>
<separator/>
<button label="Change Paging Mold">
<attribute name="onClick">
listbox.pagingChild.mold = "os".equals(listbox.pagingChild.mold) ? "default" : "os";
</attribute>
</button>
<zscript>
List items = new org.zkoss.zksandbox.BigList(1000); //a big list of Integer
</zscript>
<listbox id="listbox" mold="paging" pageSize="10">
<listitem forEach="${items}">
<listcell label="${each}-1"/>
<listcell label="${each}-2"/>
<listcell label="${each}-3"/>
<listcell label="${each}-4"/>
</listitem>
</listbox>
</zk>
Reference : https://www.zkoss.org/zksandbox/#g2