Componen, Fungsi & Event Framework zkoss - VIII [ Gridbox - I ]

 

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 &amp; 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="&#36;{asc}" sortDescending="&#36;{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 &amp; Smartphones"

style="font-weight:bold;font-style: italic;" />

<hlayout>

<label value="Carrier:" />

<label value="AT&amp;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