[RESOLVIDO] Primefaces (Pessoa Física e Jurídica renderizando CPF e CNPJ respectivamente)

O problema que estou passando é o mais besta possível, mas já está enxendo o saco :confused: Selecionando um dos radios da Label Pessoa ele renderiza CPF para Pessoa Física e CNPJ para Pessoa Jurídica. Porém ele monta a label errado, segue o código e mais abaixo a imagem de como fica renderizado errado. :confused:

<h:form id="frmCliente">
                    <p:fieldset legend="Gerenciamento de Clientes" toggleable="true">
                        <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />

                        <h:panelGrid columns="4" id="pnCliente" style="font-family: Verdana;" >

                            <h:outputLabel id="lbNome" value="*Nome:" for="nome"
                                style="float: right;" />
                            <p:inputText id="nome" size="50"
                                value="#{clienteBean.cliente.nome}" required="true"
                                requiredMessage="Campo [Nome] é obrigatório." />

                            <h:outputLabel id="lbInscEstadual" value="Inscrição Estadual:" for="inscricaoest"
                                style="float: right;" />
                            <p:inputText id="inscricaoest" size="20"
                                value="#{clienteBean.cliente.inscricaoest}" />

                            <h:outputLabel id="lbLogradouro" value="Logradouro:" for="logradouro"
                                style="float: right;" />
                            <p:inputText id="logradouro" size="50"
                                value="#{clienteBean.cliente.endereco.logradouro}" />

                            <h:outputLabel id="lbComplemento" value="Complemento:" for="complemento"
                                style="float: right;" />
                            <p:inputText id="complemento" size="50"
                                value="#{clienteBean.cliente.endereco.complemento}" />

                            <h:outputLabel id="lbBairro" value="Bairro:" for="bairro"
                                style="float: right;" />
                            <p:inputText id="bairro" size="20"
                                value="#{clienteBean.cliente.endereco.bairro}" />

                            <h:outputLabel id="lbNumero" value="Número:" for="numero"
                                style="float: right;" />
                            <p:inputText id="numero" size="20"
                                value="#{clienteBean.cliente.endereco.numero}" />

                            <h:outputLabel id="lbCidade" value="Cidade:" for="cidade"
                                style="float: right;" />
                            <p:inputText id="cidade" size="20"
                                value="#{clienteBean.cliente.endereco.cidade}" />

                            <h:outputLabel id="lbEstado" value="Estado:" for="estado"
                                style="float: right;" />
                            <p:inputText id="estado" size="20"
                                value="#{clienteBean.cliente.endereco.estado}" />

                            <h:outputLabel id="lbPais" value="País:" for="pais"
                                style="float: right;" />
                            <p:inputText id="pais" size="20"
                                value="#{clienteBean.cliente.endereco.pais}" />

                            <h:outputLabel id="lbTelefone1" value="Telefone 1:" for="telefone1"
                                style="float: right;" />
                            <p:inputMask mask="(999) 9999-9999" id="telefone1" size="20"
                                value="#{clienteBean.cliente.endereco.telefone1}" />

                            <h:outputLabel id="lbTelefone2" value="Telefone 2:" for="telefone2"
                                style="float: right;" />
                            <p:inputMask mask="(999) 9999-9999" id="telefone2" size="20"
                                value="#{clienteBean.cliente.endereco.telefone2}" />

                            <h:outputLabel id="lbCelular" value="Celular:" for="celular"
                                style="float: right;"  />
                            <p:inputMask mask="(999) 9999-9999" id="celular" size="20"
                                value="#{clienteBean.cliente.endereco.celular}" />

                            <h:outputLabel id="lbPessoa" value="*Pessoa: " for="pessoa"
                                style="float: right;" />
                            <h:selectOneRadio id="pessoa" value="#{clienteBean.cliente.pessoa}" required="true"
                                requiredMessage="Campo [Pessoa] é obrigatório." >
                                <f:selectItem itemLabel="Jurídica" itemValue="Jurídica" />
                                <f:selectItem itemLabel="Física" itemValue="Física" />
                                <p:ajax event="change" update="pnlPessoa" process="@this"/> 
                            </h:selectOneRadio>

                          <p:outputPanel id="pnlPessoa" >

                            <h:outputLabel id="lbCpf" value="CPF:" for="cpf" rendered="#{clienteBean.cliente.pessoa=='Física'}"
                                style="float: right;" />
                            <p:inputMask mask="999.999.999-99" id="cpf" size="25" rendered="#{clienteBean.cliente.pessoa=='Física'}"
                                value="#{clienteBean.cliente.cpf}" />

                            <h:outputLabel id="lbCnpj" value="CNPJ:" for="cnpj" rendered="#{clienteBean.cliente.pessoa=='Jurídica'}"
                                style="float: right;" /> 
                            <p:inputMask mask="99.999.999/9999-99" id="cnpj" size="25" rendered="#{clienteBean.cliente.pessoa=='Jurídica'}"
                                value="#{clienteBean.cliente.cnpj}" />

                          </p:outputPanel>

                          <h:inputHidden id="id_cliente"
                                value="#{clienteBean.cliente.id_cliente}" />

                        </h:panelGrid>

                        <h:panelGrid columns="3"
                            style="font-size: 12px; font-weight: bold;" >
                            <p:commandButton value="Gravar" action="#{clienteBean.gravar()}"
                                update="frmCliente, messages, dtClientes" />
                            <p:commandButton value="Limpar" update="frmCliente"
                                process="@this" immediate="true"
                                action="#{clienteBean.limpar()}" />
                        </h:panelGrid>

                        <br></br>

                        <p:spacer height="10" />

                        <p:dataTable id="dtClientes"
                            emptyMessage="Nenhum registro encontrado."
                            value="#{clienteBean.listCliente}" var="c"
                            style="text-align: center; font-size: 12px;" paginator="true"
                            rows="10"
                            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                            rowsPerPageTemplate="10,20,50">

                            <f:facet name="header">
                                <h:outputText value="Registro de Clientes" />
                            </f:facet>

                            <p:column id="nomeColumn" filterBy="#{c.nome}"
                                headerText="Filtrar por nome" filterMatchMode="contains">
                                <f:facet name="header">
                                    <h:outputText value="Nome" />
                                </f:facet>
                                <h:outputText value="#{c.nome}" />
                            </p:column>

                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="CPF" />
                                </f:facet>
                                <h:outputText value="#{c.cpf}" />
                            </p:column>

                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="CNPJ" />
                                </f:facet>
                                <h:outputText value="#{c.cnpj}" />
                            </p:column>

                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Ações" />
                                </f:facet>
                                <h:commandLink>
                                    <h:graphicImage title="Editar" url="images/edite.png"
                                        value="Editar" height="16px" width="16px" />                                    
                                        <p:ajax event="click"
                                        listener="#{clienteBean.preparaEditar(c)}" update="@form" />
                                </h:commandLink>
                                <t></t>
                                <p:commandLink actionListener="#{clienteBean.prepararExcluir(c)}"
                                    onclick="confirm.show()" immediate="true">
                                    <h:graphicImage value="images/delete.png" alt="Excluir"
                                        title="Excluir" style="border: none" height="16px"
                                        width="16px" />
                                </p:commandLink>
                            </p:column>

                            <f:facet name="footer">
                                <h:outputText
                                    value="Há um total de #{clienteBean.count} Cliente(s) cadastrado(s) no sistema." />
                            </f:facet>
                        </p:dataTable>
                    </p:fieldset>
 </h:form>

