jQuery UI na prática - Revista Java Magazine 96

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (3)  (0)

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.

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

De que se trata o artigo:

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 "

A exibição deste artigo foi interrompida :(
Este post está disponível para assinantes MVP

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?