SE成長痛日記

アラサーSEが技術力を高めるために日々感じる痛みを綴るBlogです。

JSFで複合コンポーネントを作成して利用する

JavaEE7

JSFでは、複数のコンポートを束ねて切り出して1つのコンポーネントとして扱うことができます。

何度も同じように使用される部分を切り出して、再利用できたら便利ですよね？

前回のやつから投稿したレスの部分を複合コンポーネントにしてみます。

        <ui:repeat var="respon" value="#{responseBean.responseList}" >
            <div>
                <h:outputText value="#{respon.name}"/>
                <h:outputText value="#{respon.mail}"/>
                <h:outputText value="#{respon.body}"/>
            </div>
        </ui:repeat>

この部分です。

いきなりrepeat含めて、まとめるのはなんか怖いので、（てかオブジェクトを渡せるか謎） ちきってdiv要素を切り出します。。。。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:composite="http://java.sun.com/jsf/composite"
      >
    <composite:interface>
        <composite:attribute name="name"/>
        <composite:attribute name="mail"/>
        <composite:attribute name="body"/>
    </composite:interface>

    <composite:implementation>      
        <div>
            <h:outputText value="#{name}"/>
            <h:outputText value="#{mail}"/>
            <h:outputText value="#{body}"/>
        </div>       
    </composite:implementation>
</html>

こんな感じのコンポーネントを定義します。 置き場所はリソースにcompフォルダを作って配置します。

利用する側はこうなります。

        <ui:repeat var="respon" value="#{responseBean.responseList}" >
            <comp:respons name="#{respon.name}" mail="#{respon.mail}" body="#{respon.body}"/>
        </ui:repeat>

これで動かします。

・・・・・

本当にあってるのでしょうか？

f:id:hirohisoEx:20190318001148p:plain
エラー

エラー、、、出ていますが

ものはためしに動かしてみましょう。

f:id:hirohisoEx:20190318001532p:plain
エラーorg

知ってた。

resourceフォルダに読み込めてないみたいですね。 白猫本を見ると以下のように記載してありました。

コンポジットコンポーネント は、 画像 や CSS ファイル などと 同様 に resources フォルダ に 配置 し て 利用 し ます。

あ、入れてるresouce違いました。

f:id:hirohisoEx:20190318002220p:plain
フォルダ修正前

次のように修正します。

f:id:hirohisoEx:20190318002350p:plain
フォルダ修正後

これで一回、動かしてみます。

エラーは解消されました。 f:id:hirohisoEx:20190318002830p:plain

なんも出なくなりましたが。 f:id:hirohisoEx:20190318002740p:plain

div要素は追加されて行ってるので、 うまいことデータが渡せっていないっぽいです。 f:id:hirohisoEx:20190318002810p:plain 今日はここまでで、次回、このエラー解消したいと思います。

追記

普通にcc.attrつけるの忘れてました。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:composite="http://xmlns.jcp.org/jsf/composite"
      >
    <composite:interface>
        <composite:attribute name="name"/>
        <composite:attribute name="mail"/>
        <composite:attribute name="body"/>
    </composite:interface>

    <composite:implementation>      
        <div>
            <h:outputText value="#{cc.attrs.name}"/>
            <h:outputText value="#{cc.attrs.mail}"/>
            <h:outputText value="#{cc.attrs.body}"/>
        </div>       
    </composite:implementation>
</html>