Bài 12: JSF-2 - Lập Trình Mạng Nâng Cao

Java Servle Faces
ThS Văn Thiên Hoàng

N i dungộ
JSF là gì?
Thu n l i c a JSF.ậ ợ ủ
Ki n trúc JSF.ế
Mô hình ho t đ ng JSF.ạ ộ

Java Server Faces là gì ?
 JSF là m t n n t ng công ngh cho phépộ ề ả ệ
thi t l p mô hình MVC.ế ậ
 Cung c p m t t p h p các thành ph n dùngấ ộ ậ ợ ầ
l i cho phép trình bày GUI d a vào Web.ạ ự
 Cung c p m t t p các th JSP cho phép truyấ ộ ậ ẻ
c p các thành ph n.ậ ầ

Thu n l i c a JFSậ ợ ủ
Các cách ki m soát GUIể
Cung c p th vi n API k t h p v i các customấ ư ệ ế ợ ớ
tags đ t o giao di n HTML ph c t p.ể ạ ệ ứ ạ
Ki m soát s ki nể ự ệ
H tr vi t code java đ ki m soát s ki n khiỗ ợ ế ể ể ự ệ
form đ c submit.ượ
Qu n lý Beanả
H tr đ y đ vi c s d ng Bean và truy nỗ ợ ầ ủ ệ ử ụ ề
tham s .ố
Ngôn ng : h tr đ y đ cách th c đ truyữ ỗ ợ ầ ủ ứ ể
c p thu c tính bean và các thành ph nậ ộ ầ
khác.

Ki n trúc JSFế
 JSF tuân th mô hìnhủ MVC
 Model: đ i t ng và thu c tính c a ng d ng.ố ượ ộ ủ ứ ụ
 View: Cách bi u di n ng i s d ng.ể ễ ườ ử ụ
 Controller: Đ nh nghĩa cách x lý nghi p v c a ngị ử ệ ụ ủ ứ
d ng.ụ

Xây d ng các ng d ng c b nự ứ ụ ơ ả
Ví d ng d ng là m t ph n m m máy tính b túiụ ứ ụ ộ ầ ề ỏ
(Calculator), đ minh h aể ọ :
Làm th nào đ b trí m t ng d ng JSF đ tri n khaiế ể ố ộ ứ ụ ể ể
Làm th nào đ c u hình m t t p tin web.xml cho JSFế ể ấ ộ ệ
Làm th nào đ c u hình m t t p tin faces-config.xml choế ể ấ ộ ệ
m t ng d ngộ ứ ụ
Vi t bean qu n lý (còn g i là các đ i t ng mô hình và cácế ả ọ ố ượ
trình đi u khi n)ề ể
Xây d ng khung nhìn b ng cách s d ng công ngh JSPự ằ ử ụ ệ
S d ng các th vi n th tùy bi n đ xây d ng cây thànhử ụ ư ệ ẻ ế ể ự
ph n trong g c khung nhìnầ ố
M c đ nh duy t tính h p l c a các tr ng bi u m uặ ị ệ ợ ệ ủ ườ ể ẫ

Xây d ng các ng d ng c b n (1)ự ứ ụ ơ ả

Các b c th c hi nướ ự ệ
Khai báo Faces Servlet và thêm ánh x Facesạ
Servlet trong t p tin web.xml c a b mô t tri nệ ủ ộ ả ể
khai ng d ng Webứ ụ
Ch rõ t p tin faces-config.xml trong t p tinỉ ệ ệ
web.xml
T o l p Calculatorạ ớ
Khai báo bean Calculator trong t p tin faces-ệ
config.xml file
T o trang index.jspạ
T o trang calculator.jspạ

Khai báo servlet Faces và ánh xạ
servlet
Đ s d ng Servlet Faces, c n ph i cài đ tể ử ụ ầ ả ặ
nó trong t p tin 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>
<url-pattern>*.jsf</url-pattern> </servlet-mapping>
<servlet-mapping>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>

Ch rõ t p tin faces-config.xml fileỉ ệ
T o t p tin c u hìnhfaces-config.xml và đ tạ ậ ấ ặ
nó vào trong th m c WEB-INF.ư ụ
<?xml version='1.0' encoding='UTF-8'?>

<faces-config version="1.2"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
</faces-config>

T o l p Calculatorạ ớ
Package my;
public class Calculator {
private int firstNumber = 0;
private int result = 0;
private int secondNumber = 0;
public void add() { result = firstNumber + secondNumber; }
public void multiply() { result = firstNumber * secondNumber; }
public void clear() { result = 0; }
public int getFirstNumber() { return firstNumber; }
public void setFirstNumber(int firstNumber)
{this.firstNumber = firstNumber; }
public int getResult() { return result; }
public void setResult(int result) { this.result = result; }
public int getSecondNumber() { return secondNumber; }
public void setSecondNumber(int secondNumber)
{ this.secondNumber = secondNumber; } }

Khai báo bean Calculator trong t p tinệ
faces-config.xml file
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">
<managed-bean>
<managed-bean-name>calculator</managed-bean-name>
<managed-bean-class> my.Calculator </managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
</faces-config>

