Jsf-templates-tag
提供:Dev Guides
JSF-テンプレートタグ
Webアプリケーションのテンプレートは、共通のインターフェースレイアウトとスタイルを定義します。 たとえば、同じバナー、共通ヘッダーのロゴ、フッターの著作権情報。 JSFは、標準のWebインターフェースレイアウトを提供するために、次のfaceletタグを提供します。
S.No | Tag & Description |
---|---|
1 |
ui:insert テンプレートファイルで使用されます。 テンプレートに配置されるコンテンツを定義します。 ui:defineタグはその内容を置き換えることができます。 |
2 |
ui:define テンプレートに挿入されるコンテンツを定義します。 |
3 |
ui:include 1つのxhtmlページのコンテンツを別のxhtmlページに含めます。 |
4 |
ui:composition
|
テンプレートを作成する
Webアプリケーション用のテンプレートの作成は、段階的な手順です。 以下は、サンプルテンプレートを作成する手順です。
ステップ1:ヘッダーファイルの作成:header.xhtml
*ui:composition* タグを使用して、ヘッダーセクションのデフォルトコンテンツを定義します。
<ui:composition>
<h1>Default Header</h1>
</ui:composition>
*ui:composition* タグを使用して、フッターセクションのデフォルトコンテンツを定義します。
<ui:composition>
<h1>Default Footer</h1>
</ui:composition>
ステップ3:コンテンツファイルの作成:contents.xhtml
*ui:composition* タグを使用して、Contentセクションのデフォルトコンテンツを定義します。
<ui:composition>
<h1>Default Contents</h1>
</ui:composition>
ステップ4:テンプレートを作成する:common.xhtml
*ui:insert* および *ui:include* タグを使用して、テンプレートファイルにヘッダー/フッターとコンテンツファイルを含めます。 *ui:insert* タグの各セクションに名前を付けます。
*ui:insert* タグの *name* 属性は、対応するセクションのコンテンツを置き換えるために使用されます。
<h:body>
<ui:insert name = "header" >
<ui:include src = "header.xhtml"/>
</ui:insert>
<ui:insert name = "content" >
<ui:include src = "contents.xhtml"/>
</ui:insert>
<ui:insert name = "footer" >
<ui:include src = "footer.xhtml"/>
</ui:insert>
</h:body>
ステップ5a:デフォルトのコンテンツでテンプレートを使用:home.xhtml
common.xhtml、任意のxhtmlページで ui:composition タグを使用するテンプレートをロードします。
<h:body>
<ui:composition template = "common.xhtml">
</h:body>
ステップ5b:テンプレートを使用して、独自のコンテンツを設定します:home.xhtml
common.xhtml、任意のxhtmlページで ui:composition タグを使用するテンプレートをロードします。 ui:define タグを使用して、デフォルト値をオーバーライドします。
<h:body>
<ui:composition template = "templates/common.xhtml">
<ui:define name = "content">
<h:link value = "Page 1" outcome = "page1"/>
<h:link value = "Page 2" outcome = "page2"/>
</ui:define>
</ui:composition>
</h:body>
応用例
テストJSFアプリケーションを作成して、JSFのテンプレートタグをテストしましょう。
Step | Description |
---|---|
1 | Create a project with a name helloworld under a package com.finddevguides.test as explained in the JSF - First Application chapter. |
2 | Create templates folder under src → main → webapp folder. |
3 | Create header.xhtml, footer.xhtml, contents.xhtml and common.xhtml files under src → main → webapp → templates folder. Modify them as explained below. |
4 | Create page1.xhtml and page2.xhtml files under src → main → webapp folder. Modify them as explained below. |
5 | Modify home.xhtml as explained below. Keep rest of the files unchanged. |
6 | Compile and run the application to make sure business logic is working as per the requirements. |
7 | Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver. |
8 | Launch your web application using appropriate URL as explained below in the last step. |
header.xhtml
<?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://java.sun.com/jsf/facelets">
<body>
<ui:composition>
<h1>Default Header</h1>
</ui:composition>
</body>
</html>
<?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://java.sun.com/jsf/facelets">
<body>
<ui:composition>
<h1>Default Footer</h1>
</ui:composition>
</body>
</html>
contents.xhtml
<?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://java.sun.com/jsf/facelets">
<body>
<ui:composition>
<h1>Default Content</h1>
</ui:composition>
</body>
</html>
common.xhtml
<?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:h = "http://java.sun.com/jsf/html"
xmlns:ui = "http://java.sun.com/jsf/facelets">
<h:head></h:head>
<h:body>
<div style = "border-width:2px; border-color:green; border-style:solid;">
<ui:insert name = "header" >
<ui:include src = "/templates/header.xhtml"/>
</ui:insert>
</div>
<br/>
<div style = "border-width:2px; border-color:black; border-style:solid;">
<ui:insert name = "content" >
<ui:include src = "/templates/contents.xhtml"/>
</ui:insert>
</div>
<br/>
<div style = "border-width:2px; border-color:red; border-style:solid;">
<ui:insert name = "footer" >
<ui:include src = "/templates/footer.xhtml"/>
</ui:insert>
</div>
</h:body>
</html>
page1.xhtml
<?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:h = "http://java.sun.com/jsf/html"
xmlns:ui = "http://java.sun.com/jsf/facelets">
<h:body>
<ui:composition template = "templates/common.xhtml">
<ui:define name = "header">
<h2>Page1 header</h2>
</ui:define>
<ui:define name = "content">
<h2>Page1 content</h2>
<h:link value = "Back To Home" outcome = "home"/>
</ui:define>
<ui:define name = "footer">
<h2>Page1 Footer</h2>
</ui:define>
</ui:composition>
</h:body>
</html>
page2.xhtml
<?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:h = "http://java.sun.com/jsf/html"
xmlns:ui = "http://java.sun.com/jsf/facelets">
<h:body>
<ui:composition template = "templates/common.xhtml">
<ui:define name = "header">
<h2>Page2 header</h2>
</ui:define>
<ui:define name = "content">
<h2>Page2 content</h2>
<h:link value = "Back To Home" outcome = "home"/>
</ui:define>
<ui:define name = "footer">
<h2>Page2 Footer</h2>
</ui:define>
</ui:composition>
</h:body>
</html>
home.xhtml
<?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:h = "http://java.sun.com/jsf/html"
xmlns:ui = "http://java.sun.com/jsf/facelets">
<h:body>
<ui:composition template = "templates/common.xhtml">
<ui:define name = "content">
<br/><br/>
<h:link value = "Page 1" outcome = "page1"/>
<h:link value = "Page 2" outcome = "page2"/>
<br/><br/>
</ui:define>
</ui:composition>
</h:body>
</html>
すべての変更を完了したら、JSF-最初のアプリケーションの章で行ったようにアプリケーションをコンパイルして実行します。 すべてがアプリケーションで問題ない場合、次の結果が生成されます。
*Page1* リンクをクリックすると、次の結果が表示されます。
または、 Page2 リンクをクリックすると、次の結果が表示されます。