Berikut adalah contoh componen pada zkoss
1. Gridbox
<zk>
<grid>
<columns sizable="true">
<column label="Type" sort="auto"/>
<column label="Content"/>
</columns>
<rows>
<row>
<label value="File:"/>
<textbox width="98%"/>
</row>
<row>
<label value="Type:"/>
<hlayout>
<listbox rows="1" mold="select">
<listitem label="Java Files,(*.java)"/>
<listitem label="All Files,(*.*)"/>
</listbox>
<button label="Browse..."/>
</hlayout>
</row>
<row>
<label value="Options:"/>
<textbox rows="3" width="98%"/>
</row>
</rows>
</grid>
</zk>
2. Grid with Sorting & Menu
<zk>
<grid vflex="1">
<columns menupopup="auto">
<column label="Author" sort="auto"/>
<column label="Title" sort="auto"/>
<column label="Publisher" sort="auto"/>
<column label="Hardcover" sort="auto"/>
</columns>
<rows>
<row>
<label value="Philip Hensher"/>
<label value="The Northern Clemency"/>
<label value="Knopf (October 30, 2008)"/>
<label value="608 pages"/>
</row>
<row>
<label value="Philip Hensher"/>
<label value="The Fit"/>
<label value="HarperPerennial (April 4, 2005)"/>
<label value="240 pages"/>
</row>
<row>
<label value="Philip Hensher"/>
<label value="Kitchen Venom"/>
<label value="Flamingo (May 19, 2003)"/>
<label value="336 pages"/>
</row>
<row>
<label value="Michael Greenberg"/>
<label value="Hurry Down Sunshine"/>
<label value="Other Press (September 9, 2008)"/>
<label value="240 pages"/>
</row>
<row>
<label value="Michael Greenberg"/>
<label value="Painless Vocabulary (Painless)"/>
<label value="Barron's Educational Series (September 1, 2001)"/>
<label value="292 pages"/>
</row>
<row>
<label value="Rick Perlstein"/>
<label value="Nixonland: The Rise of a President and the Fracturing of America"/>
<label value="Scribner; 1st Scribner Hardcover Ed edition (May 13, 2008)"/>
<label value="896 pages"/>
</row>
<row>
<label value="Rick Perlstein"/>
<label value="Nixonland"/>
<label value="Simon & Schuster (May 13, 2008)"/>
<label value="100 pages"/>
</row>
</rows>
</grid>
</zk>
3. Grid's Master-Details
<zk>
<style>
.myimg {
margin: 5px; border: 1px solid #B0C75E;
}
div.z-column-cnt {
text-align: center; font-weight: bold;
}
div.z-row-cnt span {
font-family: arial, sans-serif;
color: #0E3A99;
}
</style>
<zscript>
import org.zkoss.zksandbox.*;
Comparator asc = new RowDetailComparator(true),
dsc = new RowDetailComparator(false);
</zscript>
<grid hflex="1" vflex="1">
<columns>
<column width="40px" />
<column sortAscending="${asc}" sortDescending="${dsc}" label="Product Name"/>
<column width="100px" label="Price"/>
<column label="Item location"/>
</columns>
<rows>
<row>
<detail open="true">
<hlayout>
<image sclass="myimg" width="100px" height="100px"
src="/img/item1.jpg" />
<vlayout>
<label
value="Item Specifics - Item Condition "
style="font-weight:bold;font-style: italic;" />
<hlayout>
<label value="Condition:" />
<label value="Used"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="Brand:" />
<label value="Apple"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="Technology:" />
<label value="DVI"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="Monitor Type:" />
<label value="LCD/Flat Panel"
style="font-weight:bold;" />
</hlayout>
</vlayout>
</hlayout>
</detail>
<label
value="Apple 20-inch Aluminum Cinema Display M9177/A" />
<label style="color:green;float:right;"
value="US $202.50" />
<label value="tulsa, ok, United States" />
</row>
<row>
<detail fulfill="onOpen">
<hlayout>
<image sclass="myimg" width="100px" height="100px"
src="/img/item2.jpg" />
<vlayout>
<label
value="Item Specifics"
style="font-weight:bold;font-style: italic;" />
<hlayout>
<label value="Condition:" />
<label value="Used"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="Brand:" />
<label value="Kyocera"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="Phone Type:" />
<label value="Phones without Service Contrac"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="Product Type:" />
<label value="Cell Phones"
style="font-weight:bold;" />
</hlayout>
</vlayout>
</hlayout>
</detail>
<label
value="Kyocera Strobe K612B MetroPCS Metro PCS Cell Phone L@@K" />
<label style="color:green;float:right;"
value="US $74.99" />
<label value="Speedy Shipping, USA, United States" />
</row>
<row>
<detail fulfill="onOpen">
<hlayout>
<image sclass="myimg" width="100px" height="100px"
src="/img/item3.jpg" />
<vlayout>
<label
value="Item Specifics - Video Game Systems"
style="font-weight:bold;font-style: italic;" />
<hlayout>
<label value="Manufacturer:" />
<label value="Microsoft"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="Platform:" />
<label value="Microsoft Xbox 360"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="MPN:" />
<label value="52T-00013"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="Condition:" />
<label value="Used"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="Condition:" />
<label value="Used"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="Media Type:" />
<label value="DVD-ROM"
style="font-weight:bold;" />
</hlayout>
</vlayout>
</hlayout>
</detail>
<label
value="Halo 3 ed. xbox 360 bundle pack" />
<label style="color:green;float:right;"
value="US $350.00" />
<label value="middletown, PA, United States" />
</row>
<row>
<detail fulfill="onOpen">
<hlayout>
<image sclass="myimg" width="100px" height="100px"
src="/img/item4.jpg" />
<vlayout>
<label
value="Item Specifics - Cell Phones & Smartphones"
style="font-weight:bold;font-style: italic;" />
<hlayout>
<label value="Carrier:" />
<label value="AT&T, Cingular"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="Brand:" />
<label value="Apple iPhone"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="Technology:" />
<label value="GSM"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="Camera:" />
<label value="1-2 Megapixels"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="Condition:" />
<label value="Used"
style="font-weight:bold;" />
</hlayout>
<hlayout>
<label value="Features:" />
<label value="Bluetooth Enabled, Calendar, Color Screen, Email Access, GPS, Internet Browser, MP3 Player, PDA-PC Sync, SMS-Text Messaging, Speakerphone, Touch Screen, USB Interface"
style="font-weight:bold;" />
</hlayout>
</vlayout>
</hlayout>
</detail>
<label
value="Apple iPhone 8GB - 1st Generation, Version 2.0" />
<label style="color:green;float:right;"
value="US $300.00" />
<label value="Aspen, Co, United States" />
</row>
</rows>
</grid>
</zk>
Reference : https://www.zkoss.org/zksandbox/#g2