Imagem de como fica errado a renderização do CPF/CNPJ :confused:

É só retirar o código "style=“float: right;” da linha 80 e 85.

E colocar o “float: right” no outputPanel.


...

 <p:outputPanel id="pnlPessoa"  style="float: right;">  
  
        <h:outputLabel id="lbCpf" value="CPF:" for="cpf" rendered="#{clienteBean.cliente.pessoa=='Física'}"  />  
        <p:inputMask mask="999.999.999-99" id="cpf" size="25" rendered="#{clienteBean.cliente.pessoa=='Física'}"  value="#{clienteBean.cliente.cpf}" />  
  
        <h:outputLabel id="lbCnpj" value="CNPJ:" for="cnpj" rendered="#{clienteBean.cliente.pessoa=='Jurídica'}" />   
        <p:inputMask mask="99.999.999/9999-99" id="cnpj" size="25" rendered="#{clienteBean.cliente.pessoa=='Jurídica'}"  value="#{clienteBean.cliente.cnpj}" />  
  
</p:outputPanel>    
  
...

Obrigado pela resposta. Não tem como testar agora pois estou no trabalho! Mais a noite testo e respondo aqui! :slight_smile:

gustavo_souza sua dica resolveu meu problema, mas tem uma coisa ainda, está desalinhado.

