Display a list of images in a table format in JSF

Question

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>

prageeth · Answer 1 · 2012-11-28T08:47:17.170

2

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:

I don't think that you can do it with <ui:repeat>. Use <c:forEach> instead.

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

edited Nov 28 '12 at 08:47

answered Nov 28 '12 at 03:54

prageeth

7,159
7
44
72

Thanks, that works. I'll have to look into div - I've never used that tag before – Ramesh Nov 28 '12 at 04:57
Actually, this only sort of works. I don't have 6 columns - it basically spans the page. Which might be ok, but I'd also like the option to set the number of columns. Can that be done with the div inline-block tag? – Ramesh Nov 28 '12 at 07:33
Change the `columns` attribute of main `panelGrid` like this. ``. – prageeth Nov 28 '12 at 07:38
No - I don't want to set the number of columns to the size of the resource list. It could have dozens or even hundreds of items. I want to set it to a specific size (say 6), but anything I do on that external panelGrid does not seem to affect the ui:repeat – Ramesh Nov 28 '12 at 08:01

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

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.

Display a list of images in a table format in JSF

2 Answers2

See also:

Linked