sexta-feira, 2 de abril de 2010

Máscaras em formulários JSF, usando JQuery.

Olá Pessoal,


Neste post, irei mostrar um exemplo, de como criar máscaras em formulários JSF, para isto, iremos usar a biblioteca JQuery que facilita o desenvolvimento de scripts em páginas web, além desta biblioteca, usaremos uma outra, chamada de MaskedInput.
A biblioteca JQuery, pode ser baixada no site http://jquery.com/ e a MaskedInput pode ser baixada no site http://plugins.jquery.com/project/maskedinput.
Através da MaskedInput, conseguimos criar vários tipos de máscaras facilmente, sem a necessidade de conhecermos a fundo JavaScript.
Para este exemplo, mostrarei cinco tipos de máscaras (Telefone, Cep, CPF, RG e CNPJ), usando o JSF. Estas máscaras não restringe apenas para uso no JSF, também poderá ser usado em JSP, Struts, etc...
Ao final do post, o projeto será disponibilizado para download, para quem quiser baixar e testar.

1. Passo: Crie um página de formulário em JSF, como mostrado na figura abaixo, não esquece de importar os scripts:




2. Passo: Agora, só testar, vejam como ficou o exemplo:



Bom galera, este foi um exemplo de como usar máscaras em formulários JSF, através da biblioteca JQuery e MaskedInput.
Para quem quiser baixar o projeto, clique aqui.
Qualquer dúvida, crítica ou sugestão, fico à disposição.

14 comentários:

Anônimo disse...

Essa porra não funciona não
fraude.

Jabes Felipe disse...

Meu caro amigo,

O projeto foi testado usando JSF padrão e funcionou normalmente.
Você tentou debugar com Firebug para ver a descrição do possível erro.

Qualquer dúvida, fico à disposição.

Anônimo disse...

Esse projeto realmente nao funciona!!
¬¬

Jabes Felipe disse...

Testei o projeto novamente no Netbeans 6.8 e rodou perfeitamente. O projeto que está sendo disponibilizado para download está sem as bibliotecas do JSF, para poder rodar o mesmo é necessário adicionar estas bibliotecas.

Anônimo disse...

Olha só, fiz o mesmo código, porém, quando coloco as tags dentro de um (...código aki...) a máscara deixa de funcionar. Mas, quando comento a tag funciona normalmente. Saberia explicar isso e como funcionar corretamente?

Me lembre qdo responder ok? (douglas.goncaze@gmail.com)

Anônimo disse...

A tag referida acima é a h:form!

Jabes Felipe disse...

Caro Douglas,

Para resolver este problema é simples, veja o exemplo:
No jQuery: $(".fone").mask("(99) 9999-9999");
Na tag Input, use o atributo: styleClass="fone"

Simplesmente, ao invés de usar o id(#), usa a class(.).

Anônimo disse...

Ok, valeu! (Douglas)

Anônimo disse...

Fala Jabes!

O homem tem até blog...
Sou eu o Cesar lembra de mim?

E o Geraldo continua pegando muito Traveco?

Abs
Cesar

Jabes Felipe disse...

Fala César, td blz!?

O Geraldo, até onde eu sei, está trabalhando aí no Rio.

Anônimo disse...

Não funciona.

domricky disse...

Opa pessoal se alguem conseguiu implementar por favor me envie no e-mail dom.ricky@hotmail.com muito obrigado

Rogério Carvalho disse...

Vlw amigo, o codigo funciona que é uma beleza, quebrou meu galho aki. (y)

Unknown disse...

Cara, não funcionou :( , fiz conforme seu post mas o jsf não reconhece

Postar um comentário

Jabes Felipe RSS Feed Jabes Felipe