Thực hành Java Web Lab 8

IT Research Department @BKAP 2015 Page [1/23] Lab 08 Java Server Faces as web page Mục tiêu - Sử dụng HTML JSF tag lib để xây dựng các web page - Sử dụng Validators và Listeners để thê

IT Research Department @BKAP 2015 Page [1/23]

Lab 08 Java Server Faces as web page

Mục tiêu

- Sử dụng HTML JSF tag lib để xây dựng các web page

- Sử dụng Validators và Listeners để thêm các chức năng phụ vào web page

đã sử dụng các thẻ HTML JSF tag lib để tạo các thành phần của trang web (vd:

<h:inputText>, <h:outputLabel> ) Để biết rõ hơn về các thẻ này, học viên đọc thêm tài liệu đính kèm bài thực hành (slides overview of JSF-XHTML)

Trong phần thực hành này chúng ta sẽ tiếp tục sử dụng các thẻ JSF-XHTML để tạo các trang web và sử dụng thêm JSF Validator, tạo một trang login, sau đó verify user-pass người dùng nhập vào

STEP 1

Tạo mới project Web trong Netbeans -> Framework: chọn Java Server Faces

IT Research Department @BKAP 2015 Page [3/23]

STEP 2

Tạo mới package tên bean, trong đó tạo managed bean tên UserBean.java

Chọn Scope: session -> Bean sẽ được dùng trong phạm vi của 1 HTTP session

Tạo các private variable cho RegistrationBean:

private String name ;

private String password ;

Right Click on UserBean class -> Insert Code -> Generate getters and setters -> Chọn tất

cả các thuộc tính của class

Tạo method login() để validate thông tin của user Trong bài này chúng ta làm đơn giản verify user=tester, password=tester Nhưng có thể mở rộng ra bằng cách lấy về user / password từ form nhập và verify với CSDL

Code của file UserBean.java như sau:

