Giáo trình Lập trình Java - 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ữ