Horizontal display of a list of p:graphicImage and their titles in ui:repeat

Question

I 'm using the tag ui:repeat to display a list of pictures and their titles.

My code is:

 <p:dialog id="idSchemaDlg5"  widgetVar="schemaDlg"  position="10" resizable="true"  modal="true"   header="Schéma des composants">


            <h:panelGrid columns="1">
                <ui:repeat value="#{imageStreamer.pictureNamesList}" var="imageName" >

                   <h:panelGrid columns="#{imageStreamer.pictureNamesList.size()}">
                        <p:graphicImage value="#{imageStreamer.image}" >
                            <f:param name="pictureName" value="#{imageName}" />
                        </p:graphicImage>
                    <h:outputText value="#{imageName}"/>

                </ui:repeat>
            </h:panelGrid>

  </p:dialog>

I would to display the list of pictures horizontally but the list of pictures with this code was vertically displayed.

Any help is welcome.

Did you look at generated HTML output? How exactly do you want the generated HTML output to look instead? Then we can tell how to alter the JSF code accordingly in order to get exactly the desired HTML output. — BalusC, Sep 11 '13 at 11:11

score 2 · Accepted Answer · edited May 23 '17 at 11:56

I would to have this structure in output <table><tbody><tr><td><img1/><title1/></td><td><img2/><title2/></td><img3/><titl‌e3/><td></td></tr></table>

The <ui:repeat> inside <h:panelGrid> won't generate physically multiple table cells. It will generate only one table cell. In fact, each immediate child UI component of <h:panelGrid> counts as a single table cell. The <ui:repeat> is an UI component.

You need <c:forEach> instead. It's a taghandler and runs during building JSF component tree instead of during generating HTML output. It generates physically multiple JSF components, in contrary to <ui:repeat> which represents physically one JSF component which is reused everytime during generating HTML output.

<h:panelGrid columns="#{imageStreamer.pictureNamesList.size()}">
    <c:forEach items="#{imageStreamer.pictureNamesList}" var="imageName">
        <h:panelGroup>
            <p:graphicImage value="#{imageStreamer.image}">
                <f:param name="pictureName" value="#{imageName}" />
            </p:graphicImage>
            <h:outputText value="#{imageName}"/>
        </h:panelGroup>
    </c:forEach>
</h:panelGrid>

(note that you need to wrap the image and the text in a <h:panelGroup> to represent a single table cell)

Or, if you insist in using <ui:repeat>, then you have to write down the desired HTML output yourself.

<table>
    <tbody>
        <tr>
            <ui:repeat value="#{imageStreamer.pictureNamesList}" var="imageName">
                <td>
                    <p:graphicImage value="#{imageStreamer.image}">
                        <f:param name="pictureName" value="#{imageName}" />
                    </p:graphicImage>
                    <h:outputText value="#{imageName}"/>
                </td>
            </ui:repeat>
        </tr>
    </tbody>
</table>

     <p:dialog id="idSchemaDlg5"  widgetVar="schemaDlg"  position="10" resizable="true"  modal="true"   header="Schéma des composants">

                     <h:panelGrid columns="#{imageStreamer.pictureNamesList.size()}"> 

<ui:repeat value="#{imageStreamer.pictureNamesList}" var="imageName" > 

<table border="0" cellspacing="0" cellpadding="0" width="100%"> 
<tr> 
<td> <p:graphicImage value="#{imageStreamer.image}" > 
<f:param name="pictureName" value="#{imageName}" /> 
</p:graphicImage> 
</td> 
</tr> 
<tr> 
<td ><h:outputText value="#{imageName}"/></td> 
</tr> 
</table> 
</ui:repeat> 
</h:panelGrid>
              </p:dialog>

edited Sep 12 '13 at 09:44

answered Sep 12 '13 at 09:30

sorry, this is a mistake, but that's another method. Since the first works but it poses a problem to him – Sep 12 '13 at 10:20
Your first answer does not produce the desired HTML output. – BalusC Sep 12 '13 at 10:27
Look closer. Your first answer puts everything in same `` while the OP want them in separate ``s. Your current answer is completely off. – BalusC Sep 12 '13 at 10:31
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/37251/discussion-between-chhibi-amor-and-balusc) – Sep 12 '13 at 10:36
Yes, you can remove it. Just click "delete" link below the answer. – BalusC Sep 12 '13 at 10:47

Horizontal display of a list of p:graphicImage and their titles in ui:repeat

2 Answers2

See also: