I componenti sono con lo stesso id dentro ui: repeat

Question

Sfortunatamente, primefaces accordionPanel non funziona bene nella versione 2.2.1 se si sta tentando di creare schede in modo dinamico. Questo è il mio caso, ho bisogno di creare fisarmoniche se l'utente fa clic su un'icona Aggiungi e rimuove se fa clic sull'icona x. Nessun problema, ho creato la mia componente composito, come si può vedere qui:

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

funziona benissimo, ma ho alcune specifiche esigenze ... Il contenuto della scheda fisarmonica è un po 'di selezione e una tabella dinamica con un'inputField ed un filatore (creato da me di nuovo), è possibile vedere l'interfaccia utente qui:

Quando i valori di inserimento degli utenti in filatori, l'etichetta di "Total das parcelas" dovrebbe aggiornare, ma semplicemente aggiorna quando la finestra di dialogo ha solo una scheda fisarmonica! Guardando il codice html generato ho visto che i filatori di una scheda fisarmonica diversa sono uguali! Probabilmente questo è il motivo per cui non posso aggiornare i valori. Ecco il codice di questa finestra di dialogo:

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

In questa immagine è possibile vedere ciò che sta accadendo, id del componente all'interno primefaces DataTable non sono apposte con ui: Indice di ripetizione:

Come posso risolvere questo problema ???

Answer 1

Questo è un bug Mojarra che si manifesta quando si nidifica un componente UIData all'interno di uno UIRepeat. L'ho mai segnalato come issue 1830. Non è stato corretto finora e funziona come previsto in MyFaces. Il UIRepeat è rotto in molti modi in Mojarra, ma funziona perfettamente in MyFaces.

Se si desidera/è necessario attenersi a Mojarra e quindi non è possibile sostituirlo con MyFaces, è consigliabile sostituire lo UIRepeat con un componente completo UIData completo. Tomahawk's<t:dataList> ad esempio non genera alcun markup aggiuntivo ed è una buona sostituzione di <ui:repeat>. Oppure è possibile utilizzare di PrimeFaces e nascondere i punti elenco con alcuni CSS list-style-type: none.

Aggiornamento: il problema segnalato è stato risolto in Mojarra 2.1.12 e 2.2.0-m06. Quindi, se puoi, basta aggiornare almeno a quella versione.