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

rlether · Março 22, 2010, 9:55am

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: '999.999.999-99'})" 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

Puka · Março 22, 2010, 10:27am

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:. 000.000.000-00.
                  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 · Março 22, 2010, 10:47am

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

[code] <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(‘999.999.999-99’)”/>
</c:if>
<c:if test="${empresaMB.cnpjCpfCei.value eq ‘CE’}">
<rich:jQuery selector="#itxtEmpresaCpfCnpjCei" query=“mask(‘99.999.99999/99’)”/>
</c:if>
</a4j:outputPanel>

[/code]

rlether · Março 22, 2010, 2:27pm

[quote=Puka]
Use um conversor único.

[code]
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:. 000.000.000-00.
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 “”;
}
}
[/code][/quote]

Mas isso serve como mascara de campo ?

rlether · Março 22, 2010, 2:31pm

[quote=marcos4ft]Ja precisei fazer algo parecido utilizando jQuery, veja se te ajuda:

[code] <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(‘999.999.999-99’)”/>
</c:if>
<c:if test="${empresaMB.cnpjCpfCei.value eq ‘CE’}">
<rich:jQuery selector="#itxtEmpresaCpfCnpjCei" query=“mask(‘99.999.99999/99’)”/>
</c:if>
</a4j:outputPanel>

[/code]

[/quote]

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 ?

rlether · Março 22, 2010, 4:05pm

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('999.999.999-99')" />
   			</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

system · Janeiro 5, 2016, 12:31pm

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

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI