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.

Membuat project ZKoss (ZK) Pertamamu menggunakan Netbean

 ZKoss atau ZK merupakan framework yang biasanya digunakan untuk membuat interface di dalam bahasa pemrograman JAVA, khususnya JAVA EE, untuk lebih jelasnya bisa anda baca di https://www.zkoss.org/

1. Instalasi Plugin.
Yang harus anda miliki adalah plugin REM Plugin terlebih dahulu, anda dapat mendownloadnya disini atau disini

Lalu pada Netbean IDE anda, klik tool plugin, klik tab downloaded -> add plugins, (pilih file REM yang sudah di download)lalu klik install.

add plugin REM

Setelah menginstall plugin REM, anda akan diminta restart netbean.

2. Membuat Projek ZK
Klik file-> new project, pilih java web, lalu cari ZK Application.
   ddddBeri nama project anda.

Create New ZK Project

Beri Nama projek anda

Setelah projet terbentuk jalankan projek dengan cara klik kanan->Run atau pilih tombol RUN Project

Jika berhasil akan muncul tulisan "My ZK Applicatin pada browser anda", untuk mengeditnya, anda bisa lakukan pada file index.zk

tampilan ZK pertama kali

Semoga membantu, terimakasih.