Discussoes de Programacao e Tecnologia

Mascara JSF não aparece quando renderiza o Objeto [RESOLVIDO]

5 respostas
R
rlether

Olá pessoal.

Tenho uma pagina de cadastro de pessoa que pode ser Fisica, Juridica e Internacional.
Para cada um desses tipos tenho um campo especifico que é reenderizado conforme a escolha do usuario e neles configurei o meioMask para formatar o campos para CPF e CNPJ e Internacional (Que não precisa de mascara). Porem quando eu reendereizo o objeto para mostrar o Label e o campo correspondente a mascara não aparece. Como default deixei como PJ e a mascara de CNPJ aparece e quando eu seleciona para qualquer outro tipo a mascara já nao aparece mais…

Utilizo JSF 1.2 e RichFaces 3.2.2 + meioMask para as mascaras.

Ai vai minha apagina:

<?xml version="1.0" encoding="ISO-8859-1"?>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
	xmlns      = "http://www.w3.org/1999/xhtml"
	xmlns:ui   = "http://java.sun.com/jsf/facelets"
	xmlns:h    = "http://java.sun.com/jsf/html"
	xmlns:f    = "http://java.sun.com/jsf/core"
	xmlns:a4j  = "http://richfaces.org/a4j"
	xmlns:rich = "http://richfaces.org/rich"
	template   = "/templates/common.xhtml">
	
	<ui:param name="title_tela" value=":: #{msg.alteracao} #{msg.pessoa} ::" />
	
	<ui:define name="formulario">
		<h:form id="pessoaCadastroForm">
		
		<h:panelGrid id="panelInfGeral" columns="2" columnClasses="titInfL,infL">
		
			<h:outputText  value="#{msg.codigo}:" />
      		<h:inputText label="#{msg.codigo}" id="codPessoa" readonly="true"  size="20" value="#{pessoaMB.pessoa.codPessoa}" />
      		
			<h:outputText  value="#{msg.razao}:" />
      		<h:inputText label="#{msg.razao}" id="razaoSocial" size="60" maxlength="100" required="true" value="#{pessoaMB.pessoa.razaoSocial}" onchange="this.value = this.value.toUpperCase();" />

			<h:outputText  value="#{msg.nome} #{msg.fantasia}:" />
      		<h:inputText label="#{msg.nome} #{msg.fantasia}" id="nomeFantasia" size="60" maxlength="100" required="true" value="#{pessoaMB.pessoa.nomeFantasia}" onchange="this.value = this.value.toUpperCase();" />
      		
      		<h:outputText  value="#{msg.tipo}:" />
      		<h:panelGroup>
	      		<h:selectOneMenu id="tipo1Pessoa" value="#{pessoaMB.pessoa.tipo}" >
		  			<f:selectItems value="#{menuMB.listaTipo}" />
		  		</h:selectOneMenu>
		  		
	      		<h:selectOneMenu id="tipo2Pessoa" value="#{pessoaMB.tipo}" >
		  			<f:selectItem itemValue="F" itemLabel="Fisica"  />
		  			<f:selectItem itemValue="J" itemLabel="Juridica"  />
		  			<f:selectItem itemValue="I" itemLabel="Internacional"  />
		  			<a4j:support event="onchange"
		  						 ajaxSingle="true"
                 				 reRender="panelF1,panelF2,panelJ1,panelJ2,panelJ3,panelJ4,panelI1,panelI2,pfJq,pjJq" />  
		  		</h:selectOneMenu>
		  		
      		</h:panelGroup>
      		
			<a4j:outputPanel id="panelF1">
				<h:panelGroup rendered="#{pessoaMB.tipo == 'F'}" >
   					<h:outputText  value="#{msg.cpf}: " />
   				</h:panelGroup>
   			</a4j:outputPanel>
   			
			<a4j:outputPanel id="panelF2">
				<h:panelGroup rendered="#{pessoaMB.tipo == 'F'}" >
   					<h:inputText label="#{msg.cpf}" id="pf" size="20" maxlength="20" value="#{pessoaMB.pessoa.documento1}" converter="converterCPF"/>
   				</h:panelGroup>
   			</a4j:outputPanel>

			<a4j:outputPanel id="panelJ1">
				<h:panelGroup rendered="#{pessoaMB.tipo == 'J'}" >
   					<h:outputText  value="#{msg.cnpj}: " id="pjOut" />
   				</h:panelGroup>
   			</a4j:outputPanel>
   			
			<a4j:outputPanel id="panelJ2">
				<h:panelGroup rendered="#{pessoaMB.tipo == 'J'}" >
   					<h:inputText label="#{msg.cnpj}" id="pj" size="20" maxlength="20" value="#{pessoaMB.pessoa.documento1}" converter="converterCNPJ" />
   				</h:panelGroup>
   			</a4j:outputPanel>
   			
			<a4j:outputPanel id="panelJ3">
				<h:panelGroup rendered="#{pessoaMB.tipo == 'J'}" >
   					<h:outputText  value="#{msg.inscricao} #{msg.estadual}:" />
   				</h:panelGroup>
   			</a4j:outputPanel>
   			
			<a4j:outputPanel id="panelJ4">
				<h:panelGroup rendered="#{pessoaMB.tipo == 'J'}" >
   					<h:inputText label="#{msg.inscricao} #{msg.estadual}" id="pjIns" size="20" maxlength="20" value="#{pessoaMB.pessoa.documento2}" />
   				</h:panelGroup>
   			</a4j:outputPanel>
   			
			<a4j:outputPanel id="panelI1">
				<h:panelGroup rendered="#{pessoaMB.tipo == 'I'}" >   			
   					<h:outputText  value="#{msg.documento}:" />
   				</h:panelGroup>
   			</a4j:outputPanel>
   			
			<a4j:outputPanel id="panelI2">
				<h:panelGroup rendered="#{pessoaMB.tipo == 'I'}" >   			
   					<h:inputText label="#{msg.documento}" id="pInt" size="20" maxlength="20" value="#{pessoaMB.pessoa.documento1}" onchange="this.value = this.value.toUpperCase();" />
   				</h:panelGroup>
   			</a4j:outputPanel>
      		
		</h:panelGrid>
		
		<rich:jQuery id="pfJq" selector="#pf" query="setMask({mask: '[CPF removido]'})" rendered="#{pessoaMB.tipo == 'F'}" />
		<rich:jQuery id="pjJq" selector="#pj" query="setMask({mask: '99.999.999/9999-99'})" rendered="#{pessoaMB.tipo == 'J'}" />
		
		<rich:spacer width="100%" height="7px"/>
		<rich:separator height="3px" width="100%"/>
		<rich:spacer width="100%" height="7px"/>
		
		</h:form>
	</ui:define>
	
