Componen, Fungsi & Event Framework zkoss - II [ Button - Date & Time - Radio & Checkbox ]

 

Berikut adalah contoh componen pada zkoss 

1. Button

<vbox>

<button label="Left" image="/img/Centigrade-Widget-Icons/ArrowLeft-16x16.png" hoverImage="/img//ArrowLeftGreen-16x16.png" width="125px" />

<button label="Right" image="/img/Centigrade-Widget-Icons/ArrowRight-16x16.png" hoverImage="/img//ArrowRightGreen-16x16.png" dir="reverse" width="125px" />

<button label="Above" image="/img/ArrowUp-16x16.png" hoverImage="/img/ArrowUpGreen-16x16.png" orient="vertical" width="125px" />

<button label="Below" image="/img/ArrowDown-16x16.png" hoverImage="/img/ArrowDownGreen-16x16.png" orient="vertical" dir="reverse" width="125px" />

</vbox>

2. Date & Time

<zk>

Calendar:<calendar/>

<separator/>

Timebox: <timebox id="tb" cols="14" format="a hh:mm:ss" onCreate="self.value = new Date()"/>

<separator/>

Datebox: <datebox id="db" cols="20" format="yyyy/MM/dd a hh:mm:ss"  onCreate="self.value = new Date()"/>

<separator/>

</zk>

3. Checkbox & RadioBox

<vbox width="100%" align="stretch">

ZK Online Survey

<radiogroup onCheck="choice.value = self.selectedItem.label">

<grid xmlns:ca="client/attribute" ca:data-scrollable="false">

<rows>

<row spans="5">

Which one area would you like ZK to improve upon?</row>

<row>

<radio label="IDE Support" />

<radio label="Bug Fixing" />

<radio label="Performance" />

<radio label="Backward Compatibility" />

<radio label="Offline Functionality" />

</row>

<row>

<radio label="Forum" />

<radio label="Smalltalk" />

<radio label="How-to Wiki" />

<radio label="Offical Web Site" />

<radio label="On-line Training" />

</row>

<row>

<radio label="ZK Demo" />

<radio label="Style Guide" />

<radio label="Developer Guide" />

<radio label="Developer Reference" />

<radio label="Component Developer's Guide" />

</row>

</rows>

</grid>

</radiogroup>

<hbox>

You have selected :

<label id="choice" />

</hbox>

<separator bar="true" />

Which layout component you like in ZK ?

<hbox>

<checkbox id="l1" label="Border" onCheck="doChecked()" />

<checkbox id="l2" label="Box" onCheck="doChecked()" />

<checkbox id="l3" label="Table" onCheck="doChecked()" />

<checkbox id="l4" label="Portal" onCheck="doChecked()" />

<checkbox id="l5" label="Column" onCheck="doChecked()" />

</hbox>

<hbox>

You have selected :

<label id="layout" />

</hbox>

<zscript>

void doChecked() {

layout.value = (l1.isChecked() ? l1.label+' ' : &quot;&quot;) 

+ (l2.isChecked() ? l2.label+' ' : &quot;&quot;)

+ (l3.isChecked() ? l3.label+' ' : &quot;&quot;) 

+ (l4.isChecked() ? l4.label+' ' : &quot;&quot;)  

+ (l5.isChecked() ? l5.label+' ' : &quot;&quot;);

}

</zscript>

</vbox>

Baca juga artikel yang berkaitan :

• Componen, Fungsi & Event Framework zkoss - III [ Bandboxes - Comboboxes ]
• Componen, Fungsi & Event Framework zkoss - IV [ Inputbox ]
• Componen, Fungsi & Event Framework zkoss - V [ WYSIWYG Editor ]
• Componen, Fungsi & Event Framework zkoss - VI [ Tabboxes - Splitters ]
• Componen, Fungsi & Event Framework zkoss - VII [ Listbox ]
• Componen, Fungsi & Event Framework zkoss - VIII [ Gridbox - I ]
• Componen, Fungsi & Event Framework zkoss - VIII [ Gridbox - II ]
• Componen, Fungsi & Event Framework zkoss - IX [ Tree - I ]
• Componen, Fungsi & Event Framework zkoss - IX [ Tree - II ]

Reference : https://www.zkoss.org/zksandbox/#g2