Basick ZK Framework ตอนที่ 2 มาลองใช้ Zk

มาต่อตอนที่ 2 กันครับ ตอนที่ 1 ดู ที่นี่

ตอนนี้มาลองเล่นกันเลยว่ามันทำงานอย่างไรบ้าง

ตัวอย่าง index.zul

<?xml version="1.0" encoding="UTF-8"?>
<?page title="Welcome to ZK Web"?> <-- กำหนดว่า title ของหน้าใช้ชื่ออะไร
<window title="Welcome to ZK Web" 
border="normal" id="login" use="com.zk.LoginView" onOK="login.onOk()">
use ใช้สำหรับว่าจะไปใช้ Java Class ไหน ส่วน id จะเป็น Reference ไว้สำหรับใน window ตัวนี้ โดยเวลาใช้จะใช้ id.method ที่จะใช้น่ะครับ
<textbox id="username"/> <--  กำหนดว่าเป็น input แบบข้อความ โดยกำหนดชื่อเป็น username
และ onOK หมายถึงถ้าเรากด Enter ที่หน้านี้จะเข้าไปทำงานที่ login.onOk()
<button label="OK" onClick="login.onOk()"/> <-- เป็นการบอกว่าถ้ากดปุ่มนี้จะไปที่ Method ชื่อ onOk() ใน Class com.zk.LoginView
<button label="Cancel" onClick="login.onCancel()"/> <-- จะเหมือนกับ ข้างบนครับ
</window>

ต่อไปตัวอย่างของ Java Class นะครับ

package com.zk.service;

import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;

import org.apache.log4j.Logger;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zul.Messagebox;
import org.zkoss.zul.Textbox;
import org.zkoss.zul.Window;


public class LoginView extends Window { <-- ทำเพื่อให้เพื่อเราสามารถดึงค่าได้

private static final long serialVersionUID = -8725354218872079732L;
private static Logger log = Logger.getLogger(LoginView.class);

public void onCreate(Window main) { //does initialization
log.debug("..... init(Window main)");
}

public void onOk() {  <-- พอเรากด Ok ที่หน้าจอจะมาเข้า Method นี้
log.debug("..... save(Window main)");
String userName = ((Textbox)getFellow("username")).setValue(""); <-- ดึงค่าจาก textbox เมื่อกี้ที่ใช้ id เป็น username
Messagebox.show("Username correct.", "Ok", Messagebox.OK, Messagebox.OK); <-- โชว์ Popup บอกว่า Username correct. 

}

public void onCancel() { //cancel any changes
log.debug("..... cancel(Window main)");

((Textbox)getFellow("username")).setValue(""); <-- เป็นการกำหนดค่าให้ username เป็นค่าว่าง

}
}