Question

I need insert the value in the ‘title’ attribute but I’m wondering how do that, it should be something like:

<ui:repeat //..>
    <h:graphicImage library="images" name="#{image}" title="#{title}" />
</ui:repeat>

I can send one string with comma to separate only:

<!-- calling the component -->
<cs:small_slider images="products/eletricity.jpg,products/water.jpg" >

<!-- the component with dynamic rendering -->
<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> 

Any idea ?

Answer 1

If the related items of the both arrays have the same array index, then you could just access them by the current loop index of one of the arrays which is available by varStatus of the <ui:repeat>.

Usage:

<cs:small_slider 
    images="products/eletricity.jpg,products/water.jpg" 
    titles="Electicity,Water"
/>

Composite component:

<cc:interface>
    <cc:attribute name="images" type="java.lang.String" required="true" />
    <cc:attribute name="titles" type="java.lang.String" required="true" />
</cc:interface>

<cc:implementation>
    <ui:param name="images" value="#{fn:split(cc.attrs.images, ',')}" />
    <ui:param name="titles" value="#{fn:split(cc.attrs.titles, ',')}" />

    <div id="slider-container">
        <div id="slider-small">
            <ui:repeat value="#{images}" var="image" varStatus="loop">
                <h:graphicImage library="images" name="#{image}" title="#{titles[loop.index]}" />
            </ui:repeat>
        </div>
    </div>
</cc:implementation>