Develop Web Application with JSF and MyFaces
JSF ย่อมาจาก JavaServer Faces เป็น Framework ที่ใช้ในการ Develop Web Application ด้วย Java โดยมีลักษณะการทำงานแบบ MVC (Model View Controller)
จุดเด่นของ JSF
- เป็น Component-Based Framework ทำ ให้ ง่าย ใน การ Develop
- มี Component Support การ ใช้ งานเยอะ
- เป็น รูปแบบ Programming แบบ Event-Driven ซึ่ง ผู้ ใช้ ส่วน ใหญ่ คุ้นเคยดี
- Support จาก Vendor เจ้า ใหญ่ๆ เช่น IBM, Oracle, Apache, etc.
- ทำ งานร่วม กับ Framework อื่นๆ ได้
- เป็น แบบ MVC ทำ ให้ ง่าย ใน การ Develop และ Maintenance
MyFaces
MyFaces เป็น JSF Component จาก Apache ซึ่ง จะ ประกอบไป ด้วย Component จำนวนมากที่มาช่วยให้การ Develop ง่ายขึ้น
Development Environment
- Eclipse WTP 1.53
- Exadel Studio 4.0.4 (Eclipse Plug-in)
- Apache Tomcat 5.5
(MVC) Model, View, Controller
ที่มา FAQ: MVC (Model-View-Controller) คืออะ ไรModel: Data, Data Access Object, Beans
View: JSP
Controller: Java Class
Project Structure
ประกอบไปด้วยส่วนที่สำคัญๆตามนี้
- Java Source คือที่ เก็บ source code ของ java ซึ่ง จะ เป็น ส่วน ของ Controller กับ Model
- JSP เป็น ส่วน ของ View
- web.xml เป็น config file ที่ ไว้ ควบคุม Web Project ตามมาตรฐานของ Java
- faces-config.xml เป็น config file ที่สำ คัญของ Project ที่ จะ เป็น การควบคุมการทำ งาน ทั้ง หมดของ JSF Project
Managed Bean
เป็น java class ที่กำหนดไว้ใน faces-config ว่าจะมีการใช้งาน class นั้นๆโดยจะมีการกำหนดชื่อ, scrope(request, session, application) และ Class
Tag Library
<%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %> เรียก ใช้ jsf html เป็น component สำ หรับแสดงผล ใน แบบ html เช่น Text Box, Combo, Check Box, etc.
<%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %> เรียก ใช้ jsf html เป็น ส่วน ประกอบสำ หรับการแสดงผล เช่น item ใน combo, validator, etc.
<%@ taglib uri=”http://myfaces.apache.org/tomahawk” prefix=”t”%> เรียก ใช้ MyFaces Tomahawk component ของ MyFaces ที่ เพิ่มเติมมา จาก jsf html
JSP File Structure
จะเหมือน html ทั่วไปแต่จะมีเพิ่มส่วนของ f:view เข้ามาComponent ใน JSF จะ ถูก render ก็ต่อเมื่อประกาศ ไว้ ใน <f:view> ถ้า อยู่นอก f:view ก็จะไม่แสดงผลและถ้ามีการส่ง data ไป controller ก็จะต้อง อยู่ ใน <h:form> ด้วย
ตัวอย่าง<html>
<body>
<h1>JSF First Page</h1>
<f:view>
<h:form>
Name: <h:inputText></h:inputText>
</h:form>
</f:view>
</body>
</html>
Create Project with Exadel
Kick Start Project
Kick Start Project ของ Exadel เป็น program เล็กๆ ที่จะสร้างการทำงานพื้นฐานของ JSF ขึ้นมาโดยจะมีขั้นตอนการทำงานตามนี้
- รับชื่อจาก screen
- แสดงคำทักทายชื่อที่รับเข้ามา
view: inputname.jsp, greeting.jsp
controller: GetNameBean.java
model: None JSF Component
outputText
descrption: แสดงข้อ ความ
property: value- ข้อ ความ ที่ ต้อง การแสดง<h:outputText value=”Hello World” />
outputLabel
description: แสดงข้อ ความ ภาย ใต้ tag label
property: value- ข้อ ความ ที่ ต้อง การแสดง<h:outputLabel value=”Hello World” />
outputLink
description: แสดงข้อ ความ ที่ link ไป ยัง page อื่นๆ , จะ ต้อง ใช้ ร่วม กับ component อื่นๆ เพื่อแสดงข้อ ความ หรือ รูปแบบ
property: value-page ที่ ต้อง การ link ไป , target-target windows (blank, <window name>)<h:outputLink value=”http://www.yahoo.com” target=”blank”><h:outputText value=”Yahoo” /></h:outputLink>
inputText
description: รับ input text ใน แบบ text box
property: value-property ของ manage bean<h:inputText value=” ” />
inputTextarea
description: รับ input text ใน แบบ text area
property: value-property ของ manage bean, rows- จำ นวนบรรทัด , cols- ขนาดของ columns<h:inputTextarea value=” ” cols=”40″ rows=”4″></h:inputTextarea>
commandButton
description: คือ button โดย จะ ส่ง action ไป ยัง manage bean
property: value- ข้อ ความ ที่ ต้อง การแสดง , action-action ใน manage bean<t:commandButton id=”submit” action=”sayhello” value=”Say Hello” />
commandLink
description: จะ คล้าย กับ commandButton แต่ แสดงผล เป็น link ที่ส่ง action ไป ยัง manage bean ซึ่ง จะ ไม่ เหมือน กับ outputLink ที่ ไม่ ได้ ส่ง action
property: value- ข้อ ความ ที่ ต้อง การแสดง ( ไม่ เหมือน outputLink), action-action ใน manage bean<t:commandLink id=”submit” action=”sayhello” value=”Say Hello” />
t:inputCalendar
description: แสดง Calendar เพื่อรับ input วันที่
property: value-Date, renderAsPopup,popupDateFormat<t:inputCalendar renderAsPopup=”true” popupDateFormat=”yyyyMMdd”></t:inputCalendar>
selectBooleanCheckbox
description: checkbox
property: value-true/false, ใน การแสดงข้อ ความ จะ ใช้ ร่วม กับ output component<h:outputText value=” ” ><h:selectBooleanCheckbox value=”true” /></h:outputText>
selectOneMenu
description: combo
property: value-property ของ manage bean
f:selectItems – สำ หรับแสดง option โดย เอาค่ามา จาก property ที่ เป็น list of SelectItem ใน manage beans
f:selectItem – สำ หรับแสดง option ใน ใส่ เอง ซึ่ง กำ หนด label กับ value ได้ ที่ itemLabel กับ itemValue<h:selectOneMenu value=” “>
<f:selectItem itemLabel=”Option1″ itemValue=”1″/>
<f:selectItem itemLabel=”Option2″ itemValue=”2″/>
</h:selectOneMenu>
<h:selectOneMenu value=” “>
<f:selectItems value=”#{GetNameBean.optionList} “/>
</h:selectOneMenu>
selectOneListbox
description: List
property: value-property ของ manage bean
f:selectItems – สำ หรับแสดง option โดย เอาค่ามา จาก property ที่ เป็น list of SelectItem ใน manage beans
f:selectItem – สำ หรับแสดง option ใน ใส่ เอง ซึ่ง กำ หนด label กับ value ได้ ที่ itemLabel กับ itemValue
ตัวอย่างเหมือน กับ selectOneMenuselectOneRadio
description: Radio Button
property: value-property ของ manage bean
f:selectItems – สำ หรับแสดง option โดย เอาค่ามา จาก property ที่ เป็น list of SelectItem ใน manage beans
f:selectItem – สำ หรับแสดง option ใน ใส่ เอง ซึ่ง กำ หนด label กับ value ได้ ที่ itemLabel กับ itemValue
ตัวอย่างเหมือน กับ selectOneMenu
panelGrid
descrption: สร้าง layout ใน รูปแบบ table
property: columns- จำ นวน columns<h:panelGrid columns=”2″> </h:panelGrid> panelGroup
descrption: จัดกลุ่มของ component ให้ อยู่ เพื่อ ให้ อยู่ ใน column เดียว กัน จะ ใช้ ร่วม กับ panelGrid
property: value- ข้อ ความ ที่ ต้อง การแสดง<h:panelGrid columns=”2″><h:inputText value=” ” /><h:panelGroup><h:commandButton action=” ” value=”Ok” /></h:panelGroup></h:panelGrid>
Common Propertyrendered – ซ่อน หรือ แสดง readonly – อ่าน ได้ อย่างเดียว disabled – ไม่ Enable id – id ของ component นั้น ถ้า ไม่ ใส่ จะ auto generate ให้ แต่ ถ้า ใส่ ก็ห้าม ซ้ำ กัน style – style ที่ จะ กำ หนด ให้ กับ component นั้น เช่น font: tahoma; font-size:small styleClass – css class ที่กำ หนด ให้ class นั้น title – text ที่ จะ แสดงตอน mouse hover
Reference to Manage Bean
จะ ใช้ รูปแบบนี้คือ #{manageBeans.property} เช่น <h:inputText value=”#{loginCtrl.userName} ” /> หรือ <h:outputText value=”Hello #{loginCtrl.userName}, How are you?” />จะ มี Component ที่สำ คัญอีกตัวหนึ่งคือ DataTable ซึ่ง จะ พูด ถึง ใน ส่วน ต่อไป
Navigator Rules
ใน JSF มีการส่ง message เพื่อที่จะทำการ link ไป ยัง page ใดๆ ใน project โดย ผ่านทาง Action ซึ่ง Navigator Rules จะ กำหนด ไว้ ใน faces-config.xml <navigation-rule>
<from-view-id>/pages/ShowcaseView.jsp</from-view-id>
<navigation-case>
<from-outcome>go_ShowcaseView</from-outcome>
<to-view-id>/pages/ShowcaseView.jsp</to-view-id>
</navigation-case>
</navigation-rule>หมายถึงจากหน้า /pages/ShowcaseView.jsp ถ้า มี Message เข้ามาว่า go_ShowcaseView ให้ ไปที่ /pages/ShowcaseView.jspExercise
สร้าง Page ที่รับ input จาก component ต่างๆ แล้ว แสดงผลค่าที่รับเข้ามา
ขั้นตอน
- สร้าง controller class
- ใน controller class สร้าง property สำ หรับรับ Input ตาม Type
- สร้าง manage bean จาก controller class
- สร้าง view โดย แบ่ง เป็น ส่วน การรับ Input แล Show Row ใน DataTable
DataTable
t:dataTable เป็น Component ที่ ใช้แสดงผลของข้อมูลในรูปแบบตาราง ซึ่งสามารถปรับเปลี่ยนได้ หลายรูปแบบตามความ เหมาะสม
property:
- value – Collection ของ Object อาจ จะ เป็น Array หรือ List ก็ ได้
- var – ชื่อที่ ไว้ สำหรับ reference ไปยัง object ในแต่ละ row
- rowIndexVar – ชื่อที่ไว้สำหรับ reference ไป ยัง row idex
- rows – จำนวน row ที่แสดงผล
- styleClass, headerClass, footerClass, rowClasses – Class ของ Style ที่สำหรับกำหนดรูปแบบของ Table
t:column สำ หรับกำ หนดการแสดง ใน แต่ละ column ใน dataTable จะ ต้อง ทำ งานร่วม กับ component อื่นๆ ้ เช่น outputText, commandLink, etc.<t:dataTable
id=”dataTable”
value=”#{displayEmployeeCtrl.employeeList} “
var=”data” rowIndexVar=”rowNo”
rows=”10″
styleClass=”scrollerTable”
headerClass=”standardTable_Header”
footerClass=”standardTable_Footer”
rowClasses=”standardTable_Row1″ >
<t:column>
<f:facet name=”header”><h:outputText value=”#” /></f:facet>
<h:selectBooleanCheckbox value=”#{displayEmployeeCtrl.select[rowNo]} ” />
</t:column>
<t:column>
<f:facet name=”header”><h:outputText value=”No.” /></f:facet>
<h:outputText value=”#{rowNo+1} ” />
</t:column>
</t:dataTable>Exercise
สร้าง Page ที่รับ input เป็น จำ นวนของ Row ที่ ต้อง การ ให้ แสดงผล เมื่อ ใส่ เสร็จกดปุ่ม Ok ก็ จะ แสดงข้อมูล ใน DataTable ตามจำ นวน Row ที่ ใส่ เข้า มา
โดย แต่ละ row จะ มีข้อมูลตามนี้
- Row Number
- Input Text
- ข้อ ความ ว่า Input Filename Number + Row Number
ขั้นตอน1. สร้าง Class ของแต่ละ Row 2. สร้าง Class ของ Controller ให้ มี property สำ หรับรับ Input จำ นวน Row และ List ของ Row3. ใน Controller สร้าง Function ที่ ไม่ มี Argument เพื่อ Generate List ของ Row ตามจำ นวนที่ Input เข้า มา 4. สร้าง View ที่มีการรับ Input และ แสดงผล DataTable
Create Real World Application
ในส่วนนี้จะเป็นการสร้าง Web Application ด้วย JSF โดย เป็น Screen สำ หรับ Search, Add, Edit and Delete ข้อมูลพนักงาน โดย จะเริ่มตั้งแต่การ Design Program จาก Draft Design ที่ User ส่งมาResource JSF Website http://java.sun.com/javaee/javaserverfaces/
MyFaces Website http://myfaces.apache.org/
