ZK Framework - Introduction Part 2

MVC

Di era saat ini hampir semua aplikasi menggunakan model MVC, dan ZK sudah siap digunakan untuk sebuah aplikasi MVC. ZK memiliki lingkup pada bagian View dan Controller dalam MVC. Untuk bagian view ini adalah berupa file zul, sedangkan untuk bagian controller merupakan sebuah java class.

Pada kali ini akan di bahas beberapa contoh penggunaan komponen dalam zul dan inplementasi zk pada bagian class controller nya.

Pertama-tama buat sebuah class java dengan nama IndexController.

Dan buat juga sebuah file zul bernama index.zul

Komponen pada file zul

edit isi file zul menjadi seperti berikut:

<?page title="Hello world" contentType="text/html;charset=UTF-8"?>
<zk>
    <window border="normal" apply="com.coba.zkoss.controller.IndexController">
        <grid>
            <columns>
                <column width="100px" align="right"/>
                <column />
            </columns>
            <rows>
                <row>
                    <label id="labelId" value="Input :" />
                    <textbox id="textboxId" />
                </row>
                <row>
                    <cell />
                    <button id="btnSubmit" label="Submit" />
                </row>
            </rows>
        </grid>
    </window>
</zk>

Dalam code diatas bisa dilihat ada sebuah komponen window yang terdapat 3 komponen yaitu Label, Textbox, dan Button yang berada didalam sebuah Grid.
Pada komponen label dan textbox terdapat properti id. Properti id ini penting agar nantinya komponen ini bisa menjadi programmatic. Id ini tidak boleh ada yang sama (duplicate) dalam suatu file zul.
Pada komponen window terdapat sebuah property apply, ini bertujuan untuk mengimplement sebuah kelas controller. Dengan demikian perilaku dan action yang terjadi dalam halaman zul ini bisa diatur dalam kelas controller tersebut.

Kelas Controller

Buka file IndexController.java yang tadi sudah dibuat, dan edit isinya menjadi seperti berikut:

package com.coba.zkoss.controller;

import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Button;
import org.zkoss.zul.Label;
import org.zkoss.zul.Messagebox;
import org.zkoss.zul.Textbox;
import org.zkoss.zul.Window;


public class IndexController extends SelectorComposer<Window>{
    
    @Wire
    private Label labelId;
    @Wire
    private Textbox textboxId;
    @Wire
    private Button btnSubmit;
    
    @Override
    public void doAfterCompose(Window comp) throws Exception {
        // TODO Auto-generated method stub
        super.doAfterCompose(comp);
        
        labelId.setValue("Username :");
        textboxId.setValue("your name");
        
    }
    
    @Listen("onClick = button#btnSubmit")
    public void onSubmit(){
        String message = "Username "+ textboxId.getValue() +" Successfully Saved";
        Messagebox.show(message, "Title Messagebox", Messagebox.OK, Messagebox.INFORMATION);
    }
}

Kelas ini perlu meng-extends SelectorComposer untuk bisa melakukan Wire terhadap komponen yang berada pada file zul. SelectorComposer merupakan salah satu Composer yang tersedia dalam ZK.

Annotation @Wire merupakan anotasi yang digunakan untuk mem-binding sebuah komponen UI di zul. Bisa dilihat di atas ada 3 buah komponen yang di wire dengan nama yang sama dengan id masing-masing type komponen pada file zul.

Override doAfterCompose merupakan method yang di panggil oleh engine ZK setelah komponen pada file zul selesai di generate. Jadi kita bisa menambahkan logic untuk memanipulasi komponen yang berada pada file zul sebelum user bisa melakukan input.

Annotation @Listen merupakan anotasi untuk menghandle action yang terjadi pada UI zul. pada contoh di atas kita gunakan untuk menghandle action onClick pada komponen button dengan id btnSubmit. Apabila button tersebut di klik maka akan muncul popup (Messagebox) yang berisi value dari inputan user pada textbox.


Berikut penampakan UI zul pada browser:

dan kita tesdengan menginput sebuah nama "Supardi" kedalam textbox, lalu klik button Submit.
Maka akan muncul popup seperti berikut:

Didalam method onSubmit kita bisa menambahkan code yang meneruskan data dari UI ke database. Jadi tinggal ditambahkan pemanggilan framework atau coding yang mengatur bagian persistance atau Model dalam sebuah MVC.

Demikianlah Introduce ZK Framework kali ini,
Sekian dan terima kasih...