p:graphicImage 列表的水平显示及其在 ui:repeat 中的标题答案

【问题标题】：Horizontal display of a list of p:graphicImage and their titles in ui:repeatp:graphicImage 列表的水平显示及其在 ui:repeat 中的标题
【发布时间】：2013-09-15 09:02:56
【问题描述】：

我正在使用标签 ui:repeat 来显示图片列表及其标题。

我的代码是：

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

我想水平显示图片列表，但是使用此代码的图片列表是垂直显示的。

欢迎任何帮助。

【问题讨论】：

您查看生成的 HTML 输出了吗？您究竟希望生成的 HTML 输出看起来如何？然后我们就可以知道如何相应地修改 JSF 代码以获得所需的 HTML 输出。
在生成的 HTML 输出中，我发现了一个
title1 title2
我希望在输出中有这个结构

标签： jsf jsf-2 primefaces

【解决方案1】：

您必须更改 h:panelGrid 和 p:graphicImage 的顺序。因为您使用 size() 作为列数重复创建 h:panelGrid。你的代码变成：

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

【讨论】：

对不起，这是一个错误，但这是另一种方法。由于第一个作品，但它给他带来了一个问题
您的第一个答案没有产生所需的 HTML 输出。
仔细看看。您的第一个答案将所有内容放在相同的 <td> 中，而 OP 希望将它们放在单独的 <td>s 中。您当前的答案完全不正确。
让我们continue this discussion in chat
是的，您可以删除它。只需点击答案下方的“删除”链接即可。

【解决方案2】：

我希望在输出 <table><tbody><tr><td><img1/><title1/></td><td><img2/><title2/></td><img3/><titl‌e3/><td></td></tr></table>
中有这个结构

<h:panelGrid> 内部的<ui:repeat> 不会在物理上生成多个表格单元格。它只会生成一个表格单元格。事实上，<h:panelGrid> 的每个直接子 UI 组件都算作一个表格单元格。 <ui:repeat> 是一个 UI 组件。

您需要<c:forEach>。它是一个标记处理程序，在构建 JSF 组件树期间而不是在生成 HTML 输出期间运行。它在物理上生成多个 JSF 组件，而 <ui:repeat> 在物理上表示一个 JSF 组件，每次生成 HTML 输出时都会重用。

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

（请注意，您需要将图像和文本包裹在 <h:panelGroup> 中以表示单个表格单元格）

或者，如果您坚持使用<ui:repeat>，那么您必须自己写下所需的 HTML 输出。

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

另见：

【讨论】：

@BalusC 谢谢 :)