How to create a composite component with dynamic attributes?

I have this composite component:

<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:graph开发者_StackOverflowicImage library="images" name="#{cc.attrs.image_2}" />
            <h:graphicImage library="images" name="#{cc.attrs.image_3}" />
        </div>
    </div>
</cc:implementation>

I use it in this way :

<cs:small_slider 
    image_1="about/1.jpg"
    image_2="about/2.jpg"
    image_3="about/3.jpg"
/>

but is limited to three attributes. What should I do if I have to send more than three, using the same composite component, like this:

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

I want to do this to reuse the component and I don't want to create another.

UPDATE: Follow @BalusC approach renders the follow 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 --> 

It not found the others images, only the first. I'm sure those images: 'about/2.jpg' and 'about/3.jpg' exist.

That's not possible and it also violates the DRY principle.

Your best bet is to either pass it as a List<String> from the bean instead so that you can iterate over it using <ui:repeat>:

<cs:small_slider images="#{bean.images}" />

with

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

Or define it as a hardcoded comma-separated string instead and use JSTL fn:split() to split them into a String[] which you in turn feed to <ui:repeat>:

<cs:small_slider images="about/1.jpg,about/2.jpg,about/3.jpg" />

with

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

Unrelated to the concrete problem, try to be consistent with Java/JSF naming conventions. I'd rename your small_slider.xhtml to renameSlider.xhtml so that you can use it as <cs:smallSlider>, which is nicely in line with all normal JSF components.

Another alternative to the solutions BalusC mentioned would be to (ab)use nested f:param tags. This would also allow to pass an additional parameter per image to the composite component. The name attribute in the following example is optional:

<cs:slider>
    <f:param name="image1" value="image1"/>
    <f:param name="image2" value="image2"/>
    <f:param name="image3" value="image3"/>
</cs:slider>

With the composite component defined like this:

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

Since your original problem was already solved, I'm writing this more to get some feedback on this approach.