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>物理的に複数のテーブル セルを生成しません。表のセルを 1 つだけ生成します。実際、 の直接の子 UI コンポーネントはそれぞれ<h:panelGrid>、1 つのテーブル セルとしてカウントされます。は<ui:repeat>UI コンポーネントです。

<c:forEach>代わりに必要です。これはタグハンドラであり、HTML 出力の生成中ではなく、JSF コンポーネント ツリーの構築中に実行されます。これは物理的に複数の JSF コンポーネントを生成しますが、<ui:repeat>は HTML 出力の生成中に毎回再利用される物理的に 1 つの JSF コンポーネントを表します。

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

以下も参照してください。

于 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 に答える