Thực hành Java Web Lab 7

Fundamentals of Java Enterprise Components Lab 07 Introduction to Java Server Faces Mục tiêu - Tạo Web project dùng JSF framework - Sử dụng JSF Bean Management - Sử dụng JSF Navigation Phần I Bài tập step by step Bài 1.1 - Mục tiêu học viên hiểu cấu trúc JSF Web Application - Biết cách config JSF - Sử dụng JSF Bean Management STEP Tạo project Web Netbeans -> Framework: chọn Java Server Faces IT Research Department @BKAP 2015 Page [1/16] Fundamentals of Java Enterprise Components IT Research Department @BKAP 2015 Page [2/16] Fundamentals of Java Enterprise Components Sau tạo ứng dụng, mở file web.xml, config sau tự động thêm vào Netbeans cho ứng dụng sử dụng JSF: IT Research Department @BKAP 2015 Page [3/16] Fundamentals of Java Enterprise Components javax.faces.PROJECT_STAGE Development Faces Servlet javax.faces.webapp.FacesServlet 1 Faces Servlet /faces/* faces/index.xhtml STEP Tạo package business chứa RegistrationBean IT Research Department @BKAP 2015 Page [4/16] Fundamentals of Java Enterprise Components Chọn Scope: session -> Bean dùng phạm vi HTTP session Tạo private variable cho RegistrationBean: private private private private String name; String prefix; String contactNo; int age; Right Click on RegistrationBean class -> Insert Code -> Generate getters and setters -> Chọn tất thuộc tính class IT Research Department @BKAP 2015 Page [5/16] Fundamentals of Java Enterprise Components Trong JSF, managed bean object (có đầy đủ getter/setter cho thuộc tính) khai báo “faces-config.xml” sử dụng thành phần JSF Ví dụ lấy liệu thuộc tính “name” object RegistrationBean lưu session (trong trường hợp chọn scope bean session) để gán cho JSF input field (vd textbox) Với JSF 2.x trở đi, config file faces-config.xml thay sử dụng annotation Ví dụ: registrationBean bean.RegistrationBean session Tương đương với cách sử dụng annotation sau: ManagedBean(name="registrationBean") IT Research Department @BKAP 2015 Page [6/16] Fundamentals of Java Enterprise Components @SessionScoped Code file RegistrationBean.java: package bean; import java.io.Serializable; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean(name="registrationBean") @SessionScoped public class RegistrationBean implements Serializable { private private private private String name; String prefix; String contactNo; int age; /** * Creates a new instance of RegistrationBean */ public RegistrationBean() { } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPrefix() { return prefix; } public void setPrefix(String prefix) { this.prefix = prefix; } public String getContactNo() { return contactNo; } public void setContactNo(String contactNo) { this.contactNo = contactNo; } public int getAge() { return age; } public void setAge(int age) { IT Research Department @BKAP 2015 Page [7/16] Fundamentals of Java Enterprise Components this.age = age; } } STEP Chỉnh sửa file index.xhtml, thiết kế form nhập liệu cho việc registration Sử dụng thẻ JSF HTML (prefix h:) Code file index.xhtml sau: Registration Form IT Research Department @BKAP 2015 Page [8/16] Fundamentals of Java Enterprise Components

Chúng ta sử dụng ${} (Expression language) để lấy giá trị bean Ở sử dụng tên bean khai báo STEP để lấy giá trị thuộc tính bean vd: ${registrationBean.name} Chú ý, khai báo button Register, chọn action="confirm” tên trang confirm.xhtml mà muốn redirect tới ấn Register JSF runtime tìm file có tên confirm JSF Runtime giả sử file confirm (file response) có extension với file index (file request), tìm trang confirm.xhtml thư mục với index.xhtml (vì ko khai báo đường dẫn nên mặc định thư mục) STEP IT Research Department @BKAP 2015 Page [9/16] Fundamentals of Java Enterprise Components Tạo trang confirm.xhtml hiển thị lại thông tin user nhập form trước Code sau: Confirmation

Chạy project, kết sau: IT Research Department @BKAP 2015 Page [10/16] Fundamentals of Java Enterprise Components BÀI 1.2 Trong trước sử dụng: để forward tới trang confirm.xhtml Đây cách thực navigation JSF Tuy nhiên có nhiều trang forward tới, sử dụng điều kiện khác Vậy cần đến Navigation Rules để xử lý luồng trang STEP Tạo project sử dụng JSF -> NavigationRules Giống Step 1.1 Tên project NavigationRules STEP Tạo thêm button file index.xhtml để chuyển tới trang payment.xhtml tạo sau Code file index.xhtml sau: IT Research Department @BKAP 2015 Page [11/16] Fundamentals of Java Enterprise Components Facelet Title STEP Tạo Managed Bean tên PaymentController Code sau: package bean; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean(name = "paymentController") @SessionScoped public class PaymentController { public PaymentController() { } public boolean registerCompleted = true; public int orderQty = 99; public int getOrderQty() { return orderQty; } public void setOrderQty(int orderQty) { this.orderQty = orderQty; } public boolean isRegisterCompleted() { return registerCompleted; IT Research Department @BKAP 2015 Page [12/16] Fundamentals of Java Enterprise Components } public void setRegisterCompleted(boolean registerCompleted) { this.registerCompleted = registerCompleted; } } STEP Tạo file payment.xhtml, ordermore.xhtml, register.xhtml Code file sau: Payment.xhtml This is payment.xhtml ordermore.xhtml This is ordermore.xhtml IT Research Department @BKAP 2015 Page [13/16] Fundamentals of Java Enterprise Components register.xhtml This is resgister.xhtml STEP Tạo navigation rules file faces-config.xml Tạo file faces-config.xml chưa có sẵn Chuột phải project -> New JSF Configuration -> faces-config.xml Mở file faces-config.xml Thêm navigation rules sau: index.xhtml payment IT Research Department @BKAP 2015 Page [14/16] Fundamentals of Java Enterprise Components #{paymentController.orderQty < 100} ordermore.xhtml payment #{paymentController.registerCompleted} payment.xhtml payment register.xhtml Đoạn config hiểu sau: if (from-view-id == "index.xhtml"){ if(from-outcome == "payment"){ if(paymentController.orderQty < 100){ return "ordermore"; }else if(paymentController.registerCompleted){ return "payment"; }else{ return "register"; } } } Xuất phát từ trang index.html, thuộc tính orderQty paymentController bean < 100 chuyển đến trang ordermore.xhtml Nếu điều kiện không thoả mãn, chuyển đến trang payment.xhtml Ở trang payment.xhtml, registerCompleted = true hiển thị trang payment.xhtml, false chuyển đến trang register.xhtml Bài cho phép học viên hiểu cách sử dụng navigation rules JSF, cách config file faces-config.xml IT Research Department @BKAP 2015 Page [15/16] Fundamentals of Java Enterprise Components PHẦN 2: BÀI TẬP THỰC HÀNH Thực hành với Navigation Rules JSF: Tạo trang nhập thông tin Car (addCar.xhtml): Car Name, Car ID, Color, Model, Registration Number Sau click submit button forward tới trang carDetail.xhtml Làm theo hai cách: dùng ManageBean để điều hướng trang dùng faces-config.xml HẾT IT Research Department @BKAP 2015 Page [16/16] ... Components @SessionScoped Code file RegistrationBean .java: package bean; import java. io.Serializable; import javax .faces. bean.ManagedBean; import javax .faces. bean.SessionScoped; @ManagedBean(name="registrationBean")... javax .faces. webapp.FacesServlet 1 Faces Servlet /faces/ *... Fundamentals of Java Enterprise Components javax .faces. PROJECT_STAGE Development Faces Servlet