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

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原则。

您最好的选择是或者将其作为bean的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>

既然你原来的问题已经解决了，我写这封信是为了得到一些关于这种方法的反馈。