Пользовательский интерфейс JSF: повторить с рендерингом

Я хочу использовать ui:repeat или любой другой итеративный тег для отображения нескольких компонентов один раз для каждого элемента в списке массивов.

<!-- print multiple mandates -->
        <ui:repeat id="mandates" var="mandate" value="#{taxheadDirectDebit.mandates}">




        <a4j:region id="remittanceDetailsSection"
            rendered="#{(taxheadDirectDebit.accountFinancialInfo.registration.type != 'PREM') or (taxheadDirectDebit.accountFinancialInfo.registration.type != 'VAT')}">


            <!-- Remittance Details -->
            <fieldset><legend class="sub"> <h:outputText
                value="#{msg['remittanceDetails.title']}" /> </legend> 

            <!-- Estimated Liability -->
            <div class="field">
            <div class="label"><label for="allocatedAmount"><h:outputText
                for="estimatedLiability"
                value="#{msg['remittanceDetails.estimatedLiability']}" /> </label><span
                class="requiredFlag">*</span></div>
            <div class="error">
                <rich:message styleClass="errorText" for="estimatedLiability" />
            </div>
            <div class="input">
                <h:inputText id="estimatedLiability" size="30"
                maxlength="11" label="#{msg['registerContractPage1.subTaxNumber']}"
                value="#{taxheadDirectDebit.estimatedLiability}">
                <a4j:ajax event="change" render="remittanceFrequency" />
                </h:inputText>
            </div>

            <br class="clear" />

            </div>

            <!-- Is Seasonal -->
            <div class="field">
            <div class="label"><label for="isSeasonal"> <h:outputText
                for="isSeasonal"
                value="#{msg['remittanceDetails.isTheNatureSeasonal']}" /> </label><span
                class="requiredFlag">*</span></div>
            <div class="error"><rich:message styleClass="errorText"
                for="isSeasonal" /></div>
            <div class="input"><h:selectOneRadio id="isSeasonal"
                label="#{msg['remittanceDetails.isTheNatureSeasonal']}"
                value="#{taxheadDirectDebit.isSeasonal}"
                styleClass="radioLabelTop">
                <ddo:twoOptionSelection />
            <a4j:ajax event="click" render="remittanceFrequency" />
            </h:selectOneRadio></div>

            <br class="clear" />

            </div>

            </fieldset>

        </a4j:region> 

        <!-- Remittance Frequency -->
        <a4j:outputPanel id="remittanceFrequency">

        <div class="field">
            <div class="label"><label for="allocatedAmount"><h:outputText
                for="estimatedLiability"
                value="#{msg['remittanceDetails.estimatedLiability']}" /> </label><span
                class="requiredFlag">*</span></div>
            <div class="error">
                <rich:message styleClass="errorText" for="estimatedLiability" />
            </div>
            <div class="input">
                <h:inputText id="estimatedLiability" size="30"
                maxlength="11" label="#{msg['registerContractPage1.subTaxNumber']}"
                value="#{taxheadDirectDebit.estimatedLiability}">
                <a4j:ajax event="change" render=":remittanceDetails:mandates:remittanceFrequency" />
                </h:inputText>
            </div>

            <br class="clear" />

            </div>

            <fieldset><legend class="sub"> <h:outputText
                value="#{msg['remittanceDetails.frequency']}" /> </legend> 

            <!-- Amount to be Debited -->
            <div class="field">
            <div class="label"><label for="amountEachMonth"><h:outputText
                for="amountEachMonth"
                value="#{msg['remittanceDetails.amountToBeDebited']}" /> </label></div>
            <div class="error"><rich:message styleClass="errorText"
                for="amountEachMonth" /></div>
            <div class="input"><h:inputText id="amountEachMonth" size="30" readOnly="true" 
                maxlength="8" label="#{msg['remittanceDetails.amountToBeDebited']}"
                value="#{mandate.remittanceDetails.amountEachMonth}">
                <a4j:ajax event="change" render="remittanceFrequencyNoDebitedEachMonth"/>
            </h:inputText></div>
            <br class="clear" />
            </div>

            <a4j:outputPanel id="remittanceFrequencyNoDebitedEachMonth">
            <!-- Months -->
            <div class="field">
                <div class="grid1"><h:outputText
                    value="&#160;" />&#160;
                </div>
                <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal == 1}">
                    <div class="grid2"><div align="center">
                        <h:outputText value="#{msg['reviewDetails.reduce']}"/><div align="center"></div>
                    </div></div>
                </rich:panel>
                <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.action == 'AMEND'}">
                    <div class="grid3">
                        <div align="center">
                            <h:outputText value="#{msg['reviewDetails.suspend']}"/><div align="center"></div>
                        </div>
                    </div>
                </rich:panel>
                <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal == 1}">
                    <div class="grid2">
                        <div align="center">
                            <h:outputText value="#{msg['reviewDetails.exclude']}"/><div align="center"></div>
                        </div>
                    </div>
                </rich:panel>
            <br class="clear" />

            <div class="floatleft">

                    <div class="row3">
                        <div class="row1">

                        <!-- January -->
                            <!-- Months Column -->
                            <div class="grid1">
                                <label>
                                    <h:outputText readOnly="true" disabled="true" size="4" value="#{msg['calendar.month.0']}" />
                                </label>
                            </div>
                            <!-- Reduce check box --> 
                            <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal == 1}">
                                <div class="grid2">
                                    <div align="center">
                                        <h:selectBooleanCheckbox 
                                            id="reduce12" 
                                            value="#{mandate.remittanceDetails.remittanceFrequencys[0].reduce}" 
                                            disabled="#{mandate.remittanceDetails.remittanceFrequencys[0].exclude}">
                                            <a4j:ajax event="click" render="remittanceFrequency" />
                                        </h:selectBooleanCheckbox>
                                    </div>
                                </div>
                            </rich:panel>
                            <!-- Suspend check box --> 
                            <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal != 1}">
                                <div class="grid2hidden">
                                    <h:outputText value="&#160;" />
                                </div>
                            </rich:panel>
                            <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.action == 'AMEND'}">
                                <div class="grid3">
                                    <div align="center">
                                    <h:selectBooleanCheckbox 
                                        id="suspend0" 
                                        value="#{mandate.remittanceDetails.remittanceFrequencys[0].suspend}">
                                        <a4j:ajax event="change" />
                                    </h:selectBooleanCheckbox>
                                    </div>
                                </div>
                            </rich:panel>
                            <!-- Exclude check box --> 
                            <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal == 1}">
                                <div class="grid2">
                                    <div align="center">
                                    <h:selectBooleanCheckbox 
                                        id="exclude0" 
                                        value="#{mandate.remittanceDetails.remittanceFrequencys[0].exclude}" 
                                        disabled="#{mandate.remittanceDetails.remittanceFrequencys[0].reduce}">
                                        <a4j:ajax event="change" render="remittanceFrequency" />
                                    </h:selectBooleanCheckbox>
                                    </div>
                                </div>
                            </rich:panel>
                            <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal != 1}">
                                <div class="grid2hidden">
                                    <h:outputText value="&#160;" />
                                </div>
                            </rich:panel>
                            <div class="errorRemittance">
                                <rich:message styleClass="errorText" for="remittanceAmount0"/>
                            </div>
                            <!-- Monthly Amount field --> 
                            <div class="grid5">
                                <h:inputText 
                                    id="remittanceAmount0" size="30" maxlength="8" readOnly="true"
                                    value="#{mandate.remittanceDetails.remittanceFrequencys[0].amount}" 
                                    disabled="#{!mandate.remittanceDetails.remittanceFrequencys[0].reduce}" 
                                    label="#{msg['remittanceDetails.amountToBeDebited']}">
                                    <a4j:ajax event="change" render="remittanceFrequency" />
                                </h:inputText>
                            </div>
                        </div>
                    </div>

                <div class="errorText" font="bold">
                    <rich:message styleClass="errorTextNoPadding" for="continue"/>
                </div>
                </div>

                </div>
                </a4j:outputPanel>
                </fieldset>
            </a4j:outputPanel>

            <rich:message>
                <rich:message for="remittanceFrequency" ajaxRendered="true" />
            </rich:message>

        </ui:repeat>

