Componentes estão com o mesmo id dentro de ui: repeat
Infelizmente, primefaces accordionPanel não funciona bem na versão 2.2.1 se você está tentando criar abas dinamicamente. Este é o meu caso, preciso criar acordeões se o usuário clicar em um ícone de adição e removê-lo se ele clicar no ícone x. Não tem problema, eu criei meu próprio componente composto, como você pode ver aqui:
<code><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> </code>
Ele funciona bem, mas eu tenho algumas necessidades específicas ... O conteúdo da aba acordeão é uma tabela de seleção e dinâmica com um inputField e um spinner (criados por mim novamente), você pode ver a interface do usuário aqui:
Quando o usuário inserir valores em spinners, o rótulo "Total das parcelas" deverá ser atualizado, mas será atualizado quando a caixa de diálogo tiver apenas uma guia de acordeão! Olhando para código html gerado eu vi que os spinners na aba acordeão diferentes são iguais! Provavelmente esta é a razão pela qual não posso atualizar valores. Aqui está o código deste diálogo:
<code><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> </code>
Nesta imagem você pode ver o que está acontecendo, o id do componente dentro da tabela de dados primfaces não é anexado com o índice ui: repeat:
Como posso resolver esse problema ???