การ Set up JSF 2 บน Eclipse
วันนี้ผมจะมาสอนการติดตั้ง JSF 2 บน Eclipse กันนะครับ ก่อนอื่นผมจะแสดงรายการโปรแกรมที่ต้องลงก่อนนะครับ
โปรแกรมที่ต้องลงก่อนเพื่อที่จะใช้งาน JSF 2
1. JDK version 1.6.0_45 หรือจะโหลด version อื่นๆก็ได้นะครับแต่ขอให้เป็น version 6
2. โปรแกรม Eclipse (ผมใช้ Eclipse ตัว Kepler นะครับ) download มาแล้วก็วางตาม drive ที่ต้องการได้ เลยโดยที่ไม่ต้อง install ครับ
3. Apache Tomcat 6 download ตัวที่เป็น Core นะครับ (ซึ่งในบทที่ผมจะสอน ผมจะใช้ tomcat เป็น server นะครับ) โหลดเสร็จแล้วให้แตกไฟล์วางที่ไหนก็ได้ครับ โดยที่ไม่ต้อง install
วิธีการติดตั้ง
1. ลง JDK ให้เสร็จเรียบร้อยก่อน
2. วางไฟล์ Eclipse ไว้ที่ drive ไหนก็ได้ที่ต้องการ
2. วางไฟล์ tomcat ไว้ที่ drive ไหนก็ได้ที่ต้องการ
ทีนี้มาลองเปิด Eclipse กันนะครับ
ผมจะตั้งชื่อ workspace ว่า E:\learn_jsf_2 นะครับ หากไม่เคยสร้างโฟลเดอร์ที่ชื่อ learn_jsf_2 ตัว Eclipse จะทำการสร้างให้โดยอัตโนมัตินะครับ
ติดตั้ง JSF 2 บน Eclipse
1. คลิกที่ File > New > Other...
2. เลือก Dynamic Web Project แล้วกด Next
3. Project name (ชื่อโปรเจคจะใส่อะไรก็ได้) : ผมจะใส่เป็น EASY_JSF_2 นะครับ
4. จากนั้นกดที่ปุ่ม New Runtime... ที่อยู่ตรงหัวข้อ Target runtime ครับ
5. จากนั้นให้เลือก Apache Tomcat v6.0 แล้วกด Next ครับ
6. ตรงส่วน Name เป็นชื่อของ Server ครับ ซึ่งเราจะตั้งใหม่ก็ได้ครับ ผมจะเปลี่ยนเป็น My tomcat 6 นะครับ
ในส่วน Tomcat installation directory ให้ใส่ path ที่เราวาง tomcat เอาไว้นะครับ ซึ่งผมได้วางเอาไว้ที่ E:\tomcat\apache-tomcat-6.0.41 จากนั้นกด Finish ครับ
7. ต่อไปให้กดที่ปุ่ม Modify... ตรงหัวข้อ Configuration
8. ตรง Java ให้เลือกเป็น version 1.6 ครับ แล้วให้ติ๊กถูกที่ JavaServer Faces และให้เลือกเป็น version 2 ด้วยครับ จากนั้นให้กด OK ครับ
9. ต่อไปให้กด Next ครับ
10. กด Next อีกทีครับ
11. แล้วก็กด Next อีกเช่นเคย
12. ทีนี้มันจะบอกเราว่าขาด user library ให้เราคลิกที่ปุ่มตามรูปครับ
13. จากนั้นให้เลือกตามที่ผมเลือกแล้วกด Next ครับ
14. ต่อมาให้ติ๊กถูกที่ I accept the terms of this license. แล้วกด Finish ครับ ซึ่งหลังจากที่เรากด Finish แล้ว Eclipse จะทำการโหลดไฟล์ Library ซักครู่นึงครับถ้าอินเตอร์เน็ตของเราแรงหน่อย
15. พอเสร็จแล้วก็จะได้หน้าตาแบบนี้ครับ แล้วก็กดปุ่ม Finish ได้เลยครับ
16. ทีนี้เราก็จะได้ Project ที่มีลักษณะหน้าตาเป็นแบบนี้ครับ
17. ต่อมาก็ให้เลือก Window > Show View > Other...
18. เลือก Servers แล้วกด OK ครับ
19. ให้คลิกที่ No servers are available. Click this link to create a new server ครับ
20. จากนั้นให้กด Next ครับ
21. จากนั้นให้คลิกที่ Project ที่อยู่ได้ซ้ายแล้วกด Add ครับ
22. จากนั้นให้กด Finish ครับ
23. จากนั้นให้เรา double-click ที่ Server อีกที แล้วจะได้หน้าต่างดังรูปจากนั้นให้ Use Tomcat installation ตามรูปเลยครับ จากนั้นกด Ctrl + S เพื่อ Save
24. ต่อมาให้เข้าที่ Window > Preferences
25. จากนั้นให้เข้าไปที่ Menu ตามรูปเลยครับ แล้วกด Add
26. เลือก Standard VM แล้วกด Next ครับ
27. จากนั้นให้ใส่ที่อยู่ของ JDK เราครับแล้วกด Finish
28. จากนั้นให้เราติ๊กถูกตัวที่เราเพิ่ง Add เข้ามาแล้วกด OK ครับ
29. ต่อมาให้เราเข้าที่ Window > Preference เหมือนเดิมครับ
30. จากนั้นให้ไปที่เมนู Java > Compiler แล้วเปลี่ยน Compiler compliance level ให้เป็น 1.6 ครับ จากนั้นกด OK จากนั้นจะมี Pop-up ขึ้นมาให้เรากด Yes ครับ
31. ทีนี้เรามาแก้ไขไฟล์ web.xml กันครับ โดยเพิ่ม <welcome-file>index.xhtml</welcome-file> ตามรูปเลยครับ
32. ต่อมาเรามาสร้างไฟล์ index.xhtml กันครับ โดยการคลิกขวาที่ WebContent > New > File โดยใส่ชื่อไฟล์ว่า index.xhtml ครับ จากนั้นกด Finish ครับ
33. ทีนี้นำ code เหล่านี้ไปใส่ใน file แล้วกด save ได้เลยครับ
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:h = "http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</head>
<h:body>
<h:outputLabel value="Hello World"></h:outputLabel>
</h:body>
</html>
34. จากนั้นกด click ขวาที่ server แล้วเลือก Start ครับ
35. ทีนี้เราลองมาเข้า URL ตามนี้กันครับ http://localhost:8080/EASY_JSF_2/faces/index.xhtml
เมื่อเราเข้า URL ตามนี้แล้วก็จะได้ผลลัพธ์ดังนี้ครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น