Я вынул здесь большую часть своего кода, так что могут быть необработанные div и т. Д., Но идея есть.

У меня две проблемы:

  • Вы можете видеть, что некоторые компоненты имеют события изменения, которые отображают другие компоненты на основе идентификатора. Они не работают внутри повтора
  • Я использую веб-поток и добавляю сообщения в контекст сообщения, чтобы теги сообщений могли отображать сообщения проверки, но они также не работают в итерации.

Я пробовал tr:iterator, c:forEach, a4j:repeat, tr:forEach. Я почти уверен, что то, что я пытаюсь сделать, невозможно так, как я пытаюсь это сделать, поэтому, если у кого-то есть опыт в попытке добиться подобного, я был бы признателен за помощь. Я не могу изменить структуру MVC, которую использую, но мог бы использовать jQuery.


person Will    schedule 23.08.2012    source источник


Ответы (1)


Я решил это, переместив область ajax за пределы повтора и просто вызвав рендеринг для всей области. Не красиво, я знаю, но самое быстрое решение, которое я смог найти.

На фронте сообщения я просто добавляю индекс элемента в перебираемом списке в сообщение.

"remittanceDetails:mandates:"+taxhead.getMandates().indexOF(mandate)+":remittanceAmount" + frequency.getMonth().getCode()

Об остальном позаботится JSF.

person Will    schedule 24.08.2012