IT Research Department @BKAP 2015 Page [1/17]Lab 09 Introduction to Facelets Mục tiêu - Sử dụng Facelets template để xây dựng các web page - Sử dụng Composite Component trên các trang
Trang 1IT Research Department @BKAP 2015 Page [1/17]
Lab 09 Introduction to Facelets
Mục tiêu
- Sử dụng Facelets template để xây dựng các web page
- Sử dụng Composite Component trên các 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 các trang đều sử chung một style (header, footer, css style) Trong JSF 2.0, chúng ta có thể sử dụng các thẻ của Facelets để dễ dàng tạo các template cho các trang Bài thực hành này cho phép tạo 1 template và áp dụng template
đó cho các trang web của ứng dụng
STEP 1
Tạo mới project Web trong Netbeans -> Framework: chọn Java Server Faces
Tên project: FaceletsExample
STEP 2
Trong bài thực hành này chúng ta có thể sử dụng Netbeans để hỗ trợ tạo template Chuột phải project -> Chọn New Faces Template -> template
Trang 3IT Research Department @BKAP 2015 Page [3/17]
Mở thư mục resources trong thư mục Web Pages, chúng ta sẽ thấy file template.xhtml
và các file style trong thư mục css Đây chính là Web Pages layout của chúng ta
Chúng ta có thể customer template này bằng cách thay đổi file css File template.xhtml
tự động tạo ra bởi Netbeans như sau:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
Trang 4<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="./css/default.css"/>
<h:outputStylesheet name="./css/cssLayout.css"/>
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">Left</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">Bottom</ui:insert>
</div>
</h:body>
Trang 5IT Research Department @BKAP 2015 Page [5/17]
</html>
Như vậy trang web sẽ được chia thành 4 vùng: top, left, bottom và content
Sử dụng thẻ <ui:insert> cho phép chúng ta tuỳ biến các section này trong file JSF
STEP 3
Tạo mới trang JSF sử dụng template nói trên Xoá trang index.xhtml
Chuột phải project -> New Facelets Template Client -> index.xhtml
Trang 6Chúng ta có thể tuỳ biến các section hiển thị trong trang (template.xhtml cung cấp 4 sections: top, left, bottom và content) Với trang index.xhtml chúng ta chọn 3 sections,
bỏ left Tức là riêng left là theo template còn các sections còn lại sẽ bị chỉnh sửa
Chọn <ui:composition> để thêm các thành phần JSF vào trang
Trang index.xhtml như sau:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
template="./resources/template.xhtml">
<ui:define name="top">
Top content
Trang 7IT Research Department @BKAP 2015 Page [7/17]
</ui:define>
<ui:define name="content">
Main Content
</ui:define>
<ui:define name="bottom">
Bottom Content
</ui:define>
</ui:composition>
View trang index.xhtml được kết quả như sau:
Điều chúng ta muốn là tất cả các trang đều sử dụng chung header, footer, và left side bar Từng trang chỉ hiển thị content khác nhau Chúng ta chỉ cần dùng <ui:composition>
và bên trong định nghĩa duy nhất section content (sử dụng <ui:define id=”content”>)
Trang 8Facelets template giúp chúng ta tách biệt cấu trúc content của từng trang ra khỏi các cấu trúc chung
STEP 4
Tuỳ biến file template.xhtml để hiển thị header, footer, menu
Sử dụng file style.css đi kèm project
Code của file template.xhtml như sau:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <h:outputStylesheet name="./css/styles.css"/>
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="header_bg">
<div id="header">
<div id="logo">
<h1><a href="#">Project Management System</a></h1>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">solution for management equip</a></h2>
</div>
Trang 9IT Research Department @BKAP 2015 Page [9/17]
</div>
</div>
<div id="menu_bg">
<div id="menu">
<ul>
<li id="button1"><a href="#" title="Projects Management" style="border-right: 1px solid #ffffff;">Projects</a></li>
<li id="button2"><a href="#" title="Tasks Management" style="border-right: 1px solid #ffffff;">Tasks</a></li>
<li id="button3"><a href="#" title="Documents Management" style="border-right: 1px solid #ffffff;">Documents</a></li>
<li id="button4"><a href="#" title="Articles Management" style="border-right: 1px solid #ffffff;">Articles</a></li>
<li id="button5"><a href="#" title="Events Management" style="border-right: 1px solid #ffffff;">Events</a></li>
</ul>
</div>
</div>
<div id="content">
<ui:insert name="content">Content</ui:insert>
</div>
<div id="footer">
<p>Copyright 2015 <a href="#">XYZ</a> | <a href="#">Class ABC</a> | <a href="#">Bach Khoa Aptech</a></p>
<p>Project <a href="#">Java EE Web Enterprise</a>
</p>
</div>
Trang 10</h:body>
</html>
Chú ý: chỉ sử dụng <ui:insert id=”content”> cho phần content Chúng ta tuỳ biến phần content cho các trang còn lại header, footer, menu sẽ được sử dụng chung cho các trang
STEP 5
Sửa lại file index.xhtml như sau:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui = "http://xmlns.jcp.org/jsf/facelets"
template = "./resources/template.xhtml" >
<ui:define name = "content" >
Main Content
</ui:define>
</ui:composition>
View trang index như sau:
Trang 11IT Research Department @BKAP 2015 Page [11/17]
Như vậy bằng việc sử dụng template, chúng ta có thể dễ dàng tạo web style cho tất cả các trang Tách biệt cấu trúc của từng trang với template Trong các trang JSF chỉ cần định nghĩa lại phần cấu trúc riêng đó (dùng thẻ <ui:define name=”xyz”)
Bài 1.2: Sử dụng Composite Component
Mục tiêu:
- Tạo các thành phần composite
- Tái sử dụng các thành phần đó trong ứng dụng
Nhắc lại:
- Composite component là các thành phần mở rộng của Facelets, còn được biết đến với tên gọi là reusable component
- Trong thực hành, một thành phần composite sẽ chứa một tập hợp các thẻ và các thành phần khác (label, input text ) Có thể chứa các validator, converter hay listener để thực hiện một số chức năng riêng của nó
Thực hành
STEP 1
Trở lại project FaceletsExample, tạo một file xhtml trong thư mục resources/composite
có tên là registerComp.xhtml File này chứa định nghĩa cho thành phần composite: register component của chúng ta
Trang 12Sử dụng composite namespace:
xmlns:composite= "http://java.sun.com/jsf/composite"
Trong file registerComp.xhtml, chúng ta sẽ sử dụng các thẻ của namespace này để định nghĩa mới một component:
<composite:interface>: dùng để khai báo các config cho component ví dụ: tên component
<composite:implementation>: khai báo tất cả các thẻ XHTML, các thành phần có sẵn của JSF Đây chính là nội dụng của component Trong thẻ này, chúng ta có thể truy cập các giá trị thuộc tính khai báo trong <composite:interface> thông qua EL
#{cc.attrs.attributeName}
Chúng ta sẽ tạo ra một form để thực hiện register Code của file registerComp.xhtml như sau:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
Trang 13IT Research Department @BKAP 2015 Page [13/17]
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:composite = "http://java.sun.com/jsf/composite" >
<composite:interface>
<composite:attribute name = "nameLable" />
<composite:attribute name = "nameValue" />
<composite:attribute name = "emailLable" />
<composite:attribute name = "emailValue" />
<composite:attribute name = "registerButtonText" />
<composite:attribute name = "registerButtonAction"
method-signature = "java.lang.String action()" /> </composite:interface>
<composite:implementation>
<h:form>
<h:message for = "textPanel" style = "color:red;" />
<h:panelGrid columns = "2" id = "textPanel" >
#{cc.attrs.nameLable} :
<h:inputText id = "name" value = #{cc.attrs.nameValue} " />
#{cc.attrs.emailLable} :
<h:inputText id = "email" value = #{cc.attrs.emailValue} " />
</h:panelGrid>
<h:commandButton action = #{cc.attrs.registerButtonAction} "
value = #{cc.attrs.registerButtonText} " />
</h:form>
</composite:implementation>
Trang 14</html>
Chúng ta đã định nghĩa thành phần Register: là một form có 2 input text, 1 command button và các label
STEP 2
Chúng ta đã định nghĩa thành phần Register Để sử dụng được thành phần này cần phải khai báo nó trong các file xhtml sử dụng nó
Vì chúng ta đặt file registerComp.xhtml trong thư mục resources/comp Chúng ta sẽ khai báo sử dụng nó như sau:
xmlns:comp= http://java.sun.com/jsf/composite/comp
<comp:registerComp />
Trang index.xhtml sửa lại như sau:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui = "http://xmlns.jcp.org/jsf/facelets"
template = "./resources/template.xhtml"
xmlns:h = "http://xmlns.jcp.org/jsf/html"
xmlns = "http://www.w3.org/1999/xhtml"
xmlns:comp = "http://java.sun.com/jsf/composite/comp" >
<ui:define name = "content" >
<comp:registerComp
nameLable = "Name"
nameValue = #{user.name} "
emailLable = "E-mail"
emailValue = #{user.email} "
Trang 15IT Research Department @BKAP 2015 Page [15/17]
registerButtonText = "Register"
registerButtonAction = #{user.registerAction} "
/>
</ui:define>
</ui:composition>
STEP 3
Tạo Managed Bean có tên UserBean.java trong package bean
Code của UserBean.java như sau:
package bean;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "user")
@SessionScoped
public class UserBean {
public String name ;
public String email ;
public String getName() {
return name ;
}
public void setName(String name) {
this name = name;
}
public String getEmail() {
return email ;
}
public void setEmail(String email) {
this email = email;
}
public String registerAction() {
return "result";
}
}
STEP 4
Trang 16Tạo trang result.xhtml để thực hiện navigation sau khi nhấn vào button Register
Code của trang result.xhtml như sau:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui = "http://xmlns.jcp.org/jsf/facelets"
template = "./resources/template.xhtml"
xmlns:h = "http://xmlns.jcp.org/jsf/html"
xmlns = "http://www.w3.org/1999/xhtml" >
<ui:define name = "content" >
<h1> Composite Components in JSF 2.0 </h1>
Name : #{user.name}
<br />
E-mail : #{user.email}
</ui:define>
</ui:composition>
Build và run project, kết quả như sau:
Trang 17IT Research Department @BKAP 2015 Page [17/17]
PHẦN 2: BÀI TẬP THỰC HÀNH TỰ LÀM
Tự tạo mới web template dùng Facelets và thực hành với một file css khác
HẾT