public class UserBean {

private String name;

private String password;

IT Research Department @BKAP 2015 Page [5/23]

public void setName(String name) {

this.name = name;

}

public String getPassword() {

return password;

}

public void setPassword(String password) {

this.password = password;

}

public String login() {

// Image here a database access to validate the users

if (name.equalsIgnoreCase("tester") &&

<h:outputLabel value ="User Name" />

<h:inputText value = #{userBean.name}">

<f:validator

validatorId ="validator.LoginValidator" />

</h:inputText>

<h:outputLabel value ="Password" />

<h:inputSecret value = #{userBean.password}" />

<h:form> Xây dựng một form mới

<h:outputLabel> Định nghĩa một label

<h:inputText> Định nghĩa một text box sử dụng thuộc

tính name của bean

<h:inputSecret> Che dấu text sẽ nhập, sử dụng thuộc tính

IT Research Department @BKAP 2015 Page [7/23]

password của bean

<h:commandButton> Định nghĩa một button, hiển thị text là

Login, khi ấn button thì sẽ thực hiện các lệnh trong method login() của bean

Tạo mới trang successLogin.xhtml để hiển thị message khi login successful

Code như sau:

public void validate(FacesContext context, UIComponent component,

Object value) throws ValidatorException {

String user = (String) value;

if (!user.equalsIgnoreCase( "tester" )) {

FacesMessage message = new FacesMessage();

message.setDetail( "User " + user + " does not exists" );

message.setSummary( "Login Incorrect" );

IT Research Department @BKAP 2015 Page [9/23]

Override method validate của interface Validator Phương thức này sẽ được gọi với khai báo sau trong trang index.html

<f:validator validatorId ="validator.LoginValidator" />

Thêm config sau vào file faces-config.xml cho validator:

<validator>

<display-name> validator.LoginValidator </display-name>

<validator-id> validator.LoginValidator </validator-id>

<validator-class> validator.LoginValidator </validator-class>

</validator>

STEP 6:

Tạo các navigation rules trong file faces-config.xml

<navigation-rule>

<display-name> LoginView </display-name>

<from-view-id> index.xhtml </from-view-id>

<navigation-case>

<from-outcome> success </from-outcome>

<to-view-id> successLogin.xhtml </to-view-id>

</navigation-case>

</navigation-rule>

<navigation-rule>

<display-name> LoginView </display-name>

<from-view-id> index.xhtml </from-view-id>

<navigation-case>

<from-outcome> failed </from-outcome>

<to-view-id> failedLogin.xhtml </to-view-id>

</navigation-case>

</navigation-rule>

Chạy chương trình, kết quả như sau:

Nếu nhập sai tên username, thì validator sẽ thực hiện và trả về message hiển thị ngay trên trang index.xhtml

Bài 1.2: Action Listener

- Trong bài thực hành này chúng ta sẽ phân biệt: action và action listeners

Trong JSF, “Action Events” kích hoạt khi chúng ta click vào button hoặc link component (sử dụng các thẻ như <h:commandButton> <h:commandLink>)

Actions vs Action listeners

- “action” được sử dụng để thực hiện các chức năng (functionalities) hoặc logic nghiệp vụ (business logic) hoặc thực hiện navigation tới một trang khác

IT Research Department @BKAP 2015 Page [11/23]

- “action listeners” được sử dụng để thực hiện các logic liên quan đến các thành phần giao diện (UI component) hoặc để gọi các hành động cho các thành phần

đó Trường hợp được dùng nhiều nhất của action listener là để lấy về các giá trị thuộc tính gắn liền với một component (vd sử dụng thẻ <f:attribute>)

Sử dụng “action” như chúng ta đã làm với bài tập trước, để forward tới một trang khác (thực hiện navigation task)

Trong bài tập này chúng ta sẽ sử dụng “action listener”

Có hai cách để implement action listener

Cách 1: sử dụng trực tiếp method được xây dựng trong managed bean

Trong trang JSP, chúng ta định nghĩa một button như sau:

public class ExampleBean{

public String buttonId ;

public void printIt(ActionEvent event){

//Get submit button id

Cách 2:

Trong <h:commandButton> hay <h:commandLink> sử dụng thẻ core <f:actionListener>, chỉ rõ action listener class (phải implement interface ActionListener) và override phương thức processAction()

Trên trang JSF:

<h:commandButton id ="submitButton"

value ="Submit" action = #{exampleBean.outcome}" >

<f:actionListener type ="action.ExampleActionListener" />

IT Research Department @BKAP 2015 Page [13/23]

Code của UserBean.java như sau:

public class UserBean {

private String nickname ;

//action listener event

public void attributeListener(ActionEvent event) {

public String getNickname() {

return nickname ;

}

public void setNickname(String nickname) {

this nickname = nickname;

}

}

Trong bài này chúng ta sẽ sử dụng cách 1 để implement action listener Phương thức attributeListener sẽ được gán cho thuộc tính actionListener của command button trên trang JSF

Trong phương thức này, chúng ta sẽ lấy về giá trị của thuộc tính “username” của UI component

IT Research Department @BKAP 2015 Page [15/23]

Vì “action” của button gọi đến method “outcome” trong bean, method này trả về

“result” để thực hiện navigation tới trang result.xhtml

Chạy project, kết quả như sau:

IT Research Department @BKAP 2015 Page [17/23]

BÀI 1.3

Mục tiêu:

- Sử dụng converter và customer converter

Sử dụng RegistrationJSF project của bài thực hành số 7

Chúng ta sẽ sử dụng converter (standard và customer) để kiểm chứng dữ liệu người dùng nhập vào và chuyển kiểu dữ liệu sang managed bean

STEP 1: Thêm standard converter cho textbox Age

Mở file index.xhtml Chúng ta thêm converter check xem dữ liệu nhập vào có phải là số không Nếu ko phải là số thì thông báo lỗi Nếu là số standard converter sẽ chuyển từ string sang int trước khi bind dữ liệu vào registrationBean

<h:inputText id="age" label="Age" size="5" value="${registrationBean.age}"> <f:converter converterId="javax.faces.Integer" />

</h:inputText>

Cách khác là dùng thẻ <f:convertNumber /> của JSF

Thử nhập text vào age, JSF sẽ đưa ra thông báo lỗi

STEP 2: Xây dựng customer converter cho Phone Number

Hiện nay, textbox cho phone (id = “contactNo” ) trên trang index.xhtml nhận dữ liệu đầu vào là String, đầu ra sau khi bind dữ liệu cho bean cũng là String (RegistrationBean có thuộc tính contactNo là String) Chúng ta muốn xử lý thông qua object PhoneNumber, ghi nhận 3 thuộc tính: countryCode, areaCode và number

Vậy cần phải xây dựng 1 customer converter chuyển từ String sang PhoneNumber để bind dữ liệu từ request cho bean và ngược lại, từ PhoneNumber sang String để xây dựng response trả về cho client

Tạo class PhoneNumber.java với 3 thưộc tính nói trên

package converter;

public class PhoneNumber {

private int countryCode ;

private int areaCode ;

private long number ;

public int getCountryCode() {

return countryCode ;

}

public void setCountryCode(int countryCode) {

this countryCode = countryCode;

}

public int getAreaCode() {

return areaCode ;

}

public void setAreaCode(int areaCode) {

this areaCode = areaCode;

}

public long getNumber() {

return number ;

}

public void setNumber(long number) {

this number = number;

}

public String toString(){

return countryCode + "-" + areaCode + "-" + number ;

}

}

Sửa lại code tương ứng trong RegistrationBean cho variable “contactNo”

private PhoneNumber contactNo ;

public PhoneNumber getContactNo() {

return contactNo ;

}

public void setContactNo(PhoneNumber contactNo) {

this contactNo = contactNo;

}

STEP 3: Xây dựng PhoneNumberConverter, implements interface Converter của JSF

IT Research Department @BKAP 2015 Page [19/23]

Interface Converter của JSF có 2 phương thức phải override mỗi khi xây dựng customer converter: getAsObject (convert từ String sang Object) và getAsString (convert từ Object sang String)

PhoneNumber phoneNumber = new PhoneNumber();

boolean conversionError = false ;

StringTokenizer hyphenTokenizer = new StringTokenizer(value, "-" ); int hypherCount = 0;

STEP 4: Config Converver vừa tạo để sử dụng

Customer converter được config trong file faces-config.xml như sau:

<converter>

<description> Converter for phone number </description>

<converter-id> PhoneNumberConverter </converter-id>

<converter-class> converter.PhoneNumberConverter </converter-class>

</converter>

Sử dụng converter trong index.xhtml:

<h:inputText id="contactNo" label="Phone" required="true"

IT Research Department @BKAP 2015 Page [21/23]

PHẦN 2: BÀI TẬP THỰC HÀNH

Tạo trang JSF, hiển thị form như mô tả dưới đây, sử dụng các thẻ h của JSF

IT Research Department @BKAP 2015 Page [23/23]

HẾT