</ui:composition>

Alguem tem alguma ideia ?

Obrigado,
Rodrigo

Alura POO: o que é programação orientada a objetos? Aprenda os conceitos básicos da programação orientada a objetos, como classes, objetos, herança, encapsulamento e polimorfismo, com exemplos.

5 Respostas

P
Puka

Use um conversor único.

package jsf.converter;

import java.text.ParseException;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.ConverterException;
import javax.swing.text.MaskFormatter;


public class CpfCnpjConverter implements Converter {
   // FIELDS
   public static final String CONVERTER_ID = "jsf.CpfCnpj";

   // CONSTRUCTORS
   public CpfCnpjConverter() {
   }

   // METHODS
   public Object getAsObject(FacesContext facesContext, UIComponent uiComponent, String value) {
      if (facesContext == null)
         throw new NullPointerException("facesContext");
      if (uiComponent == null)
         throw new NullPointerException("uiComponent");
      if (value != null) {
         value = value.trim();
         if (value.length() > 0) {
            return value;
         }
      }
      return "";
   }

   public String getAsString(FacesContext facesContext, UIComponent uiComponent, Object value) {
      if (facesContext == null)
         throw new NullPointerException("facesContext");
      if (uiComponent == null)
         throw new NullPointerException("uiComponent");
      if ((value == null) || (((String) value).trim().equals(""))) {
         return "";
      }
      if (value instanceof String) {
         String result = ((String) value).trim();
         result = result.replaceAll("[^0-9]", "");//retira tudo que nao é número
         MaskFormatter a;
         try {
            if (result.length() > 9) {
               if (result.length() == 11) {
                  // Formato CPF:. [CPF removido].
                  a = new MaskFormatter("###.###.###-##");
               } else {
                  // Formato CNPJ:. 00.000.000/0000-00.
                  a = new MaskFormatter("##.###.###/####-##");
               }
            } else {
               return result;
            }
            a.setValueContainsLiteralCharacters(false);
            return a.valueToString(result);
         } catch (ParseException e1) {
            throw new ConverterException("erro de conversão");
         }
      }
      return "";
   }
}
marcos4ft
marcos4ft

