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

  • template* 属性を使用してテンプレートをロードします。 また、xhtmlページに挿入されるコンポーネントのグループを定義することもできます。

テンプレートを作成する

Webアプリケーション用のテンプレートの作成は、段階的な手順です。 以下は、サンプルテンプレートを作成する手順です。

ステップ1：ヘッダーファイルの作成：header.xhtml

*ui：composition* タグを使用して、ヘッダーセクションのデフォルトコンテンツを定義します。
<ui:composition>
   <h1>Default Header</h1>
</ui:composition>

ステップ2：フッターファイルの作成：footer.xhtml

*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"/>
         &nbsp;
         <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>

footer.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 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-最初のアプリケーションの章で行ったようにアプリケーションをコンパイルして実行します。 すべてがアプリケーションで問題ない場合、次の結果が生成されます。

JSFテンプレート結果 

*Page1* リンクをクリックすると、次の結果が表示されます。

JSFテンプレートresult1

または、 Page2 リンクをクリックすると、次の結果が表示されます。

JSFテンプレートresult2

「https://www.finddevguides.com/index.php?title=Jsf-templates-tag&oldid=20374」から取得
Powered by MediaWiki