segunda-feira, 17 de janeiro de 2011

Primefaces e JQuery sem conflitos

Logo após o lançamento do JSF 2.0, aqueles que utilizavam  bibliotecas de componentes com suporte a AJAX tiveram alguns problemas de compatibilidade. Se eu não me engano, o primefaces foi a primeira biblioteca que anunciou uma release totalmente compatível com o novo JSF. Outras bibliotecas mais populares como o Richfaces e Icefaces ainda estão pelo caminho de uma distribuição totalmente compatível. Sem mais delongas, recentemente atualizei meus projetos pessoais para o JSF 2.0 e sem muitas opções resolvi utilizar o primefaces. Todos os que utilizam o prime como biblioteca de componentes AJAX sabem (ou pelo menos deveriam saber) que ele já "incorpora" o jquery em sua distribuição. Logo, se você tenta adicionar o jquery por sua  própria conta, seus códigos javascript não irão funcionar. Então, como referenciar o jquery nativo do primefaces em um projeto? A resposta é simples, embora, como já pude perceber, tem causado uma certa dor de cabeça para alguns (como causou a mim):

Assim como referenciamos os demais arquivos javascript em nosso projeto faremos com o jquery. Contudo, utilizaremos as novas tags JSF <h:head> e <h:outputScript> que correspondem, respectivamente, às tags <head> e <script>. Observe abaixo como fazer isso:

<h:head>
   <h:outputScript library="primefaces/jquery" name="jquery.js"/>
   <h:outputScript>$ = jQuery;</h:outputScript>
   <!-- ...demais referências -->
</h:head>

Pode-se utilizar a forma convencional, mas como o JSF disponibilizou essas novas tags, utilizá-las é uma questão de boa prática. Na linha 2 referenciamos o "jquery.js" nativo do primefaces, o qual se encontra no pacote "primefaces/jquery". Na linha 3, o código '$=jQuery' garante que não teremos conflito de sintaxe entre diferentes bibliotecas javascript. Todos os seus códigos que necessitam do jquery passarão a utilizar a distribuição que vem no próprio primefaces, sem conflitos e problemas com os componentes JSF e entre funções javascript. 
Obs: Na linha 2, no atributo "library", pode-se utilizar um ponto no lugar da barra. Ficaria assim: library="primefaces.jquery".
Aos amantes de jquery que utilizam JSF 2.0, fica esta simples, mas importante dica inicial de configuração. A todos uma ótima semana, boa sorte nos projetos e até a próxima!

Então vamos lá...

Olá a todos! Passei um bom tempo apenas pensando em criar um blog e compartilhar a minha humilde experiência em desenvolvimento Java. Nesse tempo, só tinha em mente que poderia não estar pronto para escrever e manter atualizado algum blog com tópicos sobre o que já aprendi até aqui. Mas os muitos problemas que já enfrentei na hora de programar e o profundo interesse pelo desenvolvimento web que tem crescido em mim fizeram-me finalmente criar coragem e começar a publicar o pouco que eu já sei. Espero contribuir em alguma coisa com todos os que, porventura, aventurarem-se por este blog. Mas sei que na verdade estou aqui mais para aprender do que para ensinar.