Thực hành Java Web Lab 8

Fundamentals of Java Enterprise Components Lab 08 Java Server Faces as web page Mục tiêu - Sử dụng HTML JSF tag lib để xây dựng web page - Sử dụng Validators Listeners để thêm chức phụ vào web page - Customer Converter Phần I Bài tập step by step Bài 1.1 Trong lab 07, thử tạo ứng dụng web sử dụng JSF hiển thị Registration Form Sau hiển thị thơng tin user nhập Trong phần thực hành sử dụng thẻ HTML JSF tag lib để tạo thành phần trang web (vd: , ) Để biết rõ thẻ này, học viên đọc thêm tài liệu đính kèm thực hành (slides overview of JSF-XHTML) Trong phần thực hành tiếp tục sử dụng thẻ JSF-XHTML để tạo trang web sử dụng thêm JSF Validator, tạo trang login, sau verify user-pass người dùng nhập vào STEP Tạo project Web Netbeans -> Framework: chọn Java Server Faces IT Research Department @BKAP 2015 Page [1/23] Fundamentals of Java Enterprise Components IT Research Department @BKAP 2015 Page[2/23] Fundamentals of Java Enterprise Components IT Research Department @BKAP 2015 Page [3/23] Fundamentals of Java Enterprise Components STEP Tạo package tên bean, tạo managed bean tên UserBean.java Chọn Scope: session -> Bean dùng phạm vi HTTP session Tạo 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 thuộc tính class Tạo method login() để validate thông tin user Trong làm đơn giản verify user=tester, password=tester Nhưng mở rộng cách lấy user / password từ form nhập verify với CSDL Code file UserBean.java sau: package bean; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean(name="userBean") @SessionScoped public class UserBean { private String name; private String password; /** * Creates a new instance of UserBean */ public UserBean() { } public String getName() { return name; } IT Research Department @BKAP 2015 Page[4/23] Fundamentals of Java Enterprise Components 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") && password.equalsIgnoreCase("tester")) { return "success"; } else { return "failed"; } } } STEP Chỉnh sửa file index.xhtml, thiết kế form cho phép người dùng nhập username password Code file index.xhtml sau: Login IT Research Department @BKAP 2015 Page [5/23] Fundamentals of Java Enterprise Components Giải thích chi tiết thẻ XHTML sử dụng index.xhtml bảng sau: Thẻ IT Research Department Ý nghĩa Chỉ sử dụng thành phần JSF Xây dựng form Định nghĩa label Định nghĩa text box sử dụng thuộc tính name bean Che dấu text nhập, sử dụng thuộc tính @BKAP 2015 Page[6/23] Fundamentals of Java Enterprise Components password bean Định nghĩa button, hiển thị text Login, ấn button thực lệnh method login() bean STEP Tạo trang failedLogin.xhtml hiển thị Login failed chứa link quay lại trang index.xhtml để login lại Code sau: Login failed Login Failed. Tạo trang successLogin.xhtml để hiển thị message login successful Code sau: IT Research Department @BKAP 2015 Page [7/23] Fundamentals of Java Enterprise Components Login Success Welcome! Login has been successful. STEP 5: Tạo LoginValidator.java package validator; import import import import import javax.faces.application.FacesMessage; javax.faces.component.UIComponent; javax.faces.context.FacesContext; javax.faces.validator.Validator; javax.faces.validator.ValidatorException; public class LoginValidator implements Validator { @Override 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"); message.setSeverity(FacesMessage.SEVERITY_ERROR); throw new ValidatorException(message); } } } IT Research Department @BKAP 2015 Page[8/23] Fundamentals of Java Enterprise Components Override method validate interface Validator Phương thức gọi với khai báo sau trang index.html Thêm config sau vào file faces-config.xml cho validator: validator.LoginValidator validator.LoginValidator validator.LoginValidator STEP 6: Tạo navigation rules file faces-config.xml LoginView index.xhtml success successLogin.xhtml LoginView index.xhtml failed failedLogin.xhtml Chạy chương trình, kết sau: IT Research Department @BKAP 2015 Page [9/23] Fundamentals of Java Enterprise Components Nếu nhập sai tên username, validator thực trả message hiển thị trang index.xhtml Bài 1.2: Action Listener - Trong thực hành phân biệt: action action listeners Trong JSF, “Action Events” kích hoạt click vào button link component (sử dụng thẻ ) Actions vs Action listeners - “action” sử dụng để thực chức (functionalities) logic nghiệp vụ (business logic) thực navigation tới trang khác IT Research Department @BKAP 2015 Page[10/23] Fundamentals of Java Enterprise Components - “action listeners” sử dụng để thực logic liên quan đến thành phần giao diện (UI component) để gọi hành động cho thành phần Trường hợp dùng nhiều action listener để lấy giá trị thuộc tính gắn liền với component (vd sử dụng thẻ ) Sử dụng “action” làm với tập trước, để forward tới trang khác (thực navigation task) Trong tập sử dụng “action listener” Có hai cách để implement action listener Cách 1: sử dụng trực tiếp method xây dựng managed bean Trong trang JSP, định nghĩa button sau: Method printIt() xây dựng class ExampleBean.java cần phải có parameter ActionEvent: import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.event.ActionEvent; @ManagedBean(name="exampleBean") @SessionScoped public class ExampleBean{ public String buttonId; public void printIt(ActionEvent event){ //Get submit button id buttonId = event.getComponent().getClientId(); } public String outcome(){ return "result"; } } IT Research Department @BKAP 2015 Page [11/23] Fundamentals of Java Enterprise Components Cách 2: Trong hay sử dụng thẻ core , rõ action listener class (phải implement interface ActionListener) override phương thức processAction() Trên trang JSF: Implement ExampleActionListener: import javax.faces.event.AbortProcessingException; import javax.faces.event.ActionEvent; import javax.faces.event.ActionListener; public class ExampleActionListener implements ActionListener { @Override public void processAction(ActionEvent event) throws AbortProcessingException { System.out.println("Any use case here?"); } } Áp dụng vào thực hành Chúng ta áp dụng Action Listener để lấy giá trị attribute gắn với UI (User Interface) component STEP Tạo project JSF, tên ActionListenerExample STEP Xây dựng UserBean tên “user”, scope session IT Research Department @BKAP 2015 Page[12/23] Fundamentals of Java Enterprise Components Code UserBean.java sau: package bean; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.event.ActionEvent; @ManagedBean(name = "user") @SessionScoped public class UserBean { private String nickname; //action listener event public void attributeListener(ActionEvent event) { nickname = (String) event.getComponent().getAttributes().get("username"); } public String outcome() { return "result"; } IT Research Department @BKAP 2015 Page [13/23] Fundamentals of Java Enterprise Components public String getNickname() { return nickname; } public void setNickname(String nickname) { this.nickname = nickname; } } Trong sử dụng cách để implement action listener Phương thức attributeListener gán cho thuộc tính actionListener command button trang JSF Trong phương thức này, lấy giá trị thuộc tính “username” UI component STEP Sửa lại trang index.xhtml sau: JSF action listener example IT Research Department @BKAP 2015 Page[14/23] Fundamentals of Java Enterprise Components Chú ý, sử dụng thẻ để gán giá trị cho thuộc tính component STEP Tạo trang result.xhtml để hiển thị kết sau lấy giá trị thuộc tính “username” từ component button JSF action listener example #{user.nickname} Vì “action” button gọi đến method “outcome” bean, method trả “result” để thực navigation tới trang result.xhtml Chạy project, kết sau: IT Research Department @BKAP 2015 Page [15/23] Fundamentals of Java Enterprise Components IT Research Department @BKAP 2015 Page[16/23] Fundamentals of Java Enterprise Components BÀI 1.3 Mục tiêu: - Sử dụng converter customer converter Sử dụng RegistrationJSF project thực hành số Chúng ta sử dụng converter (standard customer) để kiểm chứng liệu người dùng nhập vào chuyển kiểu 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 liệu nhập vào có phải số khơng Nếu ko phải số thông báo lỗi Nếu số standard converter chuyển từ string sang int trước bind liệu vào registrationBean Cách khác dùng thẻ JSF Thử nhập text vào age, JSF đưa 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” ) trang index.xhtml nhận liệu đầu vào String, đầu sau bind liệu cho bean String (RegistrationBean có thuộc tính contactNo String) Chúng ta muốn xử lý thông qua object PhoneNumber, ghi nhận thuộc tính: countryCode, areaCode number Vậy cần phải xây dựng customer converter chuyển từ String sang PhoneNumber để bind liệu từ request cho bean ngược lại, từ PhoneNumber sang String để xây dựng response trả cho client Tạo class PhoneNumber.java với thưộc tính nói package converter; IT Research Department @BKAP 2015 Page [17/23] Fundamentals of Java Enterprise Components 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 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 JSF IT Research Department @BKAP 2015 Page[18/23] Fundamentals of Java Enterprise Components Interface Converter JSF có phương thức phải override xây dựng customer converter: getAsObject (convert từ String sang Object) getAsString (convert từ Object sang String) package converter; import import import import import java.util.StringTokenizer; javax.faces.component.UIComponent; javax.faces.context.FacesContext; javax.faces.convert.Converter; javax.faces.convert.ConverterException; /** * * @author ThanDieu */ public class PhoneNumberConverter implements Converter{ @Override public Object getAsObject(FacesContext context, UIComponent component, String value) { if (value == null || value.length() == 0){ return value; } PhoneNumber phoneNumber = new PhoneNumber(); boolean conversionError = false; StringTokenizer hyphenTokenizer = new StringTokenizer(value, "-"); int hypherCount = 0; while (hyphenTokenizer.hasMoreTokens()){ String token = hyphenTokenizer.nextToken(); try{ if (hypherCount == 0){ phoneNumber.setCountryCode(Integer.parseInt(token)); } if (hypherCount == 1){ phoneNumber.setAreaCode(Integer.parseInt(token)); } if (hypherCount == 2){ phoneNumber.setNumber(Long.parseLong(token)); } } catch (Exception ex){ ex.printStackTrace(); conversionError = true; } hypherCount ++; } if (conversionError || (hypherCount != 3)){ throw new ConverterException(); } return phoneNumber; } IT Research Department @BKAP 2015 Page [19/23] Fundamentals of Java Enterprise Components @Override public String getAsString(FacesContext context, UIComponent component, Object value) { return value.toString(); } } STEP 4: Config Converver vừa tạo để sử dụng Customer converter config file faces-config.xml sau: Converter for phone number PhoneNumberConverter converter.PhoneNumberConverter Sử dụng converter index.xhtml: Chạy chương trình check phone number IT Research Department @BKAP 2015 Page[20/23] Fundamentals of Java Enterprise Components IT Research Department @BKAP 2015 Page [21/23] Fundamentals of Java Enterprise Components PHẦN 2: BÀI TẬP THỰC HÀNH Tạo trang JSF, hiển thị form mô tả đây, sử dụng thẻ h JSF IT Research Department @BKAP 2015 Page[22/23] Fundamentals of Java Enterprise Components HẾT IT Research Department @BKAP 2015 Page [23/23] ... LoginValidator .java package validator; import import import import import javax.faces.application.FacesMessage; javax.faces.component.UIComponent; javax.faces.context.FacesContext; javax.faces.validator.Validator;... Page[12/23] Fundamentals of Java Enterprise Components Code UserBean .java sau: package bean; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.event.ActionEvent;... import import import import import java. util.StringTokenizer; javax.faces.component.UIComponent; javax.faces.context.FacesContext; javax.faces.convert.Converter; javax.faces.convert.ConverterException;