Basic ZK Framework ตอนที่ 5 วิธี Add EventListener บน Java

การ Add EventListener ก็เหมือนกับว่าเราร้อยสายจาก Java ไปที่หน้าจอน่ะครับ เช่น เราบอกว่า onClick จะให้ไปทำอะไรเราสามารถมาเขียนที่ Java ได้เลย ว่าถ้ามี onclick แล้วจะให้ไปทำอะไรต่อ โดยที่เราไม่ได้ไปทำที่ ZUL File น่ะครับ (ถ้าไม่ เข้าใจโทษทีครับ ลองทำดูจะเข้าใจมากขึ้น) 

ที่ผมจะสอนคือวิธีแบบธรรมดาที่เราใช้กับพวก onClick, onChange, etc... วิธีีดังนี้

1. เราจะทำการใช้ method ที่ชื่อ  addEventListener ซึ่งจะมีอยู่แล้วในพวก class ใน package org.zkoss.zul เช่น Label, Image

2. ซึ่งใน Method นี้จะมีการใส่ 2 ค่า โดยค่าแรกจะเป็น Event ที่เราต้องการจะดักจับ เช่น onClick เป็นต้น --> ใส่คำนี้ลงไปเลยครับ เพราะรับค่า็เป็น String อยู่แล้ว

3. ต่อไปค่าอีกค่าจะใส่ Class EventListener เราจำต้อง สร้าง Class นี้ขึ้นมาเพื่อรับ ซึ่งจะมี Method บังคับคือ onEvent ซึ่งส่วนนี้นี่ล่ะ เราจะเอาไว้สำหรับว่าจะทำอะไรที่เราต้องการ

ตัวอย่่างที่ทำไว้นะครับ

อันแรกตัว EventListener

private EventListener selectItemListener = new EventListener() {

public void onEvent(Event evt) {

Image img = (Image)evt.getTarget(); เราจะทำการดึงค่าออกมาจากที่เรา addEventListener ไว้ครับ

UserM userM = (UserM)img.getAttribute("sampleUserM"); ดึงค่า attribute ที่เรา set ลงเราสร้าง Image ขึ้นมา

Executions.getCurrent().sendRedirect("zk/sample/userEdit.zul");

}

public boolean isAsap() {
return true;
}
};

ส่วนวิธีเรียกใช้งาน อันนี้ผมทำแบบ Add ใส่ตารางไว้แล้วถ้าเรามา Click จะไปทำงานที่ Event นะครับ

Listcell listCell = new Listcell();
listCell.setStyle("cursor: default");
listCell.appendChild(image);
Image image = new Image("images/edit.gif");
image.setAttribute("sampleUserM", userM); ทำการ set Attribute ชื่อ SampleUserM ขึ้นมา เราสามารถไปเรียกค่าขึ้นมาได้ที่ onEvent ใน EventListener เลยครับ
image.setWidth("23px");
image.setHeight("21px");
image.setStyle("cursor: pointer;");

image.addEventListener("onClick",selectItemListener); ทำการ Add EventListener ในกรณีที่เรา Click ที่รูปนี้

Reference

http://www.zkoss.org/smalltalks/mvc3/ จาก @chanwit  อันนี้จะมีวิธีอื่นด้วยน่ะครับ