สร้าง Project JSF Primeface ด้วย Maven พร้อมกับสอนทำระบบ Template Layout

Sharing is caring!

Java Server Faces (JSF) เป็นเว็บแอ็พพลิเคชันที่ใช้ Java ซึ่งมีจุดมุ่งหมายเพื่อลดความซับซ้อนในการพัฒนาอินเทอร์เฟซสำหรับผู้ใช้บนเว็บ JavaServer Faces เป็นเทคโนโลยีการแสดงผลแบบมาตรฐานซึ่งได้รับการประกาศไว้ในข้อกำหนดผ่านกระบวนการ Java Community Process

JSF ถูกนำไปพัฒนาต่อยอดความสามารถโดยบริษัทขนาดใหญ่ หลายบริษัท

  • Apache MyFaces – The Apache Foundation JSF implementation with Ajax components
  • Backbase Enterprise Ajax – JSF Edition – Ajax framework
  • BootsFaces Open source JSF Framework based on Bootstrap
  • IBM Notes – XPages
  • ICEfaces – open-source, Java JSF extension framework and rich components, Ajax without JavaScript
  • JBoss RichFaces (derived from and replaces Ajax4jsf) – Ajax-enabled JSF components for layout, file upload,
  • forms, inputs and many other features. It reached its end-of-life in June 2016.
  • OmniFaces – open-source JSF utility library
  • Open Faces – Ajax framework with JSF components
  • Oracle ADF Faces Rich Client – Oracle Application Development Framework
  • PrimeFaces – Ajax framework with JSF components
  • Sun Java BluePrints AJAX components
  • ZK – Ajax framework with JSF components





Primeface เป็น Framework ที่ไม่หยุดพัฒนาและมี UI Component มากมายและสวยงาม

ด้วยความสม่ำเสมอในการพัฒนาและมีการปรับปรุง framework อยู่ตลอดเวลา ออกผลิตภัณฑ์ตัวใหม่ออกมา เช่น PrimeNG ,PrimeReact ,PrimeUI เป็นต้น ทำให้เลือก Primeface เป็นตัวเลือกในการพัฒนา Project Webapp นี้

มาเริ่มสร้าง Project กัน

  1. Build Maven Project (maven-archetype-webapp) ขึ้นมา
  2. เพิ่ม Dependencies
  3. สร้างไฟล์ webapp/WEB-INF/faces-config.xml
  4. เพิ่ม Configure Faces Servlet in webapp/WEB-INF/web.xml
  5. สร้างไฟล์ webapp/templates/layout.xhtml
  6. สร้างไฟล์ webapp/templates/themeMenu.xhtml เพื่อทำเป็น navigator Menu ลิ้งไปที่หน้าอื่น ๆ
  7. สร้าง page webapp/pages/page1.xhtml ,page2.xhtml ,page3.xhtml ,page4.xhtml

    1. จุดที่สำคัญคือเพิ่ม template=”../templates/layout.xhtml” เข้าไปเพิ่มที่ ui:composition ทำให้อ้างถึง template layout ได้
  8. การเปลี่ยน Primeface Theme ของ website

  9. ตัวอย่างหน้า web site

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *