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>

sábado, 1 de maio de 2010

Tagged under:

Nos bastidores do FLISOL2010 Salvador com o JEE 6

O FLISOL (Festival Latino-americano de Instalação de Software Livre) é o maior evento de divulgação de Software Livre da América Latina. Ele acontece simultaneamente no mesmo dia em diversos países. desde 2005 e seu principal objetivo é promover o uso de Software Livre, apresentando sua filosofia, seu alcance, avanços e desenvolvimento ao público em geral. Nesse ano em especial o JavaBahia além de ajudar com a organização do evento fez um mini-laboratório com o JEE 6.