Ja precisei fazer algo parecido utilizando jQuery, veja se te ajuda:

<h:selectOneMenu binding="#{empresaMB.cnpjCpfCei}" id="rdEmpresaCpfCnpjCei" styleClass="campoObrigatorio" >
         <f:selectItem id="siEscolha" itemLabel="Escolha" itemValue="Esc" />
         <f:selectItem id="siCnpj" itemLabel="CNPJ" itemValue="PJ" />
         <f:selectItem id="siCpf" itemLabel="CPF" itemValue="PF" />
        <f:selectItem id="siCei" itemLabel="CEI" itemValue="CE" /> 
           
          <a4j:support reRender="outpanelmascara,itxtEmpresaCpfCnpjCei,labelNumeroTipodeRegistro" event="onchange" id="supportCpfCnpjCei" action="#{empresaMB.escolheMascara}" />

</h:selectOneMenu>

<h:outputLabel id="labelNumeroTipodeRegistro" value="Número: " styleClass="campoObrigatorio numero">
	   <h:inputText id="itxtEmpresaCpfCnpjCei" binding="#{empresaMB.inputCnpjCpfCei}" styleClass="campoObrigatorio"></h:inputText>
</h:outputLabel>


<a4j:outputPanel id="outpanelmascara">
     <c:if test="${empresaMB.cnpjCpfCei.value eq 'PJ'}">
         <rich:jQuery  selector="#itxtEmpresaCpfCnpjCei" query="mask('99.999.999/9999-99')"/>
      </c:if>
      <c:if test="${empresaMB.cnpjCpfCei.value eq 'PF'}">
          <rich:jQuery  selector="#itxtEmpresaCpfCnpjCei" query="mask('[CPF removido]')"/>
      </c:if>
     <c:if test="${empresaMB.cnpjCpfCei.value eq 'CE'}">
         <rich:jQuery  selector="#itxtEmpresaCpfCnpjCei" query="mask('99.999.99999/99')"/>
     </c:if>
</a4j:outputPanel>
R
rlether
Puka:
Use um conversor único. 
package jsf.converter;

import java.text.ParseException;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.ConverterException;
import javax.swing.text.MaskFormatter;


public class CpfCnpjConverter implements Converter {
   // FIELDS
   public static final String CONVERTER_ID = "jsf.CpfCnpj";

   // CONSTRUCTORS
   public CpfCnpjConverter() {
   }

   // METHODS
   public Object getAsObject(FacesContext facesContext, UIComponent uiComponent, String value) {
      if (facesContext == null)
         throw new NullPointerException("facesContext");
      if (uiComponent == null)
         throw new NullPointerException("uiComponent");
      if (value != null) {
         value = value.trim();
         if (value.length() > 0) {
            return value;
         }
      }
      return "";
   }

