Membuat window Modal pada ZK Framework

Kali ini saya akan sharing tentang bagaimana cara menampilkan modal pada zkoss framework. biasanya window bertype modal dipakai untuk menampilkan form/window yang informasinya tidak terlalu banyak.

Langsung saja, pertama anda harus membuat projek ZK baru, jika anda belum bisa membuat projek zk anda bisa membacanya disini

pada file index.zul anda bisa memodifikasinya menjadi seperti ini

<?xml version="1.0" encoding="UTF-8"?>

<zk xmlns="http://www.zkoss.org/2005/zul">
      <window title="Contoh Modal" apply="controller.indexComposer">
        <button id="btnModal"
                label="Tampilkan Modal"
        />
    </window>
</zk>

Kemudian buat file index2.zul

<?xml version="1.0" encoding="UTF-8"?>

<zk xmlns="http://www.zkoss.org/2005/zul">
    <window mode="modal"  closable="true" width="80%" id="winmodal" apply="controller.index2Composer">
        ini adalah tampilan window modal
      
       
        <listbox id="box" multiple="true" checkmark="true" >
        <listhead >
            <listheader label="Name"/>
            <listheader label="Gender"/>
            <listheader label="Age"/>
            <listheader label="Description"/>
        </listhead>
        <listitem>
            <listcell label="Mary"/>
            <listcell label="FEMALE"/>
            <listcell label="18"/>
            <listcell label="A young lady."/>
        </listitem>
        <listitem>
            <listcell label="John"/>
            <listcell label="MALE"/>
            <listcell label="20"/>
            <listcell label="A college student."/>
        </listitem>
       
    </listbox>   
        <button id ="btnClose"
        label="Tutup" />
       
    </window>
</zk>

Lalu buat folder baru pada source Packages, beri nama "controller"

kemudian buat java class baru dan beri nama indexComposer, indexComposer ini berfungsi sebagai controller dari file index.zul

package controller;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Window;

/**
*
* @author yusuf
*/
public class indexComposer extends GenericForwardComposer {

@Wire
private Listbox Listboxs;

public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);

}

public void onClick$btnModal(Event e) throws InterruptedException {
Window window = (Window) Executions.createComponents(
"index2.zul", null, null);
window.doModal();

}

}

Terakhir buat java class untuk controller dari file index2.zul, yaitu file index2Composer

package controller;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Window;

/**
*
* @author yusuf
*/
public class index2Composer extends GenericForwardComposer {

@Wire
private Window winmodal;
@Wire
private Listbox Listboxs;

public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);

}

public void onClick$btnClose(Event e) throws InterruptedException {
winmodal.detach();
}

}

Jalankan projek anda, jangan lupa pilih server untuk menjalankannya

Anda juga bisa mendownload projeknya di github saya disini.

Terimakasih Semoga membantu.