如何使用动态属性创建复合组件？

Question

我有这样的复合材料部件：

<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" 
/> 

但仅限于三个属性。 ，我应该怎么做，如果我要送三多使用相同的复合材料部件，像这样：

<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" 
/> 

我想这样做是为了重用组件，我不想创建另一个。

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'。

Answer 1

这是不可能的，它也违反了DRY principle。

你最好的赌注是要么传从豆一List<String>代替，你可以遍历它使用<ui:repeat>过来：

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

与

<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> 

---

或者它定义为一个硬编码的逗号分隔的字符串，而不是和使用JSTL fn:split()他们分成String[]，你又进到<ui:repeat>：

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

与

<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> 

---

无关的具体问题，尽量与Java/JSF的命名保持一致约定。我会重新命名您的small_slider.xhtml到renameSlider.xhtml，这样就可以使用它作为<cs:smallSlider>，这是很好的与所有正常的JSF组件线。

Answer 2

BalusC提到的解决方案的另一种替代方法是（ab）使用嵌套的f:param标签。这也可以将每个图像的附加参数传递给复合组件。在下面的示例中的name属性是可选的：

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

有了这样定义的复合材料部件：

<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> 

因为你原来的问题已经解决了，我在写这更得到一些反馈在这个方法上。