T o trang index.jspạ
M c đích c a trang index.jsp trong ngụ ủ ứ
d ng Calculator là đ đ m b o r ng trangụ ể ả ả ằ
calculator.jsp n p vào trong b i c nh JSFạ ố ả
sao cho có th tìm th y g c khung nhìnể ấ ố
t ng ng.ươ ứ
<jsp:forward page="/faces/calculator.jsp" />

//T p tin. /src/main/webapp/calculator.jspậ
<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Calculator Application</title> </head>
<body>
<f:view>
<h:form id="calcForm"> <h4>Calculator</h4>
<table> <tr>
<td><h:outputLabel value="First Number" for="firstNumber" /></td>
<td><h:inputText id="firstNumber"
value="#{calculator.firstNumber}" required="true" /></td>
<td><h:message for="firstNumber" /></td>
</tr>

<h:panelGroup rendered="#{calculator.result != 0}">
<h4>Results</h4>
<table>
<tr>
<td> First Number ${calculator.firstNumber} </td></tr>
<tr>
<td> Second Number ${calculator.secondNumber} </td>
</tr>
<tr><td> Result ${calculator.result} </td></tr>
</table>
</h:panelGroup>
</f:view>
</body>
</html>

Các th JSFẻ
<f:view> </f:view>
<h:form id=""> </h:form>
<h:outputLabel value="" for="" />
<h:inputText id="" value="" required="true" />
<h:message for="" />
<h:commandButton action="" value="" />
<h:panelGroup></h:panelGroup>

<h:panelGrid
S d ng <h:panelGrid> đ hi n th d li u d ngử ụ ể ể ị ữ ệ ạ
b ng.ả
Không th thêm HTML vào m t <h:panelGrid>.ể ộ

T o trang calculator.jspạ -ph nầ
nh pậ
<head>
<title>Calculator Application</title>
</head>
<body>
<h:form id="calcForm">
<h4>Calculator</h4>

T o trang calculator.jsp-phạ nầ
nh pậ
<h:panelGrid columns="3">
<%-- First Number--%>
<h:outputLabel value="First Number" for="firstNumber" />
<h:inputText id="firstNumber" value="#{calculator.firstNumber}" required="true" />
<h:message for="firstNumber" />
<%-- Second Number--%>
<h:outputLabel value="Second Number" for="secondNumber" />
<h:inputText id="secondNumber" value="#{calculator.secondNumber}" required="true"/>
<h:message for="secondNumber" />
</h:panelGrid>
<div>
<h:commandButton action="#{calculator.clear}" value="Clear" immediate="true"/>
</div>
</h:form>

T o trang calculator.jsp-phạ n k t quầ ế ả
<h4>Results</h4>
<h:panelGrid columns="1">
<h:outputText value="First Number #{calculator.firstNumber}"/>
<h:outputText value="Second Number #{calculator.secondNumber}"/>
<h:outputText value="Result #{calculator.result}"/>
</h:panelGrid>
</h:panelGroup>
</f:view>
</body>
</html>

Đ nh ki u cho PanelGridị ể
<head>
<title>Calculator Application</title>
<link rel="stylesheet" type="text/css“
href="<%=request.getContextPath()%>/css/main.css" />
</head>
<body>
<h:form id="calcForm">
<h4>Calculator</h4>

CSS cho PanelGrid
oddRow {
background-color: white;
}
evenRow {
background-color: silver;
}
formGrid {
border: solid #000 3px; width: 400px;
}
resultGrid {
border: solid #000 1px; width: 200px;
}
/css/main.css

S d ng CSS, thông báoử ụ
<h:panelGrid columns="3“ rowClasses="oddRow, evenRow" styleClass="formGrid">
<h:inputText id="firstNumber" value="#{calculator.firstNumber}" required="true“
label="First Number"/>
<h:inputText id="secondNumber" value="#{calculator.secondNumber}" required="true“
label=“Second Number"/>
</h:panelGrid>
<div>
</div>
</h:form>

S d ng CSSử ụ
<h4>Results</h4>
<h:panelGrid columns="1“ rowClasses="oddRow, evenRow" styleClass="resultGrid">
<h:outputText value="First Number #{calculator.firstNumber}"/>
<h:outputText value="Second Number #{calculator.secondNumber}"/>
<h:outputText value="Result #{calculator.result}"/>
</h:panelGrid>
</h:panelGroup>
</f:view>
</body>
</html>

Hi n th thông báo tóm t tể ị ắ
<h:inputText id="firstNumber" value="#{calculator.firstNumber}" required="true”>
<h:message for="firstNumber" showSummary="true" showDetail="false"/>
</h:panelGrid>
<div>
</div>
</h:form>

Vi t đè lên n i dung thông báoế ộ
<h:inputText id="firstNumber" value="#{calculator.firstNumber}" required="true“
label="First Number“ requiredMessage="required" converterMessage="not a valid" />
</h:panelGrid>
<div>
</div>
</h:form>

Thay đ i thông báo toàn c cổ ụ
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd" version="1.2">
<application>
<message-bundle>messages</message-bundle>
</application> ...

T o t p messages.propertiesạ ệ
javax.faces.component.UIInput.REQUIRED_detail=required
javax.faces.converter.IntegerConverter.INTEGER_detail=not a valid number

Bài 12: JSF-2 - Lập Trình Mạng Nâng Cao

More Related Content

What's hot (19)

Viewers also liked (17)

Recently uploaded (20)

Bài 12: JSF-2 - Lập Trình Mạng Nâng Cao