ZK 在Controller中加入元件的事件監聽器

下面範例在ZK MVC的Controller(Composer)中加入按鈕<button>的onclick事件監聽器，並在按下按鈕後改變<label>原本的值。

zul如下

<zk>
    <window id="mainWindow" apply="idv.matt.controller.MainController">
        <button id="changeButton" label="Change"/>
        <label id="nameLabel" value="matt"/>
    </window>
</zk>

套用在<window>元件的idv.matt.controller.MainController

package idv.matt.controller;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.event.SerializableEventListener;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Button;
import org.zkoss.zul.Label;
import org.zkoss.zul.Window;

public class MainController extends SelectorComposer{
    private static final long serialVersionUID = 1L;
    
    @Wire
    Window mainWindow; // zul的 <window id="mainWindow">
    @Wire
    Button changeButton; // zul的 <button id="changeButton">
    @Wire
    Label nameLabel; // zul的 <label id="nameLabel">
    
    @Override
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        
        // 建立一個監聽器，在事件觸發時會執行onEvent()方法中的行為
        EventListener actionListener = new SerializableEventListener() {
            private static final long serialVersionUID = 1L;

            public void onEvent(Event event) throws Exception {
                nameLabel.setValue("john"); // 將<label>的值改為"john"
            }
        };
        
        changeButton.addEventListener(Events.ON_CLICK, actionListener); // 將監聽器加至<button>並監聽onclick事件
        
    }

}

則點選<button>後，<label>的值會由原本的matt變為john。