Webアプリケーションでは、ほとんどのページは、同じヘッダーとフッターなどの同様のWebインターフェイスのレイアウトとスタイリングに従います。 JSF 2.0では、Faceletsタグを使用して簡単に標準のWebインターフェイスレイアウトを提供できます。実際、http://tiles.apache.org/[Apache Tilesフレームワーク]と似ています。

この例では、4つのFaceletsタグを使用して、テンプレートからページを構築しています。


  1. ui:insert

    – テンプレートファイルで使用されるコンテンツを定義します

テンプレートをロードするファイルに置き換えます。内容は “ui:define”タグで置き換えることができます。


  1. ui:define

    – aでテンプレートに挿入されるコンテンツを定義します.

一致する「ui:insert」タグ。


  1. ui:include

    – JSPの “jsp:include”と同様に、

別のXHTMLページ。


  1. ui:composition

    – “template”属性とともに使用すると、指定された

テンプレートがロードされ、このタグの子はテンプレートレイアウトを定義します。そうでなければ、それはどこかに挿入できる要素のグループです。さらに、JSFは “ui:composition”タグの “outside”のタグをすべて削除します。

1.テンプレートのレイアウト

JSF 2.0では、テンプレートファイルは通常のXHTMLファイルであり、テンプレートレイアウトを定義するためのJSFのfaceletsタグはほとんどありません。


File:commonLayout.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:outputStylesheet name="common-style.css" library="css"/>
    </h:head>

    <h:body>

    <div id="page">

        <div id="header">
        <ui:insert name="header" >
          <ui:include src="/template/common/commonHeader.xhtml"/>
        </ui:insert>
        </div>

        <div id="content">
        <ui:insert name="content" >
          <ui:include src="/template/common/commonContent.xhtml"/>
        </ui:insert>
        </div>

        <div id="footer">
            <ui:insert name="footer" >
              <ui:include src="/template/common/commonFooter.xhtml"/>
            </ui:insert>
            </div>

        </div>

    </h:body>
</html>

このテンプレートでは、標準のWebレイアウトを定義します。

  1. ”

    h:outputStylesheet

    “タグを使用して、先頭にCSSファイルを含める

ページレイアウト全体をスタイリングします。

  1. ”

    ui:insert

    “タグを使用して、3つの置換可能なセクション（ヘッダ、

コンテンツとフッター。

  1. 置き換えられない場合、デフォルトのコンテンツを提供するために ”

    ui:include

    “タグを使用します

テンプレートが使用されるときに指定されます。

2.ヘッダー、コンテンツ、フッター

3つのデフォルトページコンテンツ。


File:commonHeader.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>This is default header</h1>

        </ui:composition>
    </body>
</html>

ファイル:共通Content.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>This is default content</h1>

        </ui:composition>
    </body>
</html>


File:commonFooter.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>This is default footer</h1>

        </ui:composition>
    </body>
</html>

これらのページがテンプレートファイルに挿入されると、「ui:composition」以外のすべてのタグが削除されます。例えば、

ファイル:common Header.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>
        ALL TAGS ABOVE THIS LINE WILL BE REMOVED BY JSF
        <ui:composition>

        <h1>This is default header</h1>

        </ui:composition>
        ALL TAGS BELOW THIS LINE WILL BE REMOVED BY JSF
    </body>
</html>

JSFは、次の要素のみを取り、テンプレートファイルに挿入します 

<ui:composition>

    <h1>This is default header</h1>

</ui:composition>

“commonLayout”テンプレートに挿入すると、それは…​


File:commonLayout.xhtml
 

    ...
    <h:body>

    <div id="page">

        <div id="header">
        <h1>This is default header</h1>
        </div>
    ...

3.テンプレートの使用

既存のテンプレートを使用するには、 “commonLayout.xhtml`”では、 “template”属性を持つ “ui:composition`”タグを使用します。次の2つの例を参照してください。


File:default.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="template/common/commonLayout.xhtml">

        </ui:composition>

    </h:body>

</html>

このJSFページは “commonLayout.xhtml”テンプレートを読み込み、すべてのデフォルトページコンテンツを表示します。


jsf2-facelets-template-example-1、title = "jsf2-facelets-template-example-1"、幅= 640、高さ= 440


File: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="/template/common/commonLayout.xhtml">

            <ui:define name="content">
                <h2>This is page1 content</h2>
            </ui:define>

        <ui:define name="footer">
                <h2>This is page1 Footer</h2>
            </ui:define>

        </ui:composition>

    </h:body>

</html>

このJSFページは “commonLayout.xhtml”テンプレートをロードし、 “ui:define”タグを使用してテンプレートファイルで定義された “ui:insert”タグをオーバーライドします。


jsf2-facelets-template-example-2、title = "jsf2-facelets-template-example-2"、幅= 640、高さ= 440

ソースコードをダウンロードする

ダウンロード – リンク://wp-content/uploads/2010/10/JSF-2-Facelets-Template-Example.zip[JSF-2-Facelets-Template- Example.zip]（12KB）

参考文献


  1. Apache Tiles Framework


  2. https://javaserverfaces.dev.java.net/nonav/docs/2.0/pdldocs/facelets/ui/include.html

    [JSF

“ui:include” JavaDoc]。

https://javaserverfaces.dev.java.net/nonav/docs/2.0/pdldocs/facelets/ui/insert.html

[JSF

“ui:insert” JavaDoc ”
。

https://javaserverfaces.dev.java.net/nonav/docs/2.0/pdldocs/facelets/ui/define.html

[JSF

“ui:define” JavaDoc]。

https://javaserverfaces.dev.java.net/nonav/docs/2.0/pdldocs/facelets/ui/composition.html

[JSF

“ui:composition” JavaDoc]

リンク://タグ/jsf2/[jsf2]リンク://タグ/テンプレート/[テンプレート]