   public String getAsString(FacesContext facesContext, UIComponent uiComponent, Object value) {
      if (facesContext == null)
         throw new NullPointerException("facesContext");
      if (uiComponent == null)
         throw new NullPointerException("uiComponent");
      if ((value == null) || (((String) value).trim().equals(""))) {
         return "";
      }
      if (value instanceof String) {
         String result = ((String) value).trim();
         result = result.replaceAll("[^0-9]", "");//retira tudo que nao é número
         MaskFormatter a;
         try {
            if (result.length() > 9) {
               if (result.length() == 11) {
                  // Formato CPF:. [CPF removido].
                  a = new MaskFormatter("###.###.###-##");
               } else {
                  // Formato CNPJ:. 00.000.000/0000-00.
                  a = new MaskFormatter("##.###.###/####-##");
               }
            } else {
               return result;
            }
            a.setValueContainsLiteralCharacters(false);
            return a.valueToString(result);
         } catch (ParseException e1) {
            throw new ConverterException("erro de conversão");
         }
      }
      return "";
   }
}

Mas isso serve como mascara de campo ?

R
rlether
marcos4ft:
Ja precisei fazer algo parecido utilizando jQuery, veja se te ajuda: 
<h:selectOneMenu binding="#{empresaMB.cnpjCpfCei}" id="rdEmpresaCpfCnpjCei" styleClass="campoObrigatorio" >
         <f:selectItem id="siEscolha" itemLabel="Escolha" itemValue="Esc" />
         <f:selectItem id="siCnpj" itemLabel="CNPJ" itemValue="PJ" />
         <f:selectItem id="siCpf" itemLabel="CPF" itemValue="PF" />
        <f:selectItem id="siCei" itemLabel="CEI" itemValue="CE" /> 
           
          <a4j:support reRender="outpanelmascara,itxtEmpresaCpfCnpjCei,labelNumeroTipodeRegistro" event="onchange" id="supportCpfCnpjCei" action="#{empresaMB.escolheMascara}" />

</h:selectOneMenu>

<h:outputLabel id="labelNumeroTipodeRegistro" value="Número: " styleClass="campoObrigatorio numero">
	   <h:inputText id="itxtEmpresaCpfCnpjCei" binding="#{empresaMB.inputCnpjCpfCei}" styleClass="campoObrigatorio"></h:inputText>
</h:outputLabel>


<a4j:outputPanel id="outpanelmascara">
     <c:if test="${empresaMB.cnpjCpfCei.value eq 'PJ'}">
         <rich:jQuery  selector="#itxtEmpresaCpfCnpjCei" query="mask('99.999.999/9999-99')"/>
      </c:if>
      <c:if test="${empresaMB.cnpjCpfCei.value eq 'PF'}">
          <rich:jQuery  selector="#itxtEmpresaCpfCnpjCei" query="mask('[CPF removido]')"/>
      </c:if>
     <c:if test="${empresaMB.cnpjCpfCei.value eq 'CE'}">
         <rich:jQuery  selector="#itxtEmpresaCpfCnpjCei" query="mask('99.999.99999/99')"/>
     </c:if>
</a4j:outputPanel>

Tentei fazer desse jeito mas quando eu troco de Tipo PJ , PF ou INT, o campo não aceita digitação, fica travado...Muito estranho...

Eu utilizo o meioMask para marcara, qual q vc esta utilizando ?

R
rlether

Descobri…

O problema esta no plugin “meio.mask” este cara não funciona para mascara dinamica. Já o maskedinput funciona certinho…

Veja como ficou meu codigo.

