0

我正在使用标签 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>

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

欢迎任何帮助。

4

2 回答 2

2

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

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

（请注意，您需要将图像和文本包装在 a<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>

也可以看看：

于 2013-09-12T10:25:01.450 回答
0

您必须更改 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>
于 2013-09-12T09:30:35.240 回答