Custom JSF Component Attribute List

Question

I am writing a custom JSF component that will display image transitions for a set of specified images. The list of images that will be used by the component will be specified by users of the component.

The main component will render, and the resulting markup will not be html.

I'm just learning JSF, and I was wondering if there was an installed template for passing a list of parameter attributes to a user component:

Will the user expect the transfer of such attributes:
<i:imageComponent width="480" height="320" imageUrls="img1Url1, imgUrl2" imageCaptions="imageCaption1, imageCaptions2"/>

and then I was able to convert these attributes to a list of servers using a converter, or would that be more natural?

<i:imageComponent width="480" height="320">
 <i:image id="im1" href="url1" caption="caption1"/>
 <i:image id="im2" href="url2" caption="caption2"/>
<i:imageComponent/>

In my case, the main imageComponent that will do all the rendering, so I just want to find out what is a natural way to pass a list of attributes to a component.

Answer 1

<i:imageComponent width="480" height="320" imageUrls="img1Url1, imgUrl2"
    imageCaptions="imageCaption1, imageCaptions2"/>

This design is error prone because synchronization of two separate lists is required.

<i:imageComponent width="480" height="320">
    <i:image id="im1" href="url1" caption="caption1"/>
    <i:image id="im2" href="url2" caption="caption2"/>
<i:imageComponent/>

This design is marginal because it requires that the consumer of the component determine a fixed number of contained images. At least with the first construct, the imageUrls and imageCaptions attributes can be bound to dynamic values ​​using EL expressions.

---

model - , . , UIData ( , h: dataTable) DataModel - . spec .

:

<i:imageComponent width="480" height="320"
        value="#{backingBean.imageModel}" />

.

---

( /, ):

<i:imageComponent width="480" height="320"
        value="#{backingBean.someIterable}" var="img" >
    <i:image href="#{img.href}" caption="#{img.caption}"/>
<i:imageComponent/>

, - back-end.