Вопрос по jsf-2, uirepeat, primefaces, composite-component – Компоненты с одинаковым идентификатором внутри пользовательского интерфейса: повторить

5

К сожалению, Primefaces accordionPanel не работает хорошо в версии 2.2.1, если вы пытаетесь создавать вкладки динамически. Это мой случай, мне нужно создавать аккордеоны, если пользователь нажимает на значок добавления, и удалять, если он нажимает на значок x. Нет проблем, я создал свой собственный составной компонент, как вы можете видеть здесь:

<c:interface>
    <c:attribute name="titulo" default="" required="false" />
    <c:attribute name="renderizar" default="true" required="false" />
    <c:attribute name="width" required="false" default="300"/>
    <c:facet name="extra" required="false" />
</c:interface>

<c:implementation>
    <h:outputStylesheet library="css" name="hrgiAccordion.css" target="head" />
    <h:outputStylesheet library="css" name="clearfix.css" target="head" />
    <h:outputScript library="js" name="hrgiAccordion.js" target="head" />
    <h:panelGroup layout="block" rendered="#{cc.attrs.renderizar}"
    styleClass="hrgi-accordion clearfix" style="width: #{cc.attrs.width}px;">
        <div class="hrgi-cabecalho-accordion clearfix"
            onclick="abrirAccordion(this)">
            <h:outputLabel value="#{cc.attrs.titulo}" />
            <c:renderFacet name="extra" required="false"/>
        </div>
        <h:panelGroup layout="block" class="hrgi-conteudo-accordion clearfix">
            <c:insertChildren />
        </h:panelGroup>
    </h:panelGroup>
</c:implementation>

Он работает нормально, но у меня есть некоторые специфические потребности ... Содержимое вкладки аккордеона - это select и динамическая таблица с inputField и спиннером (созданным мной снова), вы можете увидеть пользовательский интерфейс здесь:

Popup forma de pagamento

Когда пользователь вставляет значения в счетчики, появляется метка "Total das parcelas" должен обновиться, но он просто обновляется, когда в диалоге есть только одна вкладка аккордеона! Глядя на сгенерированный HTML-код, я увидел, что счетчики в разной вкладке аккордеона равны! Возможно, это причина, по которой я не могу обновлять значения. Вот код этого диалога:

<ui:composition template="../templates/popupSubmit.xhtml">
<ui:param name="titulo" value="#{vendaMsg['popup.forma_pagamento.titulo']}"/>
<ui:param name="popup" value="#{modeloPopupFormaPagamento}"/>
<ui:param name="controladorPopup" value="#{controladorPopupFormaPagamento}"/>
<ui:define name="cabecalho">
    <h:panelGroup id="cabecalhoValores" binding="#{cabecalhoValores}" layout="block">
        <h:outputLabel value="#{vendaMsg['popup.forma_pagamento.total_prevenda']}" />
        <h:outputLabel value="#{preVendaBean.valorLiquido}">
            <f:convertNumber currencySymbol="R$" maxFractionDigits="2"
                             minFractionDigits="2" type="currency" currencyCode="BRL"/>
        </h:outputLabel>
        <hrgi:separador/>
        <h:outputLabel value="#{vendaMsg['popup.forma_pagamento.total_parcelas']}" />
        <h:outputLabel value="#{controladorPopupFormaPagamento.calcularTotalParcelas()}">
            <f:convertNumber currencySymbol="R$" maxFractionDigits="2"
                             minFractionDigits="2" type="currency" currencyCode="BRL"/>
        </h:outputLabel>
    </h:panelGroup>
