TOC

JSF 2 Faceletsを使用したテンプレートの例

JSF 2 Faceletsによるテンプレートの例

Webアプリケーションでは、ほとんどのページは、同じヘッダーとフッターなど、同様のWebインターフェイスレイアウトとスタイルに従います。 JSF 2.0では、Faceletsタグを使用して、標準のWebインターフェイスレイアウトを簡単に提供できます。実際、Apache Tiles frameworkと同じように見えます。

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

  1. ui:insert –テンプレートファイルで使用され、テンプレートをロードするファイルによって置き換えられるコンテンツを定義します。 コンテンツは「ui：define」タグに置き換えることができます。

  2. ui:define –一致する「ui：insert」タグを使用してテンプレートに挿入されるコンテンツを定義します。

  3. ui:include – JSPの「jsp：include」と同様に、別のXHTMLページのコンテンツが含まれます。

  4. ui:composition –「template」属性とともに使用すると、指定されたテンプレートがロードされ、このタグの子がテンプレートのレイアウトを定義します。それ以外の場合は、どこかに挿入できる要素のグループです。 さらに、JSFは「ui：composition」タグの「外側」のすべてのタグを削除します。

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

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

ファイル：commonLayout.xhtml

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

  1. 「h:outputStylesheet」タグを使用して、ページレイアウト全体のスタイルを設定するためにCSSファイルをヘッドに含めます。

  2. 「ui:insert」タグを使用して、ヘッダー、コンテンツ、フッターの3つの置換可能なセクションを定義します。

  3. テンプレートの使用時に置換が指定されていない場合は、「ui:include」タグを使用してデフォルトのコンテンツを提供します。

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

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

ファイル：commonHeader.xhtml 



    
        

        
This is default header

ファイル：commonContent.xhtml 



    
        

        
This is default content

ファイル：commonFooter.xhtml 



    
        

        
This is default footer

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

ファイル：commonHeader.xhtml 



    
        ALL TAGS ABOVE THIS LINE WILL BE REMOVED BY JSF
        

        
This is default header


        
        ALL TAGS BELOW THIS LINE WILL BE REMOVED BY JSF

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



    
This is default header

「commonLayout」テンプレートに挿入すると、…

ファイル：commonLayout.xhtml 

    ...
    

    


        
    ...

3. テンプレートを使用する

既存のテンプレートを使用するには、たとえば 「commonLayout.xhtml」では、「template」属性とともに「ui:composition」タグを使用します。 次の2つの例を参照してください。

ファイル：default.xhtml

このJSFページは「commonLayout.xhtml」テンプレートをロードし、デフォルトのページコンテンツをすべて表示します。

jsf2-facelets-template-example-1

ファイル：page1.xhtml 



    

        

            
                
This is page1 content

            

        
                
This is page1 Footer

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

jsf2-facelets-template-example-2

Note
「ui:define」タグの名前が、テンプレートで定義されている「ui:insert」タグの名前と一致する限り、「ui：挿入」コンテンツが置き換えられます。

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

ダウンロード–JSF-2-Facelets-Template-Example.zip（12KB）

参考文献

  1. Apacheタイルフレームワーク

  2. JSF「ui：include」JavaDoc

  3. JSF「ui：insert」JavaDoc

  4. JSF「ui：define」JavaDoc

  5. JSF「ui：composition」JavaDoc

Related