複合コンポーネント

投稿日：2015年9月20日更新日：2020年5月19日

JSFではラベルやテキストといったコンポーネントをグループ化し、一つのまとまりとすることができます。

メリットとしては似たような部分をテンプレート化しておくことで保守性を向上させることができます。

さらに初期値や変数なども設定できます。

Contents

1 設定方法
- 1.1 複合コンポーネントの定義
- 1.2 複合コンポ―ネントの呼び出し
2 参考リンク

設定方法

複合コンポーネントの定義

複合コンポーネントとして定義しておきたい、テンプレートを/resourcesのなかに置きます。

例として、/resources/hogeProject/searchというパスの中にsample.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:cc="http://xmlns.jcp.org/jsf/composite"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

    <!-- INTERFACE -->
    <cc:interface>
        <cc:attribute name="id" default="" />
        <cc:attribute name="value" required="true" />
        <cc:attribute name="labelName" default="" />
    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation>
        <div class="test">
            <label class="label">#{cc.attrs.labelName}</label>
            <div class="test2">
                <h:inputText size="50" class="code" id="#{cc.attrs.id}" value="#{cc.attrs.value}" />
            </div>
        </div>
    </cc:implementation>
</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:cc="http://xmlns.jcp.org/jsf/composite"

xmlns:h="http://xmlns.jcp.org/jsf/html">

<cc:interface>

<cc:attribute name="id" default="" />

<cc:attribute name="value" required="true" />

<cc:attribute name="labelName" default="" />

</cc:interface>

<cc:implementation>

<label class="label">#{cc.attrs.labelName}</label>

<h:inputText size="50" class="code" id="#{cc.attrs.id}" value="#{cc.attrs.value}" />

</div>

</cc:implementation>

</html>

cc:interfaceの部分で動的に変えたい属性の定義を行います。

個別のプロパティはcc:attributeですね。

あとは具体的なテンプレートの部分をcc:implementationに定義します。

interface部分で定義した値はcc.attrsで呼び出すことができます。

複合コンポ―ネントの呼び出し

    <!--xhtmlの最上部の部分で他のjsfの呼び出しに合わせて先ほど定義したコンポーネントを呼び出します。-->
    <html   
    xmlns:search="http://xmlns.jcp.org/jsf/composite/hogeProject/search">


   <!--これで呼び出すことができます-->
   <sampleComp:sample id value="#{sampletBean.keyword}" />

<html

xmlns:search="http://xmlns.jcp.org/jsf/composite/hogeProject/search">

<sampleComp:sample id value="#{sampletBean.keyword}" />

上記のように呼び出せば、無事定義した複合コンポーネントの中に変数を代入していれることができます。

参考リンク

JSFの複合コンポーネント(Composite Component)作成

またJavaエンジニア養成読本にも載っています。