Eu estava com o problema que ao clicar na Pessoa Jurídica ou Física para renderizar a Label CPF ou CNPJ respectivamente ele apava todo o formulario do Cliente, porque eu dava update no “frmCliente”, então uma pessoa me indicou colocar os campos CPF e CNPJ em um <p:outputLabel id=“pnlPessoa”>, e dar update apenas no pnlPessoa, assim o formulário ia se manter, ok, funcionou. O Problema agora é que esse outputLabel cria um espaço como mostra a imagem acima, e na hora que clico em uma das radios para renderizar, ele renderiza errado, porque o campos é renderizado dentro desse painel. Testei outros componentes e dá na mesma. Não tem um painel que não faz criar esse espaço? Ou algum outro componente que tenha um id e sirva para eu atualizar apenas esses campos? Olha a imagem abaixo como fica após clicar :frowning:

Resolvi meu problema. Quebrei cabeça e consegui. Criei dois painéis, um para a label que contém o nome, e o outro para a construção do inputmask, e dei update nos dois :slight_smile:

            <h:outputLabel id="lbPessoa" value="*Pessoa: " for="pessoa"
 							style="float: right;" />
							<h:selectOneRadio id="pessoa"
								value="#{clienteBean.cliente.pessoa}" required="true"
								requiredMessage="Campo [Pessoa] é obrigatório.">
								<f:selectItem itemLabel="Jurídica" itemValue="Jurídica" />
								<f:selectItem itemLabel="Física" itemValue="Física" />
								<p:ajax event="change" update="pnlPessoa, pnlCpfOUCnpj"
									process="@this" />
							</h:selectOneRadio>

							<p:outputPanel id="pnlPessoa" style="float: right;">
							
								<h:outputLabel id="lbCpf" value="CPF:" for="cpf"
									rendered="#{clienteBean.cliente.pessoa=='Física'}" />
								<h:outputLabel id="lbCnpj" value="CNPJ:" for="cnpj"
									rendered="#{clienteBean.cliente.pessoa=='Jurídica'}" />
									
							</p:outputPanel>

							<p:outputPanel id="pnlCpfOUCnpj" style="float: left;">
							
								<p:inputMask mask="999.999.999-99" id="cpf" size="25"
									rendered="#{clienteBean.cliente.pessoa=='Física'}"
									value="#{clienteBean.cliente.cpf}" style="float: right;" />

								<p:inputMask mask="99.999.999/9999-99" id="cnpj" size="25"
									rendered="#{clienteBean.cliente.pessoa=='Jurídica'}"
									value="#{clienteBean.cliente.cnpj}" style="float: right;" />
									
							</p:outputPanel>

Quem bom Ronnie,

Você não precisa criar um outputLabel para isso, é só dar um update direto nos ids do componente, nesse caso: “lbCpf” e “lbCnp”.

...
<p:ajax event="change" update="lbCpf lbCnp" process="@this"/>   
...

Eu havia tentado isso antes, mas ele não faz update nessas labels :frowning:
Então vou deixar assim mesmo, Obrigado pela ajuda gustavo_souza

Você tirando o outputPanel em volta do componente, deixando o componente solto dentro do form , o update pelo id funciona de boa, mas enfim, que bom que deu certo !