在 JSF 中以表格格式显示图像列表答案

【问题标题】：Display a list of images in a table format in JSF在 JSF 中以表格格式显示图像列表
【发布时间】：2012-11-15 19:05:33
【问题描述】：

这可能是一个非常简单的 JSF 问题，但我似乎找不到简单的答案。

我有一个图像列表，我想在图像表中显示它们。每个图像都以其文件名显示。我正在使用ui:repeat 标签，如下所示。我没有按要求获得 5 列，但只有 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>

【问题讨论】：

标签： image jsf repeat

【解决方案1】：

输出完全符合预期和指定。 <ui:repeat> 是一个渲染时间标签，而不是像<c:forEach> 这样的视图构建时间标签。构建视图后，<h:panelGrid> 以 1 个子组件（<ui:repeat> 本身）结束，而不是像 <c:forEach> 那样嵌套了 n 嵌套的 <h:panelGrid> 组件。

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

（这在早于 2.1.18 的 Mojarra 版本中具有但对 #{resourceUpload} 的影响：它不能是视图范围的 bean，由于视图中的鸡蛋问题，它必须是请求范围的状态保存/恢复；您需要升级到 Mojarra 2.1.18）

顺便说一句，您嵌套的<h:panelGrid> 毫无意义。我会在这里使用<h:panelGroup>。

另见：

JSTL in JSF2 Facelets... makes sense? - 更好地理解“查看构建时间”与“查看渲染时间”
create table columns dynamically in JSF - 另一个类似的问题

【讨论】：

谢谢 - 看起来不错的信息 - 我会研究视图渲染时间与视图构建时间

【解决方案2】：

为什么在<ui:repeat> 中使用另一个<h:panelGrid>？您可以只使用这样的 div。
而不是

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

使用

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

编辑：

我不认为你可以用<ui:repeat> 做到这一点。请改用<c:forEach>。

首先您应该导入命名空间

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

现在像这样用<c:forEach> 替换<ui:repeat>。

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

【讨论】：

谢谢，这行得通。我将不得不研究 div - 我之前从未使用过该标签
实际上，只有这样的作品。我没有 6 列 - 它基本上跨越页面。这可能没问题，但我也想要设置列数的选项。用 div inline-block 标签可以做到吗？
像这样更改主panelGrid 的columns 属性。 <h:panelGrid id="resourcePanel" columns="#{resourceUpload.resources.size()}" rules="all">.
否 - 我不想将列数设置为资源列表的大小。它可能有几十个甚至几百个项目。我想将其设置为特定大小（例如 6），但我在该外部 panelGrid 上所做的任何事情似乎都不会影响 ui:repeat