Bài giảng Lập trình Java 5 - Bài 7: Tổ chức giao diện - Trường Đại học FPT
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).
Trang 1
Trang 2
Trang 3
Trang 4
Trang 5
Trang 6
Trang 7
Trang 8
Trang 9
Trang 10
Tải về để xem bản đầy đủ
Bạn đang xem 10 trang mẫu của tài liệu "Bài giảng Lập trình Java 5 - Bài 7: Tổ chức giao diện - Trường Đại học FPT", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
Tóm tắt nội dung tài liệu: Bài giảng Lập trình Java 5 - Bài 7: Tổ chức giao diện - Trường Đại học FPT
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ằn
File đính kèm:
- bai_giang_lap_trinh_java_5_bai_7_to_chuc_giao_dien_truong_da.pdf