Hospedagem Profissional

Hospedagem Profissional
Clique aqui e ganhe US$ 10,00 para testar durante 1 mês a melhor hospedagem: Digital Ocean!

sexta-feira, 18 de maio de 2012

Componente Data para JBoss Seam com RichFaces e Facelets

Pessoal, tive que queimar um pouco de fosfato por esses dias para construir um componente de data para o JBoss Seam que atendesse aos seguintes requisitos:

  • Campo Data com Calendário permitindo o ator clicar numa data específica e navegar por entre os anos e meses de cada um;
  • Esse mesmo campo, deveria permitir que o usuário digitasse uma data qualquer caso assim preferisse;
  • Caso a data fosse digitada, essa deveria ser formatada automaticamente com uma máscara seguindo o padrão dd/MM/yyyy;
  • Aceitar somente números caso fosse digitado manualmente;

Bom, primeiramente utilizei o plugin MaskedInput do JQuery para trabalhar com a máscara, o download pode ser feito em http://digitalbush.com/projects/masked-input-plugin/

Seguinte o padrão do JBoss Seam com Facelets, incluí no arquivo template.xhtml a seguinte linha.

 <a:loadScript src="/js/jquery.maskedinput-1.3.min.js" />  
Após isso, criei o arquivo campoData.xhtml (componente) conforme o código a seguir:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<ui:composition>
<rich:calendar id="#{id}"
value="#{value}"
datePattern="dd/MM/yyyy"
enableManualInput="true"
todayControlMode="hidden"
inputClass="calendario_#{id}"
showWeeksBar="false"
showApplyButton="false"
popup="true"
required="#{required}"
disabled="#{disabled}"
reRender="#{idDecorate}">
<a4j:support event="oninputblur"
ajaxSingle="true"
reRender="#{idDecorate}"
onsubmit="if(this.value == '__/__/____'){this.value=''};"/>
</rich:calendar>
<rich:jQuery selector=".calendario_#{id}" timing="onload" query="mask('99/99/9999')"/>
</ui:composition>
</html>
Depois criei um arquivo de componentes personalizado para minha aplicação chamado componentes-i9web.xml
 <?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"facelet-taglib_1_0.dtd">
<facelet-taglib>
<namespace>http://www.i9web.com.br/componentes</namespace>
<tag>
<tag-name>campoData</tag-name>
<source>../layout/campoData.xhtml</source>
</tag>
</facelet-taglib>
E nas páginas onde utilizado, faço o import do componente :
 <!DOCTYPE composition 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:s="http://jboss.com/products/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:i9="http://www.i9web.com.br/componentes"
template="/layout/template.xhtml">
E no campo, fica assim:
 <s:decorate id="dDataNascimento" template="/layout/edit.xhtml">  
<ui:define name="label">Data Nascimento</ui:define>
<i9:campoData
value="#{userHome.instance.dtaNascimento}"
id="dataNascimento"
idDecorate="dDataNascimento"
required="true"
requiredMessage="Obrigatório"/>
</s:decorate>