Display a list of images in a table format in JSF

2
votes

This is probably a really simple JSF question, but I can't seem to find the simple answer.

I have a List of images, and I want to display them in a table of images. Each image is displayed with its filename. I'm using a ui:repeat tag as shown below. I don't get 5 columns as requested, however, only 1.

<h:panelGrid id="resourcePanel" columns="5" rules="all">
    <ui:repeat var="res" value="#{resourceUpload.resources}">
        <h:panelGrid columns="1" rules="none">
                <h:graphicImage
                    value="/image/resource?id=#{res.idAsString}"
                    style="width:100px;" />
                <h:outputText value="#{res.name}" />
        </h:panelGrid>
    </ui:repeat>
</h:panelGrid>
2
imagejsfrepeat

2 Answers

2
votes

The output is fully as expected and specified. The <ui:repeat> is a render time tag, not a view build time tag like <c:forEach>. After building the view, <h:panelGrid> ends up with 1 child component (the <ui:repeat> itself), not with n nested <h:panelGrid> components like as you would get with <c:forEach>. 

<html ... xmlns:c="http://java.sun.com/jsp/jstl/core">
...
<h:panelGrid id="resourcePanel" columns="5" rules="all">
    <c:forEach var="res" items="#{resourceUpload.resources}">
        <h:panelGrid columns="1" rules="none">
            <h:graphicImage
                value="/image/resource?id=#{res.idAsString}"
                style="width:100px;" />
            <h:outputText value="#{res.name}" />
        </h:panelGrid>
    </c:forEach>
</h:panelGrid>

(this has in the Mojarra versions older than 2.1.18 however an implication on #{resourceUpload}: it can't be a view scoped bean, it must be request scoped due to a chicken-egg issue in view state saving/restoring; you'd need to upgrade to Mojarra 2.1.18)

Your nested <h:panelGrid> makes by the way no utter sense. I'd have used <h:panelGroup> here.

See also:

2
votes

Why do you use another <h:panelGrid> inside the <ui:repeat>? You can just use a div like this.
Instead of 

<h:panelGrid columns="1" rules="none">

use

<div style="display:inline-block;">

Edit:

<ui:repeat><c:forEach>

First you should import the namespace

xmlns:c="http://java.sun.com/jstl/core"

Now replace the <ui:repeat> with <c:forEach> like this.

<c:forEach items="#{accountMastList.resultList}" var="res">