ZK Controller

ZK 可使用MVVM或MVC架構來設計你的應用程式（指UI元件(View)與資料及邏輯處理(Model)間的關係與控制）。MVVM是使用ViewModel來處理與元件的關係，而MVC則是使用Controller（也可稱作Composer）。

在ZK要建立Controller類別必須繼承org.zkoss.zk.ui.select.SelectorComposer類別。

package idv.matt.controller;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;

public class MainController extends SelectorComposer<Component>{
    //other codes...
}

在Controller中可以監聽所套用UI元件的事件(Event)(例如onclick事件)及操作其子元件的行為等。

要將Controller套用至UI元件，則在zul中的UI元件設定apply屬性，並用完整類別名稱（fully qualified class name，也就是包含package位置的類別名稱）來指向要套用的Controller。

<zk>
    <window id="mainWindow" apply="idv.matt.controller.MainController">
    </window>
</zk>

上面範例中，idv.matt.controller.MainController即套用在 <window id="mainWindow" ...>元件上並可監聽其事件或操作其子元件。

在Controller要用@Wire注釋來取得所套用的UI元件的實例。

package idv.matt.controller;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;

public class MainController extends SelectorComposer<Component>{
    
    @Wire
    Window mainWindow;
    ...

}

預設Composer會尋找id名稱及資料型態皆相符的UI元件。例如上面Composer尋找型態為Window，id名稱為"mainWindow"的元件。

若要在Controller在套用元件中加入其他元件，則要覆寫(override)父類別的doAfterCompose(T comp)方法。

在Window及其子元件建構完成後，ZK便會呼叫doAfterCompose()，並把套用元件的實例(Window)作為參數傳入。請參考Composer的生命週期

下面範例在doAfterCompose()中建立Label，Separator及Button元件並加入Window成為其子元件。

package idv.matt.controller;

import org.zkoss.zk.ui.Component;
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.Separator;
import org.zkoss.zul.Window;

public class MainController extends SelectorComposer<Component>{
    private static final long serialVersionUID = 1L;
    
    @Wire
    Window mainWindow;
    
    @Override
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        
        Label label = new Label(); // 建立<label>元件
        label.setValue("Hello ZK");
        comp.appendChild(label);
        
        Separator seperator = new Separator(); // 建立<separator>元件
        comp.appendChild(seperator);
        
        Button button = new Button(); // 建立<button>元件
        button.setLabel("Click me");
        comp.appendChild(button);
        
    }

}

以上的畫面如下