A utilização dos componentes do RichFaces facilita bastante a incorporação de características de aplicações ricas a sistemas web que utilizam JavaServer Faces. A cada nova versão da biblioteca, mais e mais opções tornam-se disponíveis para incrementar sua aplicação e facilitar o desenvolvimento de interfaces mais complexas.

Entretanto, é bom lembrar que, por trás de todas estas maravilhas da praticidade moderna que o RichFaces oferece, ainda temos o bom e velho JavaScript por baixo dos panos. É esta incrível linguagem, que somente recentemente começou a ganhar o prestígio merecido, que move a maioria das funcionalidades mágicas dos componentes. Para tal, os desenvolvedores da biblioteca utilizaram-se de dois frameworks JavaScript bastante conhecidos: Prototype e Script.aculo.us (baseado no primeiro).

Estes dois já foram (e alguns ainda os consideram) os preferidos para auxiliar no desenvolvimento de soluções em JavaScript. Por causa disso vários outros projetos incorporaram estas bibliotecas para agregar comportamentos diversos a por exemplo: componentes JSF. E adivinha quem também fez essa escolha? o pessoal do RichFaces…

Muito bem, mas e o jQuery? Onde ele entra nessa história toda?

Acontece que o jQuery e seus diversos plugins estão cada vez mais na cabeça (e nos códigos) dos desenvolvedores web. Ele vai além do Prototype em vários aspectos: ganhou inúmeros admiradores e contribuidores, e é hoje uma opção mais conveniente para a adição de comportamentos à paginas web.

Resumindo então o cenário: temos os componentes prontos do RichFaces que encapsulam transparentemente códigos que utilizam Prototype e Script.aculo.us e, caso necessário, podemos adicionar outros comportamentos necessários com jQuery.

Qual o problema então?

O “problema” é que um importante método tanto do Prototype quanto do jQuery possuem nomes iguais!

A principal função do Prototype, e que é utilizada basicamente para reduzir o tamanho dos códigos de manipulação de elementos da árvore DOM, é a $(). Esta pequena função substitui o longo método original para a busca de elementos da página por seu id: document.getElementById().

No jQuery, a função $() é o grande coringa: serve para buscar elementos da página através de seletores CSS, para criar novos elementos para serem adicionados à página ou para definir funções que devem ser executadas assim que a árvore de elementos tiver sido carregada pelo navegador (depois providencio um post mais detalhado sobre esta função tão versátil).

Então não é possível usar as duas ao mesmo tempo? E já que RichFaces utiliza Prototype, não posso usar jQuery quando empregar seus componentes? Mas é claro que pode!!

É possível utilizar as funcionalidades das duas bibliotecas com uma pequena adaptação: definindo um nome alternativo para a função $()do jQuery e utilizando-a sem a preocupação com conflitos com o Prototype. Veja o código abaixo como esta alternativa pode ser utilizada:


var $j = jQuery.noConflict();

$j("div").hide();
$('rodape').show();

Neste exemplo, a função $j() irá funcionar com o comportamento desejado para o jQuery e a função $() funciona como a sua definição original do Prototype. Simples assim!

Agora você pode usufruir do melhor dos dois mundos: a praticidade dos componentes prontos e a flexibilidade de definir novos comportamentos ou utilizar os plugins prontos do jQuery.

Acho que para um primeiro post “de verdade” este até que ficou bem longo… A idéia parecia bem simples no começo, mas a necessidade da contextualização acrescentou algumas linhas a mais…

E no caso de alguma dúvida, o espaço para comentários está aí para ser utilizado! :)