Atenção: esse artigo tem um vídeo complementar. Clique e assista!
Este artigo demonstra como utilizar os componentes gráficos da biblioteca jQuery UI em uma aplicação web. No decorrer do mesmo são desenvolvidos dois exemplos: um utilizando o componente autocomplete e outro empregando o componente dialog. Deste modo conseguimos ilustrar a facilidade de uso dessa flexível tecnologia.
Em que situação o tema é útil:
Este tema é útil para todos aqueles que querem conhecer as facilidades e os avançados recursos dos componentes gráficos do jQuery UI, observando na prática como empregá-los em uma aplicação web.
Resumo DevMan:
Neste artigo é apresentado como desenvolver aplicações utilizando componentes do jQuery UI, um plugin do jQuery que disponibiliza componentes gráficos para sistemas web. Durante o desenvolvimento dos exemplos, além do jQuery e do jQuery UI, também são utilizadas tecnologias como Servlets e JSON.
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 (Java Runtime Environment), o Apache Tomcat, a biblioteca google-gson e, por fim, as bibliotecas JavaScript jQuery e jQuery UI. Os endereços para baixar estes softwares podem ser encontrados na seção ...