<?xml version="1.0" encoding="ISO-8859-1"?>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
	xmlns      = "http://www.w3.org/1999/xhtml"
	xmlns:ui   = "http://java.sun.com/jsf/facelets"
	xmlns:h    = "http://java.sun.com/jsf/html"
	xmlns:f    = "http://java.sun.com/jsf/core"
	xmlns:a4j  = "http://richfaces.org/a4j"
	xmlns:rich = "http://richfaces.org/rich"
	template   = "/templates/common.xhtml">
	
	<ui:define name="formulario">
	
		<a4j:loadScript id="js" src="resource:///js/jquery.maskedinput-1.2.2.min.js" rendered="true"/>
	
		<h:form id="pessoaCadastroForm">
		
		<h:panelGrid id="panelInfGeral" columns="2" columnClasses="titInfL,infL">
		
			<h:outputText  value="#{msg.codigo}:" />
      		<h:inputText label="#{msg.codigo}" id="codPessoa" readonly="true"  size="20" value="#{pessoaMB.pessoa.codPessoa}" />
      		
			<h:outputText  value="#{msg.razao}:" />
      		<h:inputText label="#{msg.razao}" id="razaoSocial" size="60" maxlength="100" required="true" value="#{pessoaMB.pessoa.razaoSocial}" onchange="this.value = this.value.toUpperCase();" />

			<h:outputText  value="#{msg.nome} #{msg.fantasia}:" />
      		<h:inputText label="#{msg.nome} #{msg.fantasia}" id="nomeFantasia" size="60" maxlength="100" required="true" value="#{pessoaMB.pessoa.nomeFantasia}" onchange="this.value = this.value.toUpperCase();" />
      		
      		<h:outputText  value="#{msg.tipo}:" />
      		<h:panelGroup>
	      		<h:selectOneMenu id="tipo1Pessoa" value="#{pessoaMB.pessoa.tipo}" >
		  			<f:selectItems value="#{menuMB.listaTipo}" />
		  		</h:selectOneMenu>
		  		
	      		<h:selectOneMenu id="tipo2Pessoa" value="#{pessoaMB.tipo}" >
		  			<f:selectItem itemValue="F" itemLabel="Fisica"  />
		  			<f:selectItem itemValue="J" itemLabel="Juridica"  />
		  			<f:selectItem itemValue="I" itemLabel="Internacional"  />
		  			<a4j:support event="onchange"
		  						 ajaxSingle="true"
                 				 reRender="iDoc,lDoc,panelJ1,panelJ2,maskDoc" />  
		  		</h:selectOneMenu>
		  		
      		</h:panelGroup>
      		
			<h:outputText id="lDoc" value="#{msg.documento}:" />
   			<h:inputText  id="iDoc" label="#{msg.documento}" size="20" maxlength="20" value="#{pessoaMB.pessoa.documento1}" onchange="this.value = this.value.toUpperCase();" />
   			
			<a4j:outputPanel id="panelJ1">
				<h:panelGroup rendered="#{pessoaMB.tipo == 'J'}" >
   					<h:outputText  value="#{msg.inscricao} #{msg.estadual}:" />
   				</h:panelGroup>
   			</a4j:outputPanel>
   			
			<a4j:outputPanel id="panelJ2">
				<h:panelGroup rendered="#{pessoaMB.tipo == 'J'}" >
   					<h:inputText label="#{msg.inscricao} #{msg.estadual}" id="pjIns" size="20" maxlength="20" value="#{pessoaMB.pessoa.documento2}" />
   				</h:panelGroup>
   			</a4j:outputPanel>
	  		
		</h:panelGrid>
		
		<rich:spacer height="20px"/>
		
		<a4j:outputPanel id="maskDoc">
			<h:panelGroup rendered="#{pessoaMB.tipo == 'F'}" >
				<rich:jQuery selector="#iDoc" query="mask('[CPF removido]')" />
   			</h:panelGroup>
			<h:panelGroup rendered="#{pessoaMB.tipo == 'J'}" >
				<rich:jQuery selector="#iDoc" query="mask('99.999.999/9999-99')"  />
  			</h:panelGroup>
   		</a4j:outputPanel>

		</h:form>
	</ui:define>
	
</ui:composition>

Ai funciona…

Obrigado a Todos…

[]´s
Rodrigo

Criado 22 de março de 2010
Ultima resposta 22 de mar. de 2010
Respostas 5
Participantes 3

Topicos relacionados

Componente de forum 4 respostas Consultar CPF pelo nome na Receita Federal 5 respostas Pegadinhas que se fazem com os pobres estagiários 62 respostas [Resolvido] Como comparar Strings em C? 6 respostas Converter pixels para centímetros 9 respostas
Casa do Codigo Casa do Codigo — Livros de tecnologia Livros de programacao, infraestrutura e inovacao
Lumina Lumina: a IA que te traz resultados Prompts prontos por especialistas. Resolva seus problemas de verdade.