JSF 2.0の複合コンポーネント

JSF 2.0の複合コンポーネント

JSF 2.0以降、composite componentsと呼ばれる再利用可能なコンポーネントを非常に簡単に作成できます。 このチュートリアルでは、ユーザー登録フォームである単純な複合コンポーネント(「register.xhtml」として保存)を作成する方法を示します。これには、名前と電子メールのテキストフィールド(h:inputText)と送信ボタンが含まれます。 (h:commandButton)。 さらに、その使用方法も示します。

複合コンポーネントを作成する

複合コンポーネントを作成する手順は次のとおりです。

1. 複合名前空間

.xhtmlファイルを作成し、複合名前空間を宣言します。


2. インターフェースと実装

複合タグcomposite:interfacecomposite:attribute、およびcomposite:implementationを使用して、複合コンポーネントのコンテンツを定義します。 例えば、



      
            
      

      
            #{cc.attrs.anything}
      

composite:interfaceタグは、それを使用する開発者に公開される構成可能な値を宣言するために使用されます。 また、composite:implementationタグは、複合コンポーネントのコンテンツであるすべてのXHTMLマークアップを宣言します。composite:implementationタグ内では、式#{cc.attrs.attributeName}を使用してcomposite:interface属性にアクセスできます。

3. リソースフォルダー

複合コンポーネント(「.xhtml」ファイル)をJSFのリソースフォルダーに配置します(図1を参照)。

図1:この例のディレクトリ構造。

jsf2-composite-component-folder

この場合、「register.xhtml」複合コンポーネントを「example」という名前のフォルダーに配置します。

4. 完全な例

完了しました。「register.xhtml」の完全な例を見てみましょう。

ファイル:register.xhtml




    

        
        
        
        

    
        

    

    

    

        

        

            #{cc.attrs.nameLable} :
            

            #{cc.attrs.emailLable} :
            

        

        

    

    

複合コンポーネントを使用する

複合コンポーネント「register.xhtml」を作成したので、今度はその使用方法を示します。

1. 複合コンポーネントのアクセスパス

上記の図1を参照してください。 「register.xhtml」ファイルは「example」フォルダの下にあります。 アクセス方法は次のとおりです。


      

http://java.sun.com/jsf/composite/folder-name-in-resources-folder
複合コンポーネントのフォルダー名は、コンポーネントのアクセスパスで定義されます。たとえば、「register.xhtml」ファイルを「abc」という名前のフォルダーの下に置くと、次のようにアクセスする必要があります。この :


      

2. 完全な例

「register.xhtml」複合コンポーネントの使用方法を示す完全な例を見てみましょう。

ファイル:default.xhtml




    

        

Composite Components in JSF 2.0

フォームが送信されると、JSFはすべてのバッキングBeanバインディングを自動的に行います。

P.S Here’s the “user” managed or backing bean, for those who are interested.

package com.example;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="user")
@SessionScoped
public class UserBean{

    public String name;
    public String email;

    //getter and setter methods for name and email

    public String registerAction(){
        return "result";
    }
}

Demo

これが結果です。

jsf2-composite-component-example

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

ダウンロード–JSF-2-Composite-Components-Example.zip(11KB)