Atenção: esse artigo tem um vídeo complementar. Clique e assista!

Atualmente é muito comum o uso de bibliotecas JavaScript no desenvolvimento web em Java. O jQuery e o Dojo são bons exemplos dessas bibliotecas que vieram para simplificar a construção de aplicações web e trazer mais produtividade.

Ao utilizar o jQuery, o controle sobre os componentes de uma página HTML é simplificado, a manipulação de eventos é otimizada e o uso de interações AJAX nas aplicações torna-se facilitado.

Algumas das vantagens do jQuery são a redução do código, o suporte a AJAX e DOM, e uma quantidade imensa de plugins disponíveis para se trabalhar, como é o caso do jQuery UI, que será o tema deste artigo.

O jQuery tem a filosofia “write less, do more”, que significa fazer mais com menos código. Este slogan é ilustrado pelo exemplo a seguir, no qual buscamos um elemento HTML pelo id, e então, atribuímos o valor 5 a este elemento:

$( '#test' ).val(5);

Agora veja o mesmo código, mas desta vez implementado em JavaScript puro:

document.getElementById('test').value = 5;

Examinando o exemplo podemos perceber a sintaxe simplificada do jQuery, com sua arquitetura dirigida a eventos (encontre um elemento, manipule este elemento), na qual há a seleção do elemento através da função seletora $.(elemento), e na sequência é chamada uma função para manipular o elemento, neste caso, a função val, que atribui um valor.

A concisão e flexibilidade fizeram do jQuery uma das bibliotecas JavaScript mais populares. Sua extensibilidade proporcionou o surgimento de vários plugins, dentre eles o jQuery UI, que é uma rica biblioteca de componentes gráficos para desenvolvimento web. Trata-se de um projeto de código aberto onde cada componente é construído de acordo com a arquitetura dirigida a eventos do jQuery.

Os componentes do jQuery UI também suportam temas (CSS) e são feitos de maneira fácil para desenvolvedores de qualquer nível de experiência integrá-los e estendê-los em seu próprio código. Eles também são extremamente configuráveis e podem suportar efeitos gráficos como animação, esvanecimento e drag and drop. Dentre os componentes que a biblioteca disponibiliza, estão: barra de progresso, menus, calendário, dialog, autocomplete, entre outros.

Assim, o foco deste artigo é o estudo dos componentes da biblioteca jQuery UI através de exemplos práticos. Pensando nisso, trabalharemos com um programa para exemplificar o uso do autocomplete e outro aplicativo para exemplificar o uso do componente dialog.

Essas aplicações envolverão servlets como uma forma de ilustrar a comunicação cliente-servidor, porém os componentes também podem ser utilizados juntamente com frameworks web e outras linguagens servidoras, pois são facilmente integráveis.

Preparando o ambiente de trabalho

No decorrer do artigo alguns programas serão construídos com o objetivo de exemplificar o uso dos componentes do JQuery UI em uma aplicação web, e para o desenvolvimento desses aplicativos, precisamos antes montar o ambiente de trabalho. Deste modo, esta seção irá demonstrar os passos para a configuração deste ambiente.

Dentre as ferramentas que vamos utilizar estão o IDE Eclipse Indigo para Java EE, o JRE ("