Componen, Fungsi & Event Framework zkoss - XIII [ Event & Script ]

 

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