</ui:define>
<ui:define name="conteudo">
    <h:panelGroup layout="block" styleClass="clearfix hrgi-div-form">
        <h:panelGroup id="painelFormasDePagamento" binding="#{painelFormasDePagamento}" layout="block">
            <ui:repeat id="repeticao" var="formaPagamento" value="#{modeloPopupFormaPagamento.formasDePagamento}">
                <hrgi:accordion titulo="#{vendaMsg['popup.forma_pagamento.aba_acordeon.titulo']}" width="380">
                    <f:facet name="extra">
                        <p:commandLink action="#{controladorPopupFormaPagamento.removerForma(formaPagamento)}"                                           
                                       update=":#{painelFormasDePagamento.clientId}" global="false">
                            <h:graphicImage library="img" name="remover.png"/>
                        </p:commandLink>
                    </f:facet>
                    <h:panelGroup layout="block" class="clearfix">
                        <h:panelGroup id="painelSelecaoForma" layout="block">
                            <h:outputLabel value="#{vendaMsg['popup.forma_pagamento.forma_pagamento']}"/>
                            <h:selectOneMenu value="#{formaPagamento.idFormaPagamento}"                                                                 valueChangeListener="#{controladorPopupFormaPagamento.processarMudancaFormaPagamento}">
                                <f:selectItems value="#{selectItemFormasPagamento.itens}"/>
                                <f:attribute value="#{formaPagamento}" name="formaPagamento"/>
                                <f:ajax event="change" render="painelSelecaoForma painelParcelasFormaPagamento" execute="painelSelecaoForma"/>
                            </h:selectOneMenu>
                            <h:outputLabel value="#{vendaMsg['popup.forma_pagamento.plano_pagamento']}"                                       />
                            <h:selectOneMenu value="#{formaPagamento.idPlanoPagamento}"                                        valueChangeListener="#{controladorPopupFormaPagamento.processarMudancaPlanoPagamento}">
                                <f:selectItems value="#{controladorPopupFormaPagamento.recuperarCarregador(formaPagamento).itens}"/>
                                <f:attribute value="#{formaPagamento}" name="formaPagamento"/>
                                <f:ajax event="change" render="painelParcelasFormaPagamento"/>
                            </h:selectOneMenu>
                        </h:panelGroup>
                        <h:panelGroup id="painelParcelasFormaPagamento" layout="block">
                            <p:dataTable id="tabela" value="#{formaPagamento.parcelas}" var="parcela"
                                         emptyMessage="#{msgGerais['gerais.sem_dados']}"
                                         scrollable="#{formaPagamento.parcelas.size()>2}"
                                         height="76">
                                <p:column headerText="#{vendaMsg['popup.forma_pagamento.tabela.numero_parcela']}">
                                    <h:outputText value="#{formaPagamento.parcelas.indexOf(parcela)+1}"/>
                                </p:column>
                                <p:column headerText="#{vendaMsg['popup.forma_pagamento.tabela.vencimento_parcela']}">
                                    <hrgi:editableDate value="#{parcela.dataVencimento}" editable="true"/>
                                </p:column>
                                <p:column headerText="#{vendaMsg['popup.forma_pagamento.tabela.valor_parcela']}">
                                    <hrgi:spinner id="valor"
                                            dinheiro="true" fator="0.01" local="pt-BR"
                                            value="#{parcela.valor}">
                                        <f:ajax event="change" execute="@form"
                                                render=":#{cabecalhoValores.clientId}"/>
                                        <f:convertNumber currencySymbol="R$" maxFractionDigits="2"
                                                         minFractionDigits="2" type="currency" currencyCode="BRL"
                                                         for="input"/>
                                    </hrgi:spinner>
                                </p:column>
                            </p:dataTable>
                        </h:panelGroup>
                    </h:panelGroup>
                </hrgi:accordion>
            </ui:repeat>
        </h:panelGroup>
        <p:commandLink immediate="true" action="#{controladorPopupFormaPagamento.adicionarForma}"
                       update="painelFormasDePagamento" global="false">
            <h:graphicImage library="img" name="adicionar_48.png"/>
        </p:commandLink>
    </h:panelGroup>
</ui:define>
</ui:composition>

На этом изображении вы можете видеть, что происходит, идентификатор компонента внутри простых данных, которые не могут быть добавлены с помощью ui: repeat index:

html inspector

Как я могу решить эту проблему???

Ваш Ответ

1   ответ
7

UIData компонент внутриUIRepeat, Я когда-либо сообщал об этом каквыпуск 1830, Пока он не исправлен и работает как положено вMyFaces,UIRepeat во Мохарре во многих отношениях нарушается, но в MyFaces прекрасно работает.

Если вы хотите / должны придерживаться Mojarra и, следовательно, не можете заменить его MyFaces, рассмотрите возможность заменыUIRepeat достойнымUIData основанный компонент.Томагавк & APOS; s <t:dataList> например, не генерирует никакой дополнительной разметки и является хорошим<ui:repeat> замена. Или вы можете использовать PrimeFaces & apos;<p:dataList> и скрыть список маркеров с помощью CSSlist-style-type: none.

Update: сообщаемая проблема исправлена в Mojarra 2.1.12 и 2.2.0-m06. Так что, если вы можете, просто обновите хотя бы до этой версии.

Ничто не идеально на 100%, но команда разработчиков MyFaces хорошо справляется с обработкой отчетов об ошибках. Ведущий разработчик MyFaces также активен здесь на SO.
Я заменил на Myfaces. Надеюсь, у него нет странных ошибок ... brevleq

Похожие вопросы