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

投稿日: 2019-11-05 2019-11-05
タグ: component, jsf2

JSF 2.0以降、

複合コンポーネント

と呼ばれる再利用可能なコンポーネントを作成するのは非常に簡単です。このチュートリアルでは、ユーザー登録フォームである単純な複合コンポーネント（ “h:inputText”）と送信ボタン（
h:inputText
）を含む単純な複合コンポーネントを作成する方法を示します（”

register.xhtml

” h:commandButton`）。また、使用方法も示します。

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

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

1.複合ネームスペース

<html xmlns="http://www.w3.org/1999/xhtml"
     //...
      xmlns:composite="http://java.sun.com/jsf/composite">
</html>

2.インターフェイス

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

<html xmlns="http://www.w3.org/1999/xhtml"
     //...
      xmlns:composite="http://java.sun.com/jsf/composite">

      <composite:interface>
            <composite:attribute name="anything"/>
      </composite:interface>

      <composite:implementation>
            #{cc.attrs.anything}
      </composite:implementation>
</html>

composite:interface`タグは、それを使用する開発者に公開される設定可能な値を宣言するために使用されます。 `composite:implementation`タグは、複合コンポーネントの内容であるすべてのXHTMLマークアップを
composite:implementation`タグの中で宣言しています。 `＃{cc.attrs .attributeName} `。

3.リソースフォルダ

複合コンポーネント（ “.xhtml”ファイル）をJSFのresourcesフォルダに入れます（図1を参照）

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

jsf2-composite-component-folder、title = "jsf2-composite-component-folder"、width = 304、height = 402

この場合、 ”

register.xhtml

“コンポジットコンポーネントを “mkyong”という名前のフォルダに配置します。

4.完全な例

完了したら、 “register.xhtml”の完全な例を見てみましょう。

File:register.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:f="http://java.sun.com/jsf/core"
      xmlns:composite="http://java.sun.com/jsf/composite"
      >

    <composite:interface>

        <composite:attribute name="nameLable"/>
        <composite:attribute name="nameValue"/>
        <composite:attribute name="emailLable"/>
        <composite:attribute name="emailValue"/>

    <composite:attribute name="registerButtonText"/>
        <composite:attribute name="registerButtonAction"
            method-signature="java.lang.String action()"/>

    </composite:interface>

    <composite:implementation>

    <h:form>

        <h:message for="textPanel" style="color:red;"/>

        <h:panelGrid columns="2" id="textPanel">

            #{cc.attrs.nameLable} :
            <h:inputText id="name" value="#{cc.attrs.nameValue}"/>

            #{cc.attrs.emailLable} :
            <h:inputText id="email" value="#{cc.attrs.emailValue}"/>

        </h:panelGrid>

        <h:commandButton action="#{cc.attrs.registerButtonAction}"
            value="#{cc.attrs.registerButtonText}"
       />

    </h:form>

    </composite:implementation>

</html>

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

コンポジットコンポーネント “register.xhtml”を作成しました。ここでは、その使用方法を示します。

1.コンポジットコンポーネントアクセスパス

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

<html xmlns="http://www.w3.org/1999/xhtml"
     ///...
      xmlns:mkyong="http://java.sun.com/jsf/composite/mkyong"
      >
      <mkyong:register/>
</html>

http://java.sun.com/jsf/composite/folder-name-in-resources-folder**

コンポジットコンポーネントのフォルダ名は、コンポーネントアクセスパスとして定義されます。たとえば、 “register.xhtml “abcという名前のフォルダの下にあるファイルにアクセスすると、次のようにアクセスする必要があります:

<html xmlns="http://www.w3.org/1999/xhtml"
     ///...
      xmlns:mkyong="http://java.sun.com/jsf/composite/abc"
      >
      <mkyong:register/>
</html>

2.完全な例

“register.xhtml”コンポジットコンポーネントの使用方法を示す完全な例を見てみましょう。

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:mkyong="http://java.sun.com/jsf/composite/mkyong"
      >

    <h:body>

        <h1>Composite Components in JSF 2.0</h1>

    <mkyong:register
        nameLable="Name"
        nameValue="#{user.name}"
        emailLable="E-mail"
        emailValue="#{user.email}"

        registerButtonText="Register"
        registerButtonAction="#{user.registerAction}"
    />

    </h:body>

</html>

公開された属性を介して、ハードコードされた値またはバッキングのメソッドまたはプロパティのいずれかをコンポジットコンポーネントに渡すことができます。フォームがサブミットされると、JSFはすべてのバッキングBeanを自動的にバインドします。

__P.Sここに興味のある人のための “ユーザ”管理された、または裏付けのbeanがあります。

package com.mkyong;

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";
    }
}