Bài giảng Lập trình Java 5 - Bài 7: Tổ chức giao diện

LẬP TRÌNH JAVA 5
BÀI 7: TỔ CHỨC GIAO DIỆN
MỤC TIÊU
Phân biệt layout và template
Tổ chức website sử dụng layout
Module hóa giao diện
Đa ngôn ngữ
LAYOUT LÀ GÌ?
 Layout có thể hiểu đơn giản là bố cục của trang web 
(cách sắp xếp các thành phần, trình bày nội dung 
trên trang web).
HEADER
MENU
THANH ĐIỀU 
KHIỂN
VÙNG NỘI DUNG
FOOTER
TEMPLATE LÀ GÌ
Template là bộ khung giao diện mẫu được dùng
chung cho một số trang web trong website
DEMO
Chạy đề mô một layout
TỔ CHỨC GIAO DIỆN
Trong phạm vi môn học này không hướng dẫn
cách thiết kế layout mà chỉ sử dụng để làm
template
Với Spring MVC tổ chức template nằm ở 
ViewResolver
Qui luật hoạt động của ViewResolver được mô tả
như sau
ViewResolverviewname prefix + viewname + suffix
VIEWRESOLVER
Như vậy khi action return “home/index” thì trang
/WEB-INF/views/home/index.jsp sẽ được gọi
để thực hiện sinh giao diện trả về client.
home/index
/WEB-INF/views/home/index.jsp
VIEWRESOLVER
Như vậy mọi return từ phương thức action thì
layout.jsp luôn luôn chạy và nhận một tham số
có tên là view có giá trị là trang jsp.
home/index
/WEB-INF/views/layout.jsp?view=home/index.jsp
TỔ CHỨC TRANG LAYOUT.JSP
Giả sử trang layout.jsp có dòng mã <jsp:include
page=“${param.view}”/> đặt tại nơi cần hiển
thị nội dung của view thì view này sẽ chạy và kết
xuất kết quả tại nơi đặt mã.
Tóm lại để tổ chức template trong Spring MVC 
bạn cần 2 bước
Cấu hình ViewResolver chuyển về trang layout
Trang layout.jsp chứa thẻ
XEM XÉT TÌNH HUỐNG
TEMPLATE
VÙNG NÀY DÀNH CHO NỘI DUNG VIEW
TỔ CHỨC GIAO DIỆN
Để giải quyết tình huống này
chúng ta cần có
Trang layout.jsp là template có
chứa 
Trang index.jsp là trang thành
viên cung cấp nội dung trang
chủ
Trang about.jsp là trang thành
viên cung cấp nội dung giới
thiệu
layout.jsp
Index.jsp, 
about.jsp
MÃ NGUỒN CỦA LAYOUT.JSP
/WEB-INF/views/layout.jsp
Tham số view là trang jsp. Trang JSP 
này sẽ được gọi thực hiện và kết
xuất kết quả tại vị trí đặt thẻ
MÃ NGUỒN CỦA INDEX.JSP VÀ ABOUT.JSP
/WEB-INF/views/home/index.jsp /WEB-INF/views/home/about.jsp
MÃ HOMECONTROLLER
Những tên view này được
DispatcherServlet chuyển qua 
ViewResolver để xác định View cần
thực hiện
PHÂN TÍCH HOẠT ĐỘNG
ViewResolverhome/index /WEB-INF/views/layout.jsp?view=home/index.jsp
/WEB-INF/views/home/index.jsp
ViewResolverhome/about /WEB-INF/views/layout.jsp?view=home/about.jsp
/WEB-INF/views/home/about.jsp
DEMOGiải thích
+ Cấu hình
+ HomeController
+ Layout.jsp
+ Index.jsp, About.jsp
TỔ CHỨC NHIỀU LAYOUT
Trong một website đôi khi cần nhiều hơn một
layout, mỗi layout áp dụng cho một nhóm trang
nào đó.
Để tổ chức nhiều layout chúng ta cần một
layout-dispatcher.jsp và nhiều layout thành viên. 
Trang layout-dispatcher.jsp này đảm nhận việc
điều phối layout nào được chọn dựa vào tên
view trả về từ Controller
ViewResolver layout-dispatcher
layout1
layout2
layout3
DEMO
Chạy demo nhiều layout
DEMO
home/index.htm
admin/student.htm
Giải thích
TỔ CHỨC NHIỀU LAYOUT
Với đoạn mã này
chúng ta hiểu rằng
nếu return từ
controller bắt đầu
bởi admin/ thì sẽ
chọn admin-
layout.jsp ngược lại
chọn user-layout.jsp
layout-dispatcher.jsp
ViewResolver
PHÂN TÍCH HOẠT ĐỘNG ĐIỀU PHỐI LAYOUT
ViewResolver
home/index
dispatcher-layout.jsp?view=home/index.jsp
home/index.jsp
user-layout.jsp
ViewResolver
Admin/home/index
dispatcher-layout.jsp?view=admin/home/index.jsp
home/index.jsp
admin-layout.jsp
DEMO
Giải thích cơ chế hoạt động
+ Cấu hình nhiều layout
+ AdminController
+ admin-layout.jsp
+ user-layout.jsp
LẬP TRÌNH JAVA 5
PHẦN 2
MODULE HÓA GIAO DIỆN
Trong layout thường có nhiều module giao diện. 
Mỗi module có vai trò khác nhau được xử lý khác
nhau.
Để dễ quản lý, bảo trì chúng ta cần tách độc lập
các module sau đó lắp ra trở lại.
Tạo trang jsp chứa phần mã module muốn tách
Sử dụng để lắp module trở lại
Sau khi tách
Mã nguồn layout trở nên đơn giản
Mã xử lý bộ phận được phân theo module
MODULE HÓA GIAO DIỆN
main-menu.jsp
cart-info.jsp
catgory.jsp
top-menu.jsp
Sử dụng 
để kết xuất module giao diện vào đúng vị trí thích hợp
MODULE HÓA GIAO DIỆN
DEMO
Hiện thực hóa slide trước
WEBSITE ĐA NGÔN NGỮ
Website đa ngôn ngữ là website cho phép hiển
thị giao diện nhiều dạng ngôn ngữ khác nhau
DEMO
Chạy đề mô với cấu hình đa ngôn ngữ
TỔ CHỨC GIAO DIỆN ĐA NGÔN NGỮ
Nội dung trên giao diện cần được tổ chức thành
các file tài nguyên (properties) và dịch sang các
ngôn ngữ
Giao diện tham chiếu đến các nội dung định
nghĩa trong các file tài nguyên
LocaleResolver hỗ trợ lựa chọn tài nguyên theo
ngôn ngữ hiện tại
Giao diện
LocaleResolver Tài nguyên
GIAO DIỆN ĐA NGÔN NGỮ
Để xây dựng website đa ngôn ngữ trong Spring 
MVC bạn cần thực hiện 4 bước
Bước 1: Tổ chức các file tài nguyên
Bước 2: Hiển thị nội dung đa ngôn ngữ lên giao
diện
Bước 3: Thực hiện cấu hình đa ngôn ngữ
Bước 4: lập trình điều khiển chọn ngôn ngữ
1. XÂY DỰNG CÁC FILE TÀI NGUYÊN
Tạo thư mục chứa các file tài nguyên
Tạo các file tài nguyên
global chứa các nội dung dùng chung trong layout
home.index và home.about dùng riêng cho từng view 
index.jsp và about.jsp của HomeController
Các file tiếng việt cần phải có mã ngôn ngữ là _vi
Chú ý: các file tài nguyên này cần để chế độ UTF-8 để
có thể gõ tiếng việt
1. XÂY DỰNG CÁC FILE TÀI NGUYÊN
File tài nguyên cùng tên, khác mã ngôn ngữ
Nội dung cùng key (code), khác giá trị
global_vi.propertiesglobal.properties
home.index_vi.propertieshome.index.properties
home.about_vi.propertieshome.about.properties
2. HIỂN THỊ NỘI DUNG ĐA NGÔN NGỮ
Để chọn đúng nội dung trong file tài nguyên và
hiển thị lên giao diện phải cần 2 bước
Khai báo thư viện
Nhúng nội dung tương ứng với code đã khai báo
about.jsp
3. CẤU HÌNH SPRING
Cần khai báo các thông tin cấu hình sau đây
Sử dụng bean sau để khai báo các file tài nguyên
ReloadableResourceBundleMessageSource
Sử dụng bean sau để ghi nhớ ngôn ngữ bằng cookie. 
Sử dụng cookie để duy trì ngôn ngữ để lần truy cập
sau đó trên máy đang sử dụng thì ngôn ngữ đã được
chọn trước đó vẫn được duy trì.
CookieLocaleResolver
Sử dụng interceptor sau để nhận biết sự thay đổi
ngôn ngữ
LocaleChangeInterceptor
3. CẤU HÌNH SPRING
Khai báo tên các file tài
nguyên (không gồm phần mở
rộng của file)
Ngôn ngữ mặc định và thời
gian (giây) duy trì ngôn ngữ
đã chọn trên cookie
Tên tham số sử dụng để chọn
ngôn ngữ
4. LẬP TRÌNH CHỌN NGÔN NGỮ
 Phương pháp đơn giản nhất là sử dụng ajax để gọi đến 1 
action bất kỳ miễn là có chứa tham số language.
 Ở đây sử dụng jquery (cần thư viện trong layout) . Phương 
thức $.get(url) gọi home/index bằng ajax. Sau khi lời gọi
thành công phương thức location.reload() để tải lại trang
web hiện tại với tài nguyên của ngôn ngữ được chọn
@data-lang chứa mã
ngôn ngữ
Lấy mã ngôn ngữ của
liên kết bị click
DEMOGiải thích tổ chức đa ngôn ngữ
+ File tài nguyên
+ Hiển thị
+ Cấu hình
+ Lựa chọn ngôn ngữ
TỔNG KẾT NỘI DUNG BÀI HỌC
Tìm hiểu layout và template
Tổ chức website một layout
Tổ chức website nhiều layout thông qua layout-
dispatcher
Tổ chức website đa ngôn ngữ
Tài nguyên
Hiển thị
Cấu hình
Lựa chọn ngôn ngữ