ui:repeat JSF 2.0 cannot render iterate p:row primefaces

Question

I got a problem here, my system config was Mojarra 2.1.7, Primefaces 3.2 and using Glassfish 3.1+.

before this, i got my code well rendered using this codes:

<p:tabView>
    <p:tab title="Offices Access" >
         <h:outputText value="Access | Offices Name | Offices Code | Parent Offices" style="font-weight: bold;"/>

         <ui:repeat value="#{userBean.officeses}" var="office">
              <h:panelGrid columns="2">
                   <p:selectBooleanCheckbox id="access#{office.officesID}" style="width: 50px;"/>
                   <h:outputLabel for="access#{office.officesID}" value="#{office.officesName} | #{office.officesCode} | #{office.parentOffices}"/>
               </h:panelGrid>
         </ui:repeat>
     </p:tab>
</p:tabView>  

and i find this is generate rather ugly interfaces, so i ran over p:panelGrid from primefaces.
after i write some code and from my expectation it would work, but it DONT :(
this code render the header perfectly, but right after the ui:repeat code, it wouldnt render the p:row and the p:column inside it.

here is the code :

<p:tabView>
    <p:tab title="Offices Access" >
        <p:panelGrid styleClass="centerContent">
             <f:facet name="header">
                 <p:row>
                     <p:column style="font-weight: bold;">Access</p:column>
                     <p:column style="font-weight: bold;">Offices Name</p:column>
                     <p:column style="font-weight: bold;">Offices Code</p:column>
                     <p:column style="font-weight: bold;">Above Level Offices</p:column>
                 </p:row>
            </f:facet>

            <ui:repeat value="#{userBean.officeses}" var="office">
                <p:row id="rowforOffice#{office.officesID}">
                    <p:column><p:selectBooleanCheckbox id="access#{office.officesID}"/></p:column>
                    <p:column><h:outputText value="#{office.officesName}"/></p:column>
                    <p:column><h:outputText value="#{office.officesCode}"/></p:column>
                    <p:column><h:outputText value="#{office.parentOffices}"/></p:column>
                </p:row>
            </ui:repeat>
       </p:panelGrid>
    </p:tab>
</p:tabView>  

am i miss something..?
or it is was a bug..? because i ran over google looking for this kind of code and i found nothing.
Regards,
bLueZ

Answer 1

As to the concrete problem, the <ui:repeat> is a view render time tag. Thus, it's physically present in the JSF component tree and generates its HTML output as many times as it needs to iterate over the value.

However, the <p:panelGrid> expects physically multiple <p:row> or <p:column> children, not a single <ui:repeat> with therein a single <p:row>. In other words, they needs to be prepared during the view build time instead of the view render time.

The JSTL <c:forEach> is a view build time tag. It will generate physically multiple <p:row> components into the JSF component tree and hence the <p:panelGrid> will find solely <p:row> children.

<p:panelGrid styleClass="centerContent">
    <c:forEach items="#{userBean.officeses}" var="office">
        <p:row id="rowforOffice#{office.officesID}">
            <p:column><p:selectBooleanCheckbox id="access#{office.officesID}"/></p:column>
            <p:column><h:outputText value="#{office.officesName}"/></p:column>
            <p:column><h:outputText value="#{office.officesCode}"/></p:column>
            <p:column><h:outputText value="#{office.parentOffices}"/></p:column>
        </p:row>
    </c:forEach>
</p:panelGrid>

Note: this breaks view scoped beans in Mojarra versions older than 2.1.18. If you can't upgrade, then consider a <p:dataTable> instead, as you already found out yourself.

See also:

• JSTL in JSF2 Facelets... makes sense?

Answer 2

Thanks to @Jedrus07 to suggest me to post an answer.

Actually, what i did, was using <p:dataTable/> to make a good display of data. example :

<p:tabView id="tabCustomerView">
    <p:tab title="Fasilitas Nasabah">
                <p:fieldset legend="Detil Fasilitas">
                    <p:dataTable value="#{custViewBean.customerSavingAccounts}"
                                 var="customerSavingAccount"
                                 rowIndexVar="customerSavingAccountRowIndex"
                                 paginator="true"
                                 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                 rows="10"
                                 rowsPerPageTemplate="5,10,15"
                                 paginatorPosition="top">
                        <f:facet name="header">
                            <h:outputText value="Daftar Rekening / Fasilitas Nasabah"/>
                        </f:facet>

                        <p:column headerText="#">
                            <h:outputText value="#{customerSavingAccountRowIndex + 1}"/>
                        </p:column>

                        <p:column headerText="Fasilitas Nasabah">
                            <h:outputText value="#{of:capitalize(customerSavingAccount.customerFacility)}"/>
                        </p:column>

                        <p:column headerText="Saldo Akhir">
                            <h:outputText value="#{customerSavingAccount.lastBalance}">
                                <f:convertNumber type="currency" currencySymbol="#{appBean.appSetting.curDefault.currencySymbol}"/>
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Tanggal Akhir">
                            <h:outputText value="#{customerSavingAccount.lastTransactiondate}">
                                <f:convertDateTime pattern="#{appBean.appSetting.siteFormatdate}"/>
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Suku Bunga">
                            <h:outputText value="#{customerSavingAccount.interest} %"/>
                        </p:column>

                        <p:column headerText="Kolektibilitas">
                            <h:outputText value="#{customerSavingAccount.collectibility}"/>
                        </p:column>

                        <p:column headerText="Account Officer">
                            <h:outputText value="#{of:capitalize(customerSavingAccount.accountOfficer)}"/>
                        </p:column>

                        <p:column headerText="Jumlah Tunggakan">
                            <h:outputText value="#{customerSavingAccount.arrearsAmount}">
                                <f:convertNumber type="currency" currencySymbol="#{appBean.appSetting.curDefault.currencySymbol}"/>
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Jumlah Pembayaran">
                            <h:outputText value="#{customerSavingAccount.totalPayment}">
                                <f:convertNumber type="currency" currencySymbol="#{appBean.appSetting.curDefault.currencySymbol}"/>
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Periode Pembayaran">
                            <h:outputText value="#{customerSavingAccount.termLimit} #{customerSavingAccount.termLimitDesc}"/>
                        </p:column>

                        <p:column headerText="Status">
                            <h:outputText value="#{customerSavingAccount.status}"/>
                        </p:column>
                    </p:dataTable>
                </p:fieldset>
            </p:tab>
</p:tabView>

So, use datatable for nicer looks to display your datas :) Have fun.