java - 如何创建具有动态属性的复合组件？

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

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

更新: 遵循 @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 组件非常一致。