ZK 開啟及關閉modal <window> (MVVM)

在ZK要以MVVM的方式開啟<window>及關閉的方法如下(zk 8.5.1)。

下面是要開啟window的main.zul。

main.zul

<zk>
<window id="main" title="Main" 
        apply="org.zkoss.bind.BindComposer" 
        viewModel="@id('vm') @init('idv.matt.vm.MainMV')">
    <button label="Open window" onClick="@command('openWindow')"/>
</window>
</zk>

main.zul套用的ViewModel MainMV

MainMV

package idv.matt.vm

import org.zkoss.bind.annotation.Command;
import org.zkoss.zk.ui.Executions;

public class MainVM {
    
    @Command
    public void openWindow() {
        Executions.createComponents("modalWindow.zul", null, null);
    }

}

下面是被開啟的modal window。

modalWindow.zul

<zk>
<window id="modalwindow" title="Modal Window" mode="modal" 
        closable="true" onClose="self.detach(); event.stopPropagation();" 
        border="normal"  width="800px"
        apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('idv.matt.vm.ModalWindowVM')">

    <lable value="Hello"/>
    <button label="Close" onClick="@command('close')"/>
</window>
</zk>

mainWindow.zul套用的ViewModel ModalWindowVM

ModalWindowVM

package idv.matt.vm

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.SelectorParam;
import org.zkoss.zk.ui.Component;

public class ModalWindowVM {

    @Command
    public void close(@SelectorParam("#modalWindow") final Component window) {
        window.detach();
    }
    
}

參考：

• Stop close modal window
• Window
• Load ZUML in Java
• ZK 開啟和關閉同頁面的 Window