Percebi que muitas pessoas ainda desconhecem a biblioteca jQuery, ou apenas ouviram falar… Então, para incentivar aqueles que ainda não passaram da fase da simples curiosidade, sugiro uma visita à página abaixo:

Beginner jQuery Tutorials: http://webtecker.com/2008/06/02/beginner-jquery-tutorials/

Lá você encontrará uma coleção de links para tutoriais e fontes de informação (em inglês) para iniciar ou continuar seus estudos desta excelente biblioteca…

Divirta-se!!

Anúncios

Como desenvolvedor Web estou sempre à procura de ferramentas que me auxiliem a criar, modificar ou entender a estrutura das páginas e assim obter como resultado uma interface melhor.

E não custa lembrar que, além de linguagens, frameworks, IDEs e todo o resto, temos nessa área um outro importante personagem: o browser (ou navegador, se assim prefirirem). Ele pode ser ao mesmo tempo o vilão, ao forçar a caça a “recursos técnicos” para driblar bugs (não IE mesmo?), ou o mocinho, ao proporcionar mecanismos auxiliares para que o desenvolvedor tenha mais liberdade e poder para alcançar os resultados desejados. É preciso saber escolher… E para mim o Firefox tem sido uma ótima escolha!

Disponibilizando vários e interessantes plugins (ou complementos), este navegador é hoje o preferido da maioria dos programadores e geeks pelo mundo. E para quem necessita fazer manutenção em páginas web, o aclamado plugin Firebug (que em breve deverá receber um post mostrando suas funcionalidades) é praticamente obrigatório.

Mas além dos plugins, existem outras pequenas jóias personalizáveis que podem ser agregadas aos navegadores…

Os bookmarklets

Resumindo a estória, bookmarklets são pequenos trechos de código javascript que podem ser adicionados aos links favoritos e que proporcionam algum comportamento desejado para a página atual quando são executados. Geralmente estão disponíveis na Internet como links que podem ser arrastados diretamente para a barra de favoritos para que fiquem disponíveis sempre que necessários. Aproveito para avisar que alguns só funcionam no Firefox…

Dentre os que mantenho sempre à mão estão o CSS Reloader, que recarrega as folhas de estilo da página sem que seja necessário um refresh completo, e o Design, que auxilia na definição ou verificação de layouts.

E agora o motivo deste post… Apresento minha mais nova “aquisição”: o jQuerify.

Este bookmarklet possibilita disponibilizar em qualquer página o framework javascript jQuery, mesmo que ela não o importe inicialmente!!

Agora você pode perguntar: “Sim, e daí??”

E daí que o jQuery possibilita você manipular qualquer coisa em um documento HTML, e agora você tem todo esse poder em qualquer página que você precise! Executando o jQuerify e em seguida utilizando o console javascript disponível no Firebug, você tem inúmeras maneiras de modificar uma página que você esteja visitando.

Posso estar exagerando um pouco na minha empolgação, mas depois que você começa a usar o jQuery e percebe que o conhecimento sobre seletores CSS pode ser agregado a funções javascript com possibilidades infinitas (eita!!), quer ter isso sempre disponível… Mesmo que seja só para “ajustar” o site dos outros para ficar do jeito que você prefere…

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! 🙂