Los componentes están con la misma identificación dentro de la interfaz de usuario: repetir
Desafortunadamente, primefaces accordionPanel no funciona bien en la versión 2.2.1 si está intentando crear pestañas dinámicamente. Este es mi caso, necesito crear acordeones si el usuario hace clic en un ícono de agregar y eliminar si hace clic en el ícono de x. No hay problema, he creado mi propio componente compuesto, como puede ver aquí:
<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>
Funciona bien, pero tengo algunas necesidades específicas ... El contenido de la pestaña de acordeón es una selección y una tabla dinámica con un campo de entrada y un control de giro (creado de nuevo por mí), puede ver la interfaz de usuario aquí:
Cuando el usuario inserta valores en los giradores, la etiqueta "Total das parcelas" debería actualizarse, ¡pero solo se actualiza cuando el diálogo solo tiene una pestaña de acordeón! Viendo el código html generado, he visto que los giradores en diferentes pestañas de acordeón son iguales. Probablemente esta es la razón por la que no puedo actualizar los valores. Aquí está el código de este 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>
En esta imagen puede ver lo que está sucediendo, la identificación del componente dentro de las interfaces de datos de prime se no se anexa con ui: índice de repetición:
¿¿¿Como puedó resolver esté problema???