Integrando JavaServer Faces, RichFaces e jQuery. Muito simples.

Passada as férias, gostaria de falar de algo que tenho trabalhado, e estou gostando bastante. Se trata do JavaServer Faces. Comecei a olhar ele com desconfiança, mas por se tratar da opção "padrão" do Java fui ver a fundo o que ele era capaz de fazer. Posso dizer que usar o JavaServer Faces, com o RichFaces, vendo as novas características que serão introduzidas na versão 2.0 (junto com o Servlets 3.0) é uma experiência que eu recomendo.

Algumas coisas me chamaram atenção. Como montar uma tabela a partir de uma lista de objetos. Depois, apos a tabela receber um click eu conseguir recuperar o objeto inteiro da linha selecionada. Sem me preocupar em passar parâmetros, receber ids, buscar objetos. É uma funcionalidade simples, mas para fazer funcionar também é simples, e isso me agrada muito.  As vezes no Java algumas coisas simples não são simples de fazer funcionar.

Outra coisa que gostei no JSF foi a possibilidade de expansão dele. Não fico preso ao que vem pronto. E tentando expandir as funcionalidades que estava tentando integrar o RichFaces com a biblioteca ajax jQuery. Confesso que passei algum trabalho, mas o trabalho foi ficando bom quando fui descobrindo que eu não precisava fazer nada.

O RichFaces já vem com o jQuery, isso facilita muito. Mas o que facilita mais ainda é que já existem tags para uso do JQuery dentro do arquivo do JSF. Achei pouca documentação então posto aqui um exemplo.

Eu queria usar o componente de calendário do jQuery. Mas eu queria também que fosse possível editar com o teclado a data. Mas além disso eu queria que a data tivesse formatação de data, e para isso usar o jQuery.

Para fazer essa mistura funcionar é realmente muito simples. Primeiro deve-se adicionar o JavaScript do jQuery:




Então é preciso criar a mascara de data com o jquery. Para isso existe a tag rich:jQuery. Ela faz as chamadas diretas as funções do jQuery sem usar Javascript.

query="mask('99/99/9999',{placeholder:' '})" />


Depois é só criar o campo da data, e atribuir a ele uma classe igual ao que descrita na propriedade seletor.



Resolvido. Temos um componente de data bonito e funcional. Com a capacidade de ter um calendário e ao mesmo tempo editar com o teclado formatando corretamente a data.

Esse é só um pequeno exemplo das possibilidades. O jQuery é um ótimo framework javascript e junto com o RichFaces fornecem ferramentas poderosas para o desenvolvimento web.