2011-08-01 17 views
2

私は、この複合コンポーネントがあります。動的な属性を持つコンポジットコンポーネントを作成するにはどうすればよいですか?

<cc:interface> 
    <cc:attribute name="image_1" /> 
    <cc:attribute name="image_2" /> 
    <cc:attribute name="image_3" /> 
</cc:interface> 

<cc:implementation> 
    <div id="slider-container"> 
     <div id="slider-small"> 
      <h:graphicImage library="images" name="#{cc.attrs.image_1}" /> 
      <h:graphicImage library="images" name="#{cc.attrs.image_2}" /> 
      <h:graphicImage library="images" name="#{cc.attrs.image_3}" /> 
     </div> 
    </div> 
</cc:implementation> 

私はこの方法でそれを使用します。

<cs:small_slider 
    image_1="about/1.jpg" 
    image_2="about/2.jpg" 
    image_3="about/3.jpg" 
/> 

をしかし、3つの属性に制限されています。

<cs:small_slider 
    image_1="about/1.jpg" 
    image_2="about/2.jpg" 
    image_3="about/3.jpg" 
    image_4="about/4.jpg" 
    image_5="about/5.jpg" 
/> 

私はコンポーネントを再利用するために、私は別のものを作成する必要はありませんこれをしたい:私はこのように、同じ複合コンポーネントを使用して、3以上のものを送信する必要があれば、私は何をすべき。

UPDATE: フォロー@BalusCアプローチフォローのHTMLをレンダリング:

<!-- small slider --> 
<div id="slider-container"> 
    <div id="slider-small"> 
     <img src="/brainset/javax.faces.resource/1.jpg.xhtml?ln=images" /> 
     <img src="RES_NOT_FOUND" /> 
     <img src="RES_NOT_FOUND" /> 
    </div> 
    <div id="frame-slider-small"></div> 
</div><!-- end #slide-container --> 

それは、他人の画像を見つけた唯一の最初ではありません。私はそれらの画像: 'about/2.jpg'と 'about/3.jpg'が存在すると確信しています。

答えて

3

これは不可能で、DRY principleにも違反しています。

あなたが<ui:repeat>を使用して、それを反復処理することができるように最善の策ではなく、豆からList<String>としていずれかへのパス、それを次のとおりです。

<cc:interface> 
    <cc:attribute name="images" type="java.util.List" required="true" /> 
</cc:interface> 

<cc:implementation> 
    <div id="slider-container"> 
     <div id="slider-small"> 
      <ui:repeat value="#{cc.attrs.images}" var="image"> 
       <h:graphicImage library="images" name="#{image}" /> 
      </ui:repeat> 
     </div> 
    </div> 
</cc:implementation> 

<cs:small_slider images="#{bean.images}" /> 

またはは、代わりにコンマ区切りのハードコードされた文字列として定義し、JSTL 012を使用します

具体的な問題へ
<cc:interface> 
    <cc:attribute name="images" type="java.lang.String" required="true" /> 
</cc:interface> 

<cc:implementation> 
    <div id="slider-container"> 
     <div id="slider-small"> 
      <ui:repeat value="#{fn:split(cc.attrs.images, ',')}" var="image"> 
       <h:graphicImage library="images" name="#{image}" /> 
      </ui:repeat> 
     </div> 
    </div> 
</cc:implementation> 

無関係

<cs:small_slider images="about/1.jpg,about/2.jpg,about/3.jpg" /> 

、ジャワ/ JSFの命名と一致するようにしてみてください。<ui:repeat>にターンフィードであなたがString[]にそれらを分割するコンベンション。私はあなたのsmall_slider.xhtmlrenameSlider.xhtmlに改名して、<cs:smallSlider>として使用することができます。これは、すべての通常のJSFコンポーネントと一線を画しています。

+0

私はそれを行うことができたのか分からなかった。 私の投稿を更新してください。どうぞご覧ください。 –

+0

どのようなアプローチをとったのですか?二番目?カンマの後にスペースを入れましたか?もしそうなら、それらを取り除く。 – BalusC

+0

それは働いた!あなたはロック!おかげでもう一度仲間=) –

0

BalusCのソリューションのもう1つの代替方法は、(ab)ネストされたf:paramタグを使用することです。これにより、イメージごとに追加のパラメータをコンポジットコンポーネントに渡すこともできます。次の例のname属性はオプションである:あなたの元の問題はすでに解決し、私はいくつかのフィードバックを得るために、この多くのを書いていたので

<cc:interface> 
</cc:interface> 

<cc:implementation> 
    <div id="slider-container"> 
     <div id="slider-small"> 
      <c:forEach items="#{cc.children}" var="param"> 
       <h:graphicImage library="images" name="#{param.value}" title="#{param.name}"/> 
      </c:forEach> 
     </div> 
    </div> 
</cc:implementation> 

:次のように定義された複合コンポーネントと

<cs:slider> 
    <f:param name="image1" value="image1"/> 
    <f:param name="image2" value="image2"/> 
    <f:param name="image3" value="image3"/> 
</cs:slider> 

このアプローチでは

関連する問題