CODEWITHSUNDEEP
jsfjsf-2primefaces
khaled Rihane
khaled Rihane

Reputation: 626

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

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.

Upvotes: 0

Views: 2384

Answers (2)

BalusC
BalusC

Reputation: 1108632

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>

See also:

Upvotes: 2

user2354035
user2354035

Reputation:

you must change the order of the h:panelGrid and p:graphicImage. because you repeat the creation of the h:panelGrid with size() as number of columns. your code becomes:

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

Upvotes: 0

Related Questions