สรุปการสร้าง Java Web Application(JSF & Primefaces)

Suttipong Kullawattana

Knowledge

• Java

• css

• Javascript

• AJAX

• HTML

• JSF

• Primefaces UI

• DB2 , MySQL , Oracle

ขั้นตอนที่ 1 สร้างโปรเจค

ขั้นตอนที่ 2 Set Facet เพื่อเรียก Method กับ Class จากการ @ManagedBean

ขั้นตอนที่ 3 การ add Project เพื่อทดสอบการ Run เพื่อ Deploy

กรณีนี้ : ต้อง Add File Faces-Config.xml เข้ามาด้วย ถึงจะเรียกได้

ขั้นตอนที่ 4 ลบ web.xml ออกจากไฟล์ Web Resources แล้วAdd web.xml เข้ามาใน WEB-INF Folder จาก Demo Project อื่น

ขั้นตอนที่ 5 วิธีสร้าง Page xhtml โดยคลิ๊กขวาที่ WebContentFolder

ขั้นตอนที่ 6 การสร้าง UI ใน File xhtml โดยเพิ่มปุ่มเข้าไป โดยใช้ <h:commandButton>

Note : นี้คือการบอก ErrorUI ต้องอยู่ภายใต้ Tag <h:form>

ขั้นตอนที่ 7 สร้าง Class Java โดยคลิ๊กขวาที่ src folder และ import และ Add @ManagedBean เข้าไปเพื่อเรียกใช้ Service ผ่านการกดปุ่มในหน้า page1.xhtml

สามารถแก้ไขข้อความใน Block ได้ เพื่อแสดงหน้าเว็บ

กด Ctrl + Spacebar เพื่อเรียก Service

ตัวอย่างที่ 1 : การสร้างระบบลงทะเบียน โดยขั้นแรกให้สร้าง UI

(Bean Properties)

1.การใช้ Getter และ Setter เพื่อสร้าง Constructor ให้กับ Textbox ที่จะรับค่าเข้ามา (Bean Properties)

(ManagedBean Properties)

2.การสร้างส่วนควบคุมการเปลี่ยนหน้า (Action Controller Method)ตรวจสอบการกรอกและฟ้อง Error โดยให้ชี้ไปที่หน้านั้นๆ

public String doRegistration() { if(FormUtils.isAnyMissing(firstname,lastname,email)){return(“error page");} else {return(“success page");}

}

ตัวอย่างง่ายๆ การเช็คว่า Null หรือไม่ แล้วให้ชี้ไปที่หน้าเว็บนั้นๆ

สร้างหน้าแสดงผล

กรณีไม่ได้กรอกข้อมูล firstname

Ctrl + shift + T = Search Class

Ctrl + Shift + L = หาคียล์ดั

ตัวอย่างที่ 2 การสร้าง Business Logic

• Input form : business-logic.xhtml• Manage Bean (Bean Properties : Getter and Setter) : DealBean1.java• Placeholder (ตรวจสอบข้อมูล Account จากการ Map ข้อมูล)• Action Controller (Method) : neavigate-page.java• Interface & Logic Implementation (ตรวจสอบข้อมูลและโชว์ข้อมูลเงินฝาก จากการ Map ข้อมูล)• Main Result Page (แสดงผลรวม) : deal-success-1.xhtml----------------------------------------------------------------------------------------------------------------------------------• Low Balance (กรณีเงินฝากน้อย) : deal-insufficient-balance-1.xhtml• Error Missing Data (กรณีไม่พบข้อมูล) : deal-error-1.xhtml

การสร้าง Project Maven เพื่อใช้งาน Primefaces UI

• File > New > Other > Maven Project

ขั้นที่ 1 Setup Facet เพื่อเรียกใช้ JSF โดยมีไฟล์ web.xml และ Face-config.xml ติดมาด้วยในโฟลเดอร์ WEB-INF โดยคลิ๊กขวาที่โฟลเดอร์โปรเจคแล้วเลือก Properties

กรณีที่เรียกใช้ Java Server Faces ไม่ได้ สมมติไฟล์ชื่อ testPrimefaces ให้ไปเลือกเมนูแจ้งเตือนด้านล่าง แล้ว Disable Library

ขั้นที่ 2 Setup pom.xml

• เพิ่ม <dependencies> ของ JSF และ <repositories> ของ Primefaces ใน pom.xml

ภายใต้ Tag <project>

วิธีการท าเพิ่มเติม ติดตามได้ที่

• http://qussay.com/2013/09/14/create-jsf-2-2-maven-project-with-primefaces-3-5-using-eclipse/

• http://www.itcuties.com/j2ee/getting-started-with-primefaces-using-eclipse-ide-and-maven/

• http://www.primefaces.org/gettingStarted

Setup pom.xml

JSF <dependencies>

<dependencies>

<dependency>

<groupId>com.sun.faces</groupId>

<artifactId>jsf-api</artifactId>

<version>2.2.2</version>

</dependency>

<dependency>

<groupId>com.sun.faces</groupId>

<artifactId>jsf-impl</artifactId>

<version>2.2.2</version>

</dependency>

<dependency>

<groupId>javax.servlet</groupId>

<artifactId>javax.servlet-api</artifactId>

<version>3.0.1</version>

</dependency>

<dependency>

<groupId>org.primefaces</groupId><artifactId>primefaces</artifactId><version>3.5</version>

</dependency>

<dependency><groupId>org.primefaces.themes</groupId><artifactId>bootstrap</artifactId><version>1.0.9</version>

</dependency>

<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3</version>

</dependency> </dependencies>

Primefaces <repositories>

<repositories>

<repository>

<id>prime-repo</id>

<name>PrimeFaces Maven Repository</name>

<url>http://repository.primefaces.org</url>

<layout>default</layout>

</repository>

</repositories>

ขั้นที่ 3 Setup web.xml

<servlet>

<servlet-name>Faces Servlet</servlet-name>

<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>*.jsf</url-pattern>

</servlet-mapping>

<context-param>

<param-name>javax.faces.DEFAULT_SUFFIX</param-name>

<param-value>.xhtml</param-value>

</context-param>

<context-param>

<param-name>javax.faces.PROJECT_STAGE</param-name>

<param-value>Development</param-value>

</context-param>

ขั้นที่ 3 Setup web.xml (ต่อ)

• <context-param>

• <param-name>primefaces.THEME</param-name>

• <param-value>bootstrap</param-value>

• </context-param>

• <context-param>

• <description>State saving method: 'client' or 'server' (default). See JSF Specification section 2.5.2</description>

• <param-name>javax.faces.STATE_SAVING_METHOD</param-name>

• <param-value>server</param-value>

• </context-param>

ขั้นที่ 4 การทดสอบโดยสร้างหน้า index.xhtml แล้ว import xmlns:p="http://primefaces.org/ui" และเพิ่ม Tag <p:spinner> เข้าไป

ทดสอบกับ Apache Tomcat Server

ตัวอย่าง : การทดสอบ AJAX กับ Server ด้วย JSF

• สร้างเหตุการณ์ด้วย <f:ajax> เพื่อดักจับเหตุการณ์ โดยใช้ rendered ใน Tag Ajax อ้างถึง id ใน <h:outputText>

• สร้าง Bean Properties ใน Java Class และใช้ Getter และ Setter เพื่อสร้าง Constructor

• ทดสอบการเรียกข้อความ

ยิง Ajax ขึ้น Server 1 ครั้ง ผ่านปุ่ม