The document discusses how to build a basic JavaServer Faces (JSF) application for a calculator. It includes declaring the Faces servlet in web.xml, configuring faces-config.xml, creating a Calculator bean class to manage data, building the views using JSF tags in JSP pages, and applying CSS styling. The application allows users to enter two numbers, select an operation, and see the result.

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

2. 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.ạ ộ

3. 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.ậ ầ

4. 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.

5. 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.ụ

6. 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ặ ị ệ ợ ệ ủ ườ ể ẫ

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

8. 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ạ

9. 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>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern> </servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>

10. 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'?>
<!-- =========== FULL CONFIGURATION FILE
================================== -->
<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>

11. 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; } }

12. 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"
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"
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>

13. 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" />

14. T o trang 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>

15. T o trang calculator.jspạ
<tr>
<td><h:outputLabel value="Second Number" for="secondNumber" /> </td
<td><h:inputText id="secondNumber"
value="#{calculator.secondNumber}" required="true" /></td>
<td><h:message for="secondNumber" /></td>
</tr> </table>
<div>
<h:commandButton action="#{calculator.add}" value="Add" />
<h:commandButton action="#{calculator.multiply}" value="Multiply" />
<h:commandButton action="#{calculator.clear}" value="Clear"
immediate="true"/>
</div>
</h:form>

16. T o trang calculator.jspạ
<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>

17. T o trang calculator.jspạ
<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>

18. 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>

19. <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>.ể ộ

20. T o trang calculator.jspạ -ph nầ
nh pậ
//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>
<h:form id="calcForm">
<h4>Calculator</h4>

21. 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.add}" value="Add" />
<h:commandButton action="#{calculator.multiply}" value="Multiply" />
<h:commandButton action="#{calculator.clear}" value="Clear" immediate="true"/>
</div>
</h:form>

22. T o trang calculator.jsp-phạ n k t quầ ế ả
<h:panelGroup rendered="#{calculator.result != 0}">
<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>

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

24. 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

25. S d ng CSS, thông báoử ụ
<h:panelGrid columns="3“ rowClasses="oddRow, evenRow" styleClass="formGrid">
<%-- First Number--%>
<h:outputLabel value="First Number" for="firstNumber" />
<h:inputText id="firstNumber" value="#{calculator.firstNumber}" required="true“
label="First Number"/>
<h:message for="firstNumber" />
<%-- Second Number--%>
<h:outputLabel value="Second Number" for="secondNumber" />
<h:inputText id="secondNumber" value="#{calculator.secondNumber}" required="true“
label=“Second Number"/>
<h:message for="secondNumber" />
</h:panelGrid>
<div>
<h:commandButton action="#{calculator.add}" value="Add" />
<h:commandButton action="#{calculator.multiply}" value="Multiply" />
<h:commandButton action="#{calculator.clear}" value="Clear" immediate="true"/>
</div>
</h:form>

26. S d ng CSSử ụ
<h:panelGroup rendered="#{calculator.result != 0}">
<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>

27. Hi n th thông báo tóm t tể ị ắ
<h:panelGrid columns="3“ rowClasses="oddRow, evenRow" styleClass="formGrid">
<%-- First Number--%>
<h:outputLabel value="First Number" for="firstNumber" />
<h:inputText id="firstNumber" value="#{calculator.firstNumber}" required="true”>
<h:message for="firstNumber" showSummary="true" showDetail="false"/>
<%-- Second Number--%>
<h:outputLabel value="Second Number" for="secondNumber" />
<h:inputText id="secondNumber" value="#{calculator.secondNumber}" required="true“
label=“Second Number"/>
<h:message for="secondNumber" />
</h:panelGrid>
<div>
<h:commandButton action="#{calculator.add}" value="Add" />
<h:commandButton action="#{calculator.multiply}" value="Multiply" />
<h:commandButton action="#{calculator.clear}" value="Clear" immediate="true"/>
</div>
</h:form>

28. Vi t đè lên n i dung thông báoế ộ
<h:panelGrid columns="3“ rowClasses="oddRow, evenRow" styleClass="formGrid">
<%-- First Number--%>
<h:outputLabel value="First Number" for="firstNumber" />
<h:inputText id="firstNumber" value="#{calculator.firstNumber}" required="true“
label="First Number“ requiredMessage="required" converterMessage="not a valid" />
<h:message for="firstNumber" />
<%-- Second Number--%>
<h:outputLabel value="Second Number" for="secondNumber" />
<h:inputText id="secondNumber" value="#{calculator.secondNumber}" required="true“
label=“Second Number"/>
<h:message for="secondNumber" />
</h:panelGrid>
<div>
<h:commandButton action="#{calculator.add}" value="Add" />
<h:commandButton action="#{calculator.multiply}" value="Multiply" />
<h:commandButton action="#{calculator.clear}" value="Clear" immediate="true"/>
</div>
</h:form>

29. 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"
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" version="1.2">
<application>
<message-bundle>messages</message-bundle>
</application> ...

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

31. Câu h iỏ