quarta-feira, 19 de maio de 2010

Tagged under: , , , , ,

Máscaras de edição com JSF + RichFaces + JQuery + meioMask

Estou trabalhando para disponibilizar tags Facelets customizadas para aplicações JSF. O trabalho de hoje foi fornecer facilidades de máscara de edição de campos, o que é bem tranquilo usando JQuery.

Achei o ótimo projeto meioMask, cuja página explica direitinho como utilizar em páginas HTML, mas deixa a desejar em se tratando de JSF + JQuery + RichFaces. Criei uma página JSF para testar as várias situações, segue o código-fonte praticamente auto-explicativo.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich" xmlns:a4j="http://richfaces.org/a4j">
<head>
<title>
JSF + RichFaces + JQuery + Meiomask
</title>

<a4j:loadScript src="resource:///private/resources/scripts/jquery.meio.mask.min.js"/>
</head>

<body>

<h2>Máscaras de edição com JSF + RichFaces + JQuery + Meiomask</h2>

<br/>Setando uma máscara específica para o campo CEP <br/>
<rich:jQuery selector="#cep1" query="setMask({mask:'99999-999'})" timing="onload"/>
CEP 1:<h:inputText id="cep1" value="41750180"/> <br/>

<br/>Setando uma máscara específica para o campo CEP usando o atributo alt com o nome da máscara <br/>
<rich:jQuery selector="#cep2" query="setMask()" timing="onload"/>
CEP 2:<h:inputText id="cep2" value="20453588" alt="cep"/><br/>

<br/>Setando uma máscara específica para o campo CPF usando o atributo alt <br/>
<rich:jQuery selector="#cpf" query="setMask()" timing="onload"/>
CPF:<h:inputText id="cpf" value="12345678901" alt="999.999.999-99"/><br/>

<br/>Setando uma máscara específica para o campo Hora <br/>
<rich:jQuery selector="#hora" query="setMask({mask:'99:99'})" timing="onload"/>
Hora:<h:inputText id="hora" value="0545"/><br/>

<br/>Um único seletor para todos os inputText que possuem o atributo styleClass com o valor rg <br/>
<rich:jQuery name="jQueryHelper" selector="input:text.rg" query="setMask({mask:'99999999-99 ZZZ-ZZ'})" timing="onload" />
RG1:<h:inputText id="rg1" value="0044466688SSPBA" styleClass="rg"/><br/>
RG2:<h:inputText id="rg2" value="1155577799SSPRJ" styleClass="rg"/><br/>

<br/>Um único seletor para todos os inputText que possuem o atributo alt <br/>
<rich:jQuery name="jQueryHelper" selector="input:text[@alt]" query="setMask()" timing="onload" />
Decimal:<h:inputText id="mask7" value="9876543210" alt="decimal"/><br/>
Inteiro:<h:inputText id="mask8" value="1234567890" alt="integer"/><br/>
Hora:<h:inputText id="hora" value="2247" alt="time" /><br/>

<br/>Um inputText sem máscara <br/>
NoMask:<h:inputText id="mask10" value="10101011010" />
</body>
</html>


Taí o resultado executado no Firefox.



---

<?xml version="1.0" encoding="UTF-8"?>

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:rich="http://richfaces.org/rich" xmlns:a4j="http://richfaces.org/a4j">

<head>

<title>

JSF + RichFaces + JQuery + Meiomask

</title>

<a4j:loadScript src="resource:///private/resources/scripts/jquery.meio.mask.min.js"/>

</head>

3 comentários:

Anônimo disse...

Bom dia Serge!

Parabéns, ótimo exemplo, está me ajudando muito!!! =D

Cara, estou usando JSF 1.2 + Facelets 1.1.14 + Richfaces 3.3.0 na interface mas ñ consigo carregar o jquery.maskedinput-1.2.2.js de jeito nenhum! =S

Já coloquei o .js em trocentos lugares diferente e tentei d várias formas e nada deu certo. Se coloco uma página simples de teste sem template funfa blzinha...

Tens alguma dica para me salvar?

Muito obrigado.
[]'s
Minero

Anônimo disse...

Voltei...

Serge, achei o erro. lol
Estava errado meu a4j:loadScript, o coloquei no template "mestre" e td funcionou...
=D

Continue publicando ótimo conteúdo como este...
Muito obrigado.
[]'s
t++
Minero

Felix Henrique disse...

Gosta, mas tem como ocultar um botão com um deteminado value.

Algo como: