Giáo trình Lập trình Java - Bài 3; Làm việc với Form

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 Biết cách sử dụng @ModelAttribute Khai thác một số thuộc tính khác của các điều khiển Spring