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>

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

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"

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>

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


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


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



<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

//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>

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>

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

//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>

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: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>

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:panelGrid columns="3“ rowClasses="oddRow, evenRow" styleClass="formGrid">


<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“



Viết đè lên nội dung thông báo

<h:panelGrid columns="3“ rowClasses="oddRow, evenRow" styleClass="formGrid">


<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“



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

Tạo tệp messages.properties

javax.faces.component.UIInput.REQUIRED_detail=required javax.faces.converter.IntegerConverter.INTEGER_detail=not a valid number

Câu hỏi

Technology

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