Thực hành Java Web Lab 9

Fundamentals of Java Enterprise Components Lab 09 Introduction to Facelets Mục tiêu - Sử dụng Facelets template để xây dựng web page - Sử dụng Composite Component trang JSF Phần I Bài tập step by step Bài 1.1 Khi xây dựng ứng dụng web, hầu hết trang sử chung style (header, footer, css style) Trong JSF 2.0, sử dụng thẻ Facelets để dễ dàng tạo template cho trang Bài thực hành cho phép tạo template áp dụng template cho trang web ứng dụng STEP Tạo project Web Netbeans -> Framework: chọn Java Server Faces Tên project: FaceletsExample STEP Trong thực hành sử dụng Netbeans để hỗ trợ tạo template Chuột phải project -> Chọn New Faces Template -> template IT Research Department @BKAP 2015 Page [1/17] Fundamentals of Java Enterprise Components IT Research Department @BKAP 2015 Page [2/17] Fundamentals of Java Enterprise Components Mở thư mục resources thư mục Web Pages, thấy file template.xhtml file style thư mục css Đây Web Pages layout Chúng ta customer template cách thay đổi file css File template.xhtml tự động tạo Netbeans sau: IT Research Department @BKAP 2015 Page [3/17] Fundamentals of Java Enterprise Components Facelets Template Top Left Content Bottom IT Research Department @BKAP 2015 Page [4/17] Fundamentals of Java Enterprise Components Như trang web chia thành vùng: top, left, bottom content Sử dụng thẻ cho phép tuỳ biến section file JSF STEP Tạo trang JSF sử dụng template nói Xố trang index.xhtml Chuột phải project -> New Facelets Template Client -> index.xhtml IT Research Department @BKAP 2015 Page [5/17] Fundamentals of Java Enterprise Components Chúng ta tuỳ biến section hiển thị trang (template.xhtml cung cấp sections: top, left, bottom content) Với trang index.xhtml chọn sections, bỏ left Tức riêng left theo template sections lại bị chỉnh sửa Chọn để thêm thành phần JSF vào trang Trang index.xhtml sau: Top content IT Research Department @BKAP 2015 Page [6/17] Fundamentals of Java Enterprise Components Main Content Bottom Content View trang index.xhtml kết sau: Điều muốn tất trang sử dụng chung header, footer, left side bar Từng trang hiển thị content khác Chúng ta cần dùng bên định nghĩa section content (sử dụng ) IT Research Department @BKAP 2015 Page [7/17] Fundamentals of Java Enterprise Components Facelets template giúp tách biệt cấu trúc content trang khỏi cấu trúc chung STEP Tuỳ biến file template.xhtml để hiển thị header, footer, menu Sử dụng file style.css kèm project Code file template.xhtml sau: Facelets Template Project Management System solution for management equip IT Research Department @BKAP 2015 Page [8/17] Fundamentals of Java Enterprise Components

• Projects
• Tasks
• Documents
• Articles
• Events

Content

Copyright 2015 XYZ | Class ABC | Bach Khoa Aptech

Project   Java EE Web Enterprise

IT Research Department @BKAP 2015 Page [9/17] Fundamentals of Java Enterprise Components Chú ý: sử dụng cho phần content Chúng ta tuỳ biến phần content cho trang lại header, footer, menu sử dụng chung cho trang STEP Sửa lại file index.xhtml sau: Main Content View trang index sau: IT Research Department @BKAP 2015 Page [10/17] Fundamentals of Java Enterprise Components Như việc sử dụng template, dễ dàng tạo web style cho tất trang Tách biệt cấu trúc trang với template Trong trang JSF cần định nghĩa lại phần cấu trúc riêng (dùng thẻ