Berikut adalah contoh componen pada zkoss
1. Event Listener
<zk>
<style dynamic="true">
.z-label.focus {
color: #90BCE6;
}
</style>
<zscript>
void changeStyle(Label text) {
if ("focus".equals(text.sclass)) {
text.sclass = "";
} else {
text.sclass = "focus";
}
}
</zscript>
<vbox>
<hbox><label id="t1" value="text1:"/>
<textbox id="text1">
<attribute name="onFocus">
changeStyle(t1);
</attribute>
<attribute name="onBlur">
changeStyle(t1);
</attribute>
</textbox>
</hbox>
<hbox><label id="t2" value="text2:"/> <textbox id="text2" onBlur="changeStyle(t2)" onFocus="changeStyle(t2)"/></hbox>
<hbox>
<button label="change focus to text1" onClick="text1.focus();"/>
<button label="change focus to text2">
<attribute name="onClick">
text2.focus();
</attribute>
</button>
</hbox>
</vbox>
</zk>
2. Keystroke Event
<zk>
<grid width="400px">
<rows>
<row>
Password
<textbox id="inp" onOK="doOk()" onCancel="doCancel()" ctrlKeys="^a#f8" onCtrlKey="doCtrlKey()" type="password" value="123456789" width="150px" />
</row>
</rows>
</grid>
<zscript>{
void doOk() {
Messagebox.show("ENTER key is pressed", "OK", Messagebox.OK, Messagebox.EXCLAMATION);
inp.focus();
}
void doCancel() {
Messagebox.show("ESC key is pressed", "CANCEL", Messagebox.OK, Messagebox.EXCLAMATION);
inp.focus();
}
void doCtrlKey() {
Messagebox.show(event.getKeyCode()+" is pressed", "CtrlKey", Messagebox.OK, Messagebox.EXCLAMATION);
inp.focus();
}
inp.focus();
}</zscript>
</zk>
3. onChanging Event
<grid width="100%">
<rows>
<row>onChanging textbox: <textbox id="t1" onChanging="copy.value = event.value"/></row>
<row>instant copy: <textbox id="copy" readonly="true"/></row>
</rows>
</grid>
4. onOpen Event
<groupbox id="root" mold="3d" open="false" width="300px">
<caption image="/img/Centigrade-Widget-Icons/FirstWindow-24x24.png" label="Please Click Me!"/>
<div fulfill="root.onOpen=/misc/includedHello.zul"/>
</groupbox>
Saat diklik
Reference : https://www.zkoss.org/zksandbox/#g2