Jsf 在ui中水平显示p:graphicImage列表及其标题：重复

我正在使用TagUI: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>  

我想水平显示图片列表，但带有此代码的图片列表是垂直显示的

---

欢迎任何帮助

必须更改h:panelGrid和p:graphicImage的顺序。因为您重复了h:panelGrid的创建，其中size（）作为列数。您的代码变成：

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

---

我希望在输出中具有此结构

内部的

不会实际生成多个表格单元格。它将只生成一个表格单元格。实际上，

的每个直接子UI组件都算作一个表单元格。

是一个UI组件

您需要

。它是一个标记处理程序，在构建JSF组件树期间运行，而不是在生成HTML输出期间运行。它在物理上生成多个JSF组件，这与

相反，后者在物理上表示一个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>

（请注意，您需要将图像和文本包装在

中以表示单个表格单元格）

或者，如果您坚持使用

，那么您必须自己写下所需的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>

另见：

---

您是否查看了生成的HTML输出？您希望生成的HTML输出看起来如何？然后我们可以告诉如何相应地修改JSF代码，以获得所需的HTML输出。在生成的HTML输出中，我发现了一个标题1标题2，我希望在输出中使用此结构对不起，这是一个错误，但这是另一种方法。因为第一个答案有效，但它给他带来了一个问题。你的第一个答案并没有产生所需的HTML输出。仔细看看。您的第一个答案将所有内容放在同一个

中，而OP希望它们放在单独的

中。您当前的答案完全不正确。请让我们确定，您可以删除它。只需单击答案下方的“删除”链接。@BalusC谢谢：）