RichFaces - การตั้งค่าสภาพแวดล้อม
ในบทนี้คุณจะตั้งค่าสภาพแวดล้อมการพัฒนาของเราและกำหนดค่าระบบของคุณเพื่อให้คุณสามารถดำเนินการพัฒนา RichFaces ได้
ความต้องการทางด้านเทคนิค
ตามข้อกำหนดทางเทคนิคคุณจะได้เรียนรู้วิธีกำหนดค่า JDK, เซิร์ฟเวอร์แอปพลิเคชันหรือ IDE ที่คุณเลือก
ความต้องการของระบบ
คุณสามารถใช้ระบบใดก็ได้โดยไม่มีข้อ จำกัด ใด ๆ เกี่ยวกับหน่วยความจำแรมและระบบปฏิบัติการ
การติดตั้ง JDK
ก่อนดำเนินการต่อคุณต้องกำหนดค่า JDK ในระบบของคุณ โปรดดูเว็บไซต์อย่างเป็นทางการของoracleเพื่อดาวน์โหลดและติดตั้ง JDK 7 หรือเวอร์ชันที่สูงกว่า คุณอาจต้องตั้งค่าตัวแปรสภาพแวดล้อมสำหรับ Java เพื่อให้สามารถทำงานได้อย่างถูกต้อง ในการตรวจสอบการติดตั้งของคุณในระบบปฏิบัติการ Windows ให้กด "java –version" ในพรอมต์คำสั่งจากนั้นเอาต์พุตจะแสดงเวอร์ชัน Java ที่ติดตั้งในระบบของคุณ
การติดตั้ง IDE
มีหมายเลข IDE บนอินเทอร์เน็ต คุณสามารถใช้อะไรก็ได้ตามที่คุณเลือก สำหรับบทช่วยสอนนี้ให้เราใช้ NetBeans 8.2 คุณสามารถดูลิงค์ดาวน์โหลดของ IDE ต่างๆได้ในตารางต่อไปนี้
| ชื่อ IDE | ลิงค์การติดตั้ง |
|---|---|
| NetBeans | https://netbeans.org/downloads/ |
| คราส | www.eclipse.org/downloads/ |
| Intellij | www.jetbrains.com/idea/download/#section=windows |
ขอแนะนำให้ใช้ซอฟต์แวร์เวอร์ชันล่าสุดเสมอเพื่อดึงสิ่งอำนวยความสะดวกสูงสุดออกไป สำหรับบทช่วยสอนนี้เราจะใช้ NetBeans IDE 8.2 ร่วมกับ JDK 8
ข้อกำหนดของเซิร์ฟเวอร์
ในฐานะแอปพลิเคชันเซิร์ฟเวอร์คุณจะใช้ Tomcat ในบทนี้คุณจะกำหนดค่าเซิร์ฟเวอร์ tomcat ในระบบ หากคุณกำลังติดตั้ง NetBeans เวอร์ชันล่าสุดคุณสามารถติดตั้ง Apache Tomcat พร้อมกับ NetBeans IDE ได้โดยตรง ถ้าคุณไม่ได้ทำเช่นนั้นโปรดดาวน์โหลดรุ่นล่าสุดของ Tomcat จากเว็บไซต์อย่างเป็นทางการของTOMCAT เก็บไฟล์ Tomcat ที่แยกไว้ในไดรฟ์ C หรือไฟล์โปรแกรมของคุณ ไฟล์เหล่านี้จะถูกใช้ในระยะต่อไป
ความต้องการของลูกค้า
RichFaces เป็นส่วนประกอบ UI ดังนั้นเช่นเดียวกับส่วนประกอบ UI ทุกอย่างอินเทอร์เน็ตเบราว์เซอร์จะทำหน้าที่เป็นไคลเอนต์สำหรับแอปพลิเคชันของคุณ คุณสามารถใช้อินเทอร์เน็ตเบราว์เซอร์ที่ทันสมัยเช่น IE, Safari, Chrome เป็นต้น
ข้อกำหนดการพัฒนา
การดาวน์โหลดไฟล์ jar ที่จำเป็น: โปรดไปที่เว็บไซต์อย่างเป็นทางการของJBOSSและดาวน์โหลดไฟล์ jar JBoss เวอร์ชันเสถียรล่าสุด แตกไฟล์ คุณจะต้องมีขวดต่อไปนี้เพื่อพัฒนาแอปพลิเคชัน RichFaces
- richfaces-a4j-4.5.17.Final.jar
- richfaces-core-4.5.17.Final.jar
- richfaces-rich-4.5.17.Final.jar
- cssparser-0.9.18.jar
- guava-19.0.jar
- sac-1.3.jar
การสร้างโครงการ
ในส่วนนี้ให้เราสร้างแอปพลิเคชันสาธิตที่จะใช้ในภายหลังเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ RichFaces ก่อนดำเนินการต่อขอแนะนำให้คุณดาวน์โหลดและติดตั้งซอฟต์แวร์และไฟล์ jar ที่จำเป็นทั้งหมดที่กล่าวถึงก่อนหน้านี้
Step 1- เปิด NetBeans IDE ไปที่ไฟล์→โครงการใหม่ คุณจะถูกเปลี่ยนเส้นทางไปยังภาพหน้าจอต่อไปนี้
Step 2 - เลือก“ Java Web” และ“ Web Application” ในแท็บ“ Categories” และ“ Projects” ตามลำดับแล้วกด“ Next”
Step 3- ในแท็บถัดไปคุณต้องระบุชื่อโครงการ ที่นี่ให้เราตั้งชื่อว่า RichFaceTutorial จากนั้นกด“ ถัดไป” คุณจะถูกเปลี่ยนเส้นทางไปยังภาพหน้าจอต่อไปนี้ ที่คุณจะตั้งค่ารายละเอียดเซิร์ฟเวอร์
Step 4- เลือก“ Apache Tomcat” จากเมนูแบบเลื่อนลงแล้วกด“ Add” เมื่อคุณกด "เพิ่ม" คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าจอแยกต่างหากซึ่งคุณต้องกำหนดค่าเซิร์ฟเวอร์ของคุณ ในการกำหนดค่าเซิร์ฟเวอร์คุณจะต้องดาวน์โหลดไฟล์เซิร์ฟเวอร์ในส่วนก่อนหน้านี้
Step 5- เลือก“ Apache Tomcat หรือ TomEE” จากรายการดังที่แสดงในภาพหน้าจอด้านบนแล้วกด“ Next” คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าจอต่อไปนี้
Step 6- ในตำแหน่งเซิร์ฟเวอร์คุณต้องระบุตำแหน่งไฟล์ Tomcat ที่ดาวน์โหลดมา กด "เรียกดู" และไปที่เส้นทางโฟลเดอร์ที่ต้องการแล้วกด "เสร็จสิ้น" เมื่อเพิ่มเซิร์ฟเวอร์ของคุณเรียบร้อยแล้วคุณจะถูกเปลี่ยนเส้นทางไปยังหน้าจอแรก กด "ถัดไป" และคุณจะมีโอกาสเลือกเฟรมเวิร์กต่างๆเพื่อเพิ่มลงในแอปพลิเคชันดังที่แสดงในภาพหน้าจอต่อไปนี้
Step 7 - เลือก“ JavaServer Faces” และใน“ JavaServer Faces Configuration” คุณต้องเลือก“ RichFaces” และกด“ Finish”
หากคุณไม่ได้รับ“ RichFaces” เป็นตัวเลือกคุณสามารถเพิ่มไฟล์ jars ที่ต้องการได้จากเส้นทางการสร้าง หลังจากขั้นตอนนี้แอปพลิเคชันของคุณพร้อมที่จะปรับใช้บนแอ็พพลิเคชันเซิร์ฟเวอร์ ต่อไปนี้เป็นโครงสร้างไดเรกทอรีโครงการของแอปพลิเคชันหลังจากทำตามขั้นตอนที่กล่าวถึงข้างต้นทั้งหมด
Step 8- คลิกซ้ายที่ไฟล์“ index.xhtml” แล้วเรียกใช้ไฟล์ คุณจะเห็นผลลัพธ์ต่อไปนี้ในเบราว์เซอร์
ในแอปพลิเคชันในชีวิตจริงคุณอาจต้องสร้างไฟล์ war ที่ต้องการและปรับใช้ในแอ็พพลิเคชันเซิร์ฟเวอร์เนื่องจากเพจทั้งหมดจะเชื่อมโยงกัน
อย่างไรก็ตามสำหรับบทช่วยสอนนี้เราจะเรียกใช้หน้าแอปพลิเคชันอย่างชาญฉลาดเนื่องจากเราจำเป็นต้องแสดงคุณสมบัติที่แตกต่างกันของแท็กต่างๆ