ZK 事件

1.[size=large] [color=red]ZK事件[/color][/size]

zul代码如下

<window title="ZK Essentials" mode="overlapped" border="normal" width="250px">
	      <label id="lbl"/>World !	      
	      <!-- lbl.setValue(self.getLabel); -->
	      <button label="Hello " onClick="lbl.value = self.label"/>
	      <button label="Good-bye " onClick="lbl.value = self.label"/>
	</window>

界面如下:
[img]http://dl.iteye.com/upload/attachment/0067/8934/41b1d0bb-e8cf-34ca-b1a1-24b69fa04916.jpg[/img]

生成的html主要代码如下:

<div id="tIuP0-cave" class="z-window-overlapped-cnt">
   <span id="tIuP1" class="z-label"></span>
   <span id="tIuP2" class="z-label">World ! </span>
   <button id="tIuP3" class="z-button-os" type="button">Hello </button>
   <button id="tIuP4" class="z-button-os" type="button">Good-bye </button>
</div>

可以知道 ZK enhanced XML parser 会给每个控件加上控件ID


[color=red]点击 Hello 按钮时候,浏览器发起http请求：[/color]

[img]http://dl.iteye.com/upload/attachment/0067/8950/5950d031-33dc-3443-900e-04b717517dda.jpg[/img]

服务器响应:

[img]http://dl.iteye.com/upload/attachment/0067/8957/d4bd5f34-54b8-3297-89da-8e1f80a18e8b.jpg[/img]


[color=red]2. ZK 事件绑定在java代码中[/color]
At line 1, we declared: [color=red]apply=controller class name[/color] so that the events fired within the window is all forwarded to
the controller for event handling.

At line 2, we need to give the "Hello" [color=red]button an ID[/color] so the controller would know which button fired during the
onClick event.

1. 定义 apply

<window id="win" title="ZK Essentials" border="normal" width="250px"   apply="demo.zkoss.SampleCtrl>
      <button id="helloBtn" label="Hello"/>
</window>

2. 绑定 'event_name$component_id'

package demo.zkoss;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Button;
import org.zkoss.zul.Window;
public class SampleCtrl extends GenericForwardComposer {
      Window win;
      public void onClick$helloBtn(){
            Button btn = new Button();
            btn.setLabel("World !");
            btn.setParent(win);
      }
}