Bài giảng Lập trình Java 5 - Bài 3: Làm việc với form - Trường Đại học FPT

LẬP TRÌNH JAVA 5
BÀI 3: LÀM VIỆC VỚI FORM
MỤC TIÊU
Hiểu cơ chế buộc dữ liệu
Xây dựng form trong Spring
@ModelAttribute
GIỚI THIỆU DATABINDING?
Databinding là sự kết nối dữ liệu của bean đặt
trong model đến các điều khiển trên form.
Khi thay đổi dữ liệu trong bean thì dữ liệu trên
các điều khiển cũng thay đổi theo.
Ràng buộc dữ liệu có thể là 1 chiều hoặc 2 chiều
Chiều lên: chuyển dữ liệu từ các điều khiển vào các
thuộc tính của bean
Chiều về: hiển thị dữ liệu từ các thuộc tính của bean 
lên các điều khiển của form
Controls Beandatabinding
BUỘC DỮ LIỆU VỚI CÁC THẺ HTML?
Bạn có thể buộc dữ liệu từ các thuộc tính của
bean vào các điều khiển HTML bằng cách sử
dụng biểu thức EL
BUỘC DỮ LIỆU VỚI CÁC THẺ HTML?
Dù chúng ta hoàn toàn có thể buộc dữ liệu từ
bean trong model lên form với EL nhưng gặp
phải một số hạn chế sau:
Phải viết mã trên giao diện, dài dòng, khó quản lý
Đổ dữ liệu vào các List Control trở nên phức tạp và
khó khăn
Combox
Listbox
Radiobuttons
Checkboxes
Kiểm và thông báo lỗi
SPRING FORM
Spring MVC cung cấp thư viện thẻ giúp việc
buộc dữ liệu từ bean vào các điều khiển trở nên
dễ dàng hơn
Sau khi khai báo thư viện thẻ ngay đầu trang JSP, 
chúng ta có thể tạo form và ràng buộc dữ liệu
Tên của bean 
đặt trong modelTên thuộc tính
của bean user
Thẻ trong thư
viên form
ƯU ĐIỂM CỦA FORM SPRING?
Cung cấp cơ chế buộc dữ liệu lên các điều khiển
Form đơn giản, rõ ràng, dễ hiểu
Khi thay đổi dữ liệu trong bean thì dữ liệu trên
các điều khiển cũng thay đổi theo.
Cấp dữ liệu vào các List Control trở nên rất đơn
giản
Kiểm và hiển thị lỗi một cách dễ dàng
TÌNH HUỐNG BUỘC DỮ LIỆU
Người sử dụng yêu cầu student/edit.htm
Phương thức edit() tạo bean và đặt vào model
View chứa form buộc dữ liệu từ bean trong
model lên các điều khiển của form
StudentController
.edit()
View
student.jsp
Model
student
LỚP BEAN
Trường chứa dữ liệu
Các constructor
Các phương thức
getter/setter
LỚP STUDENTCONTROLLER
Khi gọi student/edit.htm thì phương thức
action edit() sẽ chạy. edit() tạo một đối tượng sv
và đặt vào model với tên là student để chuyển
sang view student.jsp
Trong model có
bean student
THIẾT KẾ FORM CÓ RÀNG BUỘC DỮ LIỆU
View student.jsp chứa form buộc các thuộc tính
của bean vào các điều khiển
Bean buộc dữ liệu
lên các điều khiển
Các thuộc tính của bean
BUỘC DỮ LIỆU LÊN FORM
Các thuộc tính của bean student được
buộc với các điều khiển của form.
Như vậy khi muốn thay đổi dữ liệu trên
form bạn chỉ cần thay đổi bean trong
model
BUỘC DỮ LIỆU CHIỀU LÊN
Form sẽ submit dữ liệu đến action “update.htm”. 
Bạn cần bổ sung phương thức action update() 
vào StudentController để xử lý nút Update.
Dữ liệu form được chuyển vào các thuộc tính của
đối số action student.
@ModelAttribute(“student”) sẽ bổ sung một
attribute có tên là student có giá trị là đối số
student vào model. Attribute này sẽ buộc dữ liệu
lên các điều khiển khi quay trở lại form
DEMO
Chạy student/edit.htm và giải thích
+ edit()
+ student.jsp
+ update()
CÁC ĐIỀU KHIỂN FORM CỦA SPRING
Điều khiển Spring Sinh ra điều khiển HTML
 Nhóm radio
 Nhóm checkbox
Đây là các List Control 
cần được cấp dữ liệu
từ Collection, Array 
hoặc Map
LẬP TRÌNH JAVA 5
PHẦN 2
SỬ DỤNG LIST CONTROL
Các điều khiển được
sử dụng để tạo List 
Control
COMBOBOX
Để đạt được điều mong muốn trên thì chúng ta 
cần thay đổi
StudentController: phải cung cấp dữ liệu dạng Array, 
Collection hoặc Map vào model
Student.jsp: phải thay điều khiển và đổ dữ liệu vào
Đổi từ nhập dữ liệu sang 
chọn mục trong ComboBox
ĐỔ DỮ LIỆU VÀO COMBOBOX
ĐỔ DỮ LIỆU VÀO COMBOBOX
Thay đổi StudentController
Bổ sung phương thức getMajors().
@ModelAttribute(“majors”) sẽ đặt kết quả của
phương thức này vào trong Model với tên là majors. 
Dữ liệu này được sử dụng để đổ vào ComboBox
Thay đổi view (student.jsp)
Thay bằng <form:select
path=“major” items=“${majors}”>.
Thuộc tính items chỉ ra dữ liệu (Collection, Map hay 
mảng) đặt trong Model để đổ vào ComboBox
@MODELATTRIBUTE
Trong Spring MVC @ModelAttribute được sử
dụng để bổ sung attribute vào model trong 2 
trường hợp:
@ModelAttribute(name) argument
Sẽ bổ sung attribute có tên là name và có giá trị là giá trị của
đối số phương thức action
Tương đương: model.addAttribute(name, argument)
@ModelAttribute(name) method
Sẽ bổ sung attribute có tên là name và có giá trị là kết quả
của phương thức
Tương đương: model.addAttribute(name, method())
Trong view bạn có thể sử dụng nó như một
attribute bình thường: buộc vào form, sử dụng
EL, đổ vào ListControl
ĐỔ DỮ LIỆU VÀO COMBOBOX
ĐỔ DỮ LIỆU VÀO COMBOBOX
ĐỔ DỮ LIỆU VÀO COMBOBOX
DEMO
Chạy student2/edit.html
+ Thay đổi 
+ Thay đổi getMajors()
ĐỔ DỮ LIỆU VÀO LIST CONTROL
<form:select path=“property” items=“{items}” 
itemValue=“prop1” itemLabel=“prop2”>
items: chỉ ra tập dữ liệu đổ vào ComboBox
itemValue và itemLabel chỉ được sử dụng khi tập
items là Collection
 itemValue: chỉ ra tên thuộc tính để làm giá trị
 itemLabel: chỉ ra tên thuộc tính để làm nhãn (nhìn thấy)
List Control khác có cùng cú pháp với select
<form:radiobuttons path=“property” items=“{items}” 
itemValue=“prop1” itemLabel=“prop2”>
<form:checkboxes path=“property” items=“{items}” 
itemValue=“prop1” itemLabel=“prop2”>
Đổ dữ liệu vào các List Control là như nhau
DEMO
Thay đổi bằng
 và 
CÁC THUỘC TÍNH THƯỜNG DÙNG
Thẻ Spring có một số thuộc tính
thường dùng sau:
cssClass: thay cho thuộc tính class trong HTML
disabled: thay cho thuộc tính disabled trong HTML
readonly: thay cho thuộc tính readonly trong HTML
cssErrorClass: cho ra class định dạng thông báo lỗi
Ví dụ:


TỔNG KẾT NỘI DUNG BÀI HỌC
Tìm hiểu cơ kết buộc dữ liệu 2 chiều
Sử dụng thuộc tính modelAttribute để
kết nối attribute trong model với form
Sử dụng path=“property” để buộc
thuộc tính của bean vào các điều khiển
form
Đổ dữ liệu vào List Control