How to iterate over two arrays in one ui:repeat?

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开发者_C百科: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 ?

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>