ZK MVVM 使用MessageBox對話框確認動作

在ZK使用MVVM的方式來顯示MessageBox彈出確認對話框的作法如下。

例如刪除前要請使用者確認，刪除後還要刷新原本的查詢結果。

index.zul

<zk>
<div apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('idv.matt.vm.MyVM')">
    <div form="@id('fx') @load(vm.queryEmployee) @save(vm.queryEmployee, before='query')">
        <button label="查詢" onClick="@command('query')"/>
    </div>
    <separator bar="true"/>
    <grid model="@load(vm.employeeList)">
        <columns>
            <column label="功能"/>
            <column label="ID"/>
            <column label="名稱"/>
            <column label="信箱"/>
        </columns>
        <template name="model">
            <row>
                <cell>
                    <button label="刪除" onClick="@command('delete', employee=each)"/>
                </cell>
                <cell>
                    <label value="@load(each.id)"/>
                </cell>
                <cell>
                    <label value="@load(each.name)"/>
                </cell>
                <cell>
                    <label value="@load(each.email)"/>
                </cell>
            </row>
        </template>
    </grid>
</div>
</zk>

MyMV.java

package idv.matt.vm;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.zkoss.bind.Binder;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.GlobalCommand;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zul.Messagebox;
import org.zkoss.zul.Messagebox.ClickEvent;

import idv.matt.entity.Employee;
import idv.matt.service.EmployeeService;
import idv.matt.service.EmployeeServiceImpl;

public class MyVM {
    
    private Employee queryEmployee = new Employee();
    
    private List employeeList = new ArrayList();
    
    private EmployeeService employeeService = new EmployeeServiceImpl();
    
    @Command
    @NotifyChange("employeeList")
    public void query() {
        employeeList = employeeService.find(queryEmployee); // 從資料庫查詢
    }
    
    @Command
    public void delete(@BindingParam("employee") Employee employee, @ContextParam(ContextType.BINDER) final Binder binder) {
        Messagebox.show("確認刪除?", new Messagebox.Button[] { Messagebox.Button.YES, Messagebox.Button.CANCEL }, 
            new EventListener<ClickEvent>() {
                public void onEvent(ClickEvent event) throws Exception {
                    if(event.getButton()==Messagebox.Button.YES){
                        employeeService.delete(employee); // 刪除
                        binder.postCommand("query", null); // 刪除完透過Binder呼叫@command('query')
                    }
                }
        });
    }
    
    // getter, setter...
    
}

要是沒有ZK Fiddle的範例我可能要試更久...。

參考：

• MVVM confirm case