ZK 開啟和關閉同頁面的 Window

在同個zul頁面的<window>，開啟及關閉方式如下

main.zul

<zk>
<div id="innerDiv" apply="org.zkoss.bind.BindComposer" 
    viewModel="@id('vm') @init('idv.matt.vm.MainVM')">
    
    <button label="Open" onClick="@command('openPopupWindow')"/>
    
    <!-- 預設為隱藏 -->
    <window id="popup_window" mode="popup" visible="@load(vm.visible)" 
        title="Hello" closable="true" position="right,top"
        onClose="self.setVisible(false);event.stopPropagation();" width="300px">
        <grid model="@load(vm.openedEmployeeList)">
            <template name="model">
                <row>
                    <cell><label value="@load(each.name)"/></cell>
                    <cell><label value="@load(each.email)"/></cell>
                </row>
            </template>
        </grid>
    </window>
</div>
</zk>

MainVM.java

public class MainVM {

    private boolean visible = false; // 用來顯示或隱藏popup window
    private List<Employee> openedEmployeeList; // popup window中grid的內容
    
    @Command
    @NotifyChange({"visible", "openEmployee"})
    public void openPopupWindow() {
        visible = true;
        openedEmployeeList = getEmployeeList();
    }
    
    private List getEmployeeList(){
        ... // return employee list object
    }
    
    // getter and setter ommitedd
}

Employee.java

public class Employee {
    
    private String name;
    private String email;
    // getter and setter ommitedd
}

或是用Executions.createComponents的方式來做。