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

【问题标题】：How to create a composite component with dynamic attributes?如何创建具有动态属性的复合组件？
【发布时间】：2011-10-17 16:07:48
【问题描述】：

我有这个复合组件：

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

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

更新： Follow @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' 存在。

【问题讨论】：

标签： java jsf jsf-2 composite-component

【解决方案1】：

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

您最好的选择是或者将它作为List<String> 从bean 传递，以便您可以使用<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 组件非常一致。

【讨论】：

我不知道我能做到这一点，感谢提示。我更新了我的帖子，你能看一下吗？
你采取了什么方法？第二？逗号后面有空格吗？如果是这样，请摆脱它们。
不客气。您也可以选择name="#{fn:trim(image)}"，这样您就不必担心这些空间了。
是否可以在同一个中有两个变量？就像，一个值是图像的路径，就像我们正在做的那样，另一个是图像的标题。
是的，如果它们具有相同的数组索引。然后你可以使用类似<ui:repeat value="#{array1}" varStatus="loop">#{array1[loop.index]}, #{array2[loop.index]}</ui:repeat>的东西。

【解决方案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>

由于您的原始问题已经解决，我正在写更多内容以获得有关此方法的一些反馈。

【讨论】：