JSF 2 0 Tutorial ตัวอย่างพร้อมวิธีการ Step by Step
ช่วงนี้กำล้งเริ่มเรียนรู้ JSF หรือ Java Server Face
คืบหน้ายังไงจะมาเล่าให้ฟังเป็นช่วงๆ นะคร๊าบ
ประมาณว่าไม่เคยลอง JSF มาเลย มาอีกทีก็ซัด 2.0 เลยครับ
เริ่มจาก Tool ที่ใช้ เรามาเล่น ใหม่สุดๆ กันเลยดีกว่า
Eclipse 3.6 Up
Java 1.6 Up
Tomcat 7.0 จัดเต็ม Version ล่าสุดเลยทีเดียว 55+
เริ่มต้นเพียงเท่านี้พอก่อนครับ
ต่อไปสร้าง Project JSF บน Eclipse
เปิด Eclipse ขึ้นมาครับ
สร้าง Dynamic Web Project ครับ
เริ่มต้นเหมือนที่เคยทำกันนั่นแหละ แต่ว่ามีขั้นตอนนิดนึง ตรง drop down ที่มีให้เลือกปรกติเราจะไม่ค่อยสนใจ
คราวนี้ มาเลือกกันหน่อย ตามนี้เลยนะ
Target runtime เลือก Tomcat 7 ครับ (สำหรับคนที่ config ไว้แล้วอ่ะนะ)
Dynamic Web module version เลือก 2.5 ครับหรือจะ 3.0 ก็ได้น่ะ
Configuration เลือก JavaServer Face v2.0 Project
กด Next ไป 3 ครั้งจนเจอ หน้า JSF Capabilities สังเกตง่ายๆ มันจะให้เราใส่ Lib อ่ะครับ
ตรงนี้ ถ้าใคร มี Lib อยู่แล้วก็ใส่ไปได้เลย แต่ถ้าไม่มี ก็ กดตรง download ครับ (รูปแผ่น disk มีลูกศรชี้ลง)
จากนั้นเลือก JSF2.0 Myface ครับ แล้วก็ download เลย
แล้วก็ กด Finish เลยครับ แค่นี้ก็จะได้ Project ที่พร้อม Run JSF แล้วล่ะ
ต่อไปมาทำ Hello world กัน
ดุแล้วทำไมมันช่างง่ายดาย เห่อๆ ทำไปแบบ งง
ไม่รู้ที่มาที่ไปว่ามันทำงานได้ยังไง แต่ไม่เป็นไร ค่อยว่ากันนะ
งานนี้ใช้แค่
- MyBean.java
- index.xhtml
สองไฟล์แค่นี้ ไม่มี config อะไรทั้งนั้น แค่ เพิ่ม annotation นิดหน่อย มาดู Code กัน
MyBean.java
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class MyBean {
String myName;
public String getMyName() {
return myName;
}
public void setMyName(String myName) {
this.myName = myName;
}
}
index.xhtml
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns:h="http://java.sun.com/jsf/html">
JSF 2.0 Hello World
ตามนี้เลยครับซัดตัวอย่างแรกก็ล่อ Ajax กันเลยทีเดียว 55+
ลอง Run ดูด้วย URL
http://localhost:8080/myproject/index.jsf
มันจะมี form ให้กรอกค่าแล้วกด submit มันจะ รับค่าจาก form
แล้วนำมาแสดงด้านล่างแบบ Ajax กันเลยทีเดียว หุุหะ