ZK 利用 GenericForwardComposer 來達到 MVC 結構

MVC 的好處是于不必在視圖插入控制的程式碼，令視圖專是去做顯示的工作，而且更容易維護程式。ZK 也可以做到視圖和控制程式碼分離。

首先制作一個 index.zul

<?page title="Index" contentType="text/html;charset=UTF-8"?>
<zk>
    <window title="Index" border="normal">
        <button id="btn" label="Say Hello World" />
    </window>
</zk>

然後新增一個 Class
package com.blogspot.lawpronotes.web.ui.IndexController

package com.blogspot.lawpronotes.web.ui;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Button;
import org.zkoss.zul.Label;

public class IndexController extends GenericForwardComposer{

    private static final long serialVersionUID = 1L;
    
    //ZK Component
    private Button btn;
    
    private Label lb;
    
    public IndexController(){
        lb = new Label();
    }
    
    @Override
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
    }
    
    public void onClick$btn(){
        lb.setValue("Hello World");
        self.appendChild(lb);
    }
}

Controller 要 extends GenericForwardComposer 去令 ZK Engine 知道這是個 Controller。(雖然還有其他方法去實現 MVC，但個人覺得用 extends GenericForwardComposer 這個方式是最好的)

在 IndexController 這個 Class 內有一個 Button btn，而這個 btn 是 index.zul 內的 <button id="btn" label="Say Hello World"/>，btn 這個名字一定要跟 index.zul 的 button id 一模一樣，ZK Engine 會根據這個名稱自動將
<button id="btn" label="Say Hello World"/> 注入到 Button btn 內。

doAfterCompose(Component comp) 這個方法在頁面組成後會由 ZK Engine 自動去執行，你可以在 super.doAfterCompose(comp); 這句後加入一些頁面設定的程式碼。

public void onClick$btn() 是事件的 function，[事件]$[物件] 這樣的模式去令 ZK Engine 知道這是什麼物件的事件。

現在修改 index.zul 去令視圖和控制器連接，將

<window title="Index" border="normal">

改為

<window title="Index" border="normal" apply="com.blogspot.lawpronotes.web.ui.IndexController">

這樣便可以將 window 這個物件和控制器連接起來，而控制器可以控制 window 內的所有物件。

完整 index.zul

<?page title="Index" contentType="text/html;charset=UTF-8"?>
<zk>
    <window title="Index" border="normal"
        apply="com.blogspot.lawpronotes.web.ui.IndexController">
        <button id="btn" label="Say Hello World" />
    </window>
</zk>

現在用瀏覽器打開 index.zul 頁面，按一下按鈕便會出現 Hello World。

相關書籍: