Primeiros passos com jQuery UI

jQuery UI é um complemento que permite implementar componentes diversos para gerar interfaces de usuario em páginas web, além de outras funcionalidades básicas para criar aplicações web enriquecidas. Como seu próprio nome indica, está baseado no popular framework Javascript e podemos encontrar links, explicações, assim como demos e downloads a partir do website oficial de jQuery.

Há meses em CriarWeb.com vimos explicando em detalhes tudo aquilo que os desenvolvedores devem saber para utilizar jQuery e assim realizar páginas enriquecidas no cliente. Tudo está noManual de jQuery e, além disso. Entre os scripts jQuery prontos para usar que existem na Internet devemos começar pelos proporcionados em jQuery UI, já que é a distribuição oficial de componentes para a criação de interfaces de usuario avançadas.

Assim, começaremos publicando uma série de passos iniciais necessários para começar a usar jQuery UI em nossas páginas web. Mais tarde começaremos a implementar funcionalidades e componentes avançados que nos proporcionam estas bibliotecas. Esta guia está baseada nas próprias explicações que se encontram no site de jQuery UI.

Revisar as demos de jQuery UI

Podemos começar observando a quantidade de funcionalidades prontas para usar, assim como componentes (widgets) para implementar interfaces de usuario. Tudo isto pode ser encontrado na página de demos de jQuery UI.

Talvez o mais interessante na página de demos seja os chamados widgets, onde poderemos encontrar exemplos de uso destas bibliotecas para criar os típicos menus “acordeão”, calendários para selecionar datas, janelas de diálogo, interfaces de abas, etc.

Escolher os componentes na página de download

Para começar realmente a usar jQuery UI necessitamos baixar as bibliotecas, mas cabe comentar que este sistema é bastante amplo, de modo que igual nos interessa baixar só uma parte, para que não resulte demasiado pesado para as pessoas que visitem nosso website. O bom é que a página de downloads de jQuery UI tem um sistema para poder selecionar só aqueles componentes que desejamos utilizar em nosso site, e assim o download pode ser otimizado de modo a conter unicamente aquelas coisas que realmente vão ser necessárias em nosso site.

Podemos acessar a página de downloads em: http://jqueryui.com/download

Componentes:
Aqui podemos selecionar/não selecionar os checkbox de cada um dos componentes que fazem parte de jQuery UI. Alguns têm dependências com outros, de modo que observaremos que, ao selecionar alguns componentes, automaticamente são selecionadas sus dependências.

À parte dos componentes a serem baixados, temos duas coisas adicionais que marcar antes do download.

Temas (Themes):
Por um lado temos que selecionar o tema ou aspecto que vão ter as interfaces de usuario de jQuery UI. Temos dezenas de temas já criados pela própria equipe das bibliotecas, com aspectos que variam bastante, sobretudo cromaticamente. Ademais, existe um gerador de temas que podemos utilizar para personalizar ainda mais o aspecto das interfaces de usuario. O objetivo é que os menus e demais deste sistema tenham um aspecto que se integre bem com o desenho de nossa página web.

Versão:
Também teremos que escolher a versão de jQueryUI que queremos utilizar, sabendo que cada versão está preparada para funcionar com uma versão do framework. No momento de escrever este artigo existem duas versões de jQuery UI que podemos selecionar. A versão mais moderna é a 1.8.1, que funciona sobre jQuery 1.4+ e a versão 1.7.3, mais antiga, que funciona sobre jQuery 1.3.2.

Por último, podemos apertar o botão de download para baixar um zip com tudo que vamos necessitar para usar jQueryUI.

Conteúdo do download de jQueryUI

Uma vez baixado nosso pacote de jQuery UI obteremos um arquivo comprimido com diversos diretórios e arquivos, que tem as seguintes pastas principais:

Pasta “css”: Nesta pasta se encontra o CSS e as imagens para gerar o tema ou os temas escolhidos. Realmente não temos por que tocar esta pasta para nada em um primeiro momento, mas contem coisas que serão fundamentais para que tudo seja mostrado como desejamos.

Pasta “development-bundle”: Esta pasta contem uma série de materiais úteis para os desenvolvedores que vão utilizar estas bibliotecas. Veremos aqui páginas de documentação, exemplos de uso e outras coisas interessantes. Nada do que há aqui é necessário em princípio para fazer funcionar os componentes jQuery UI, porém são materiais que nos poderão ser úteis para aprender.

Pasta “js”: Aqui veremos os scripts Javascript de jQuery y jQuery UI necessários para que todos os componentes funcionem. Esta pasta contem o arquivo Javascript com o código dos componentes que havíamos selecionado ao fazer o download, ademais do arquivo Javascript com o código da versão do framework que funciona bem com as bibliotecas.

Com o zip de download já poderemos começar a implementar algum dos componentes de jQueryUI.

Agora passaremos à prática, mostrando como fazer uma página web que utilize um dos componentes disponíveis em jQuery UI, que é o Datepicker ou selecionador de data por meio de um calendário.

Começar a usar jQuery UI em uma página web

Agora que já temos tudo o necessário para fazer nosso primeiro exemplo com jQuery UI, vamos colocar mãos à obra. Neste passo vamos criar um arquivo de exemplo onde usaremos as funcionalidades do calendário para selecionar uma data.

Todos os materiais de download devem ser copiados no diretório de nosso website. Assim, teremos que levar em conta o lugar onde deixamos as pastas que baixemos, principalmente as que são necessárias para que tudo funcione “css” e “js”.

O exemplo que vou realizar foi colocado em uma pasta onde estão baixados os subdiretórios de jQuery UI “css” e “js”. Se no caso de vocês a estrutura de pastas é diferente, vocês têm que levar em conta a rota desde este arquivo de exemplo para o arquivo onde se encontram as bibliotecas jQuery UI e a folha de estilos necessária para definir o aspecto dos componentes, segundo o tema que tenhamos selecionado.

Como primeiro passo incluiremos o seguinte código:

<link type=”text/css” href=”css/le-frog/jquery-ui-1.8.1.custom.css” rel=”Stylesheet” />
<script type=”text/javascript” src=”js/jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.8.1.custom.min.js”></script>

A primeira linha corresponde a um link com a folha de estilos que queremos utilizar para o look & feel das interfaces de usuario. No meu caso estou utilizando o tema que se chama “le-frog”, que tem uma bonita cor verde. A segunda linha corresponde à inclusão do código Javascript do framework jQuery. Por último, a terceira é o código dos componentes baixados de jQuery UI.

Invocar os métodos para gerar as interfaces de usuário

Agora que já temos os arquivos incluídos, para poder usar jQuery UI só nos falta criar o Javascript necessário para que os componentes sejam gerados na página, assim como configurá-los para que se comportem como necessitemos. No momento vamos ver um exemplo simples, no que realizaremos um campo de texto para escrever uma data. Ao pulsar o campo de texto será mostrado um calendário para podermos selecionar a data que queiramos. Este comportamento está implementado pelo componente chamado “Datepicker”.

Para conseguir isto necessitamos criar um campo de texto, com a correspondente etiqueta INPUT, colocada no lugar onde desejemos que esse campo apareça.

<input type=”text” name=”data” id=”campodata”>

Observemos no atributo “id” deste campo, que necessitaremos utilizar agora ao fazer o código Javascript necessário para convertê-lo em um campo “Datepicker”, que é o seguinte:

$(“#campodata”).datepicker();

Isto é uma chamada ao método datepicker() sobre o objeto jQuery selecionado pelo identificador campodata. Com isso fazemos com que esse campo de texto se converta em um selecionador de datas. Isso é tudo!! com essa linha de código conseguimos toda a funcionalidade buscada!!

Talvez possa surpreender o simples e cômodo de usar de jQuery UI, mas claro que ademais os componentes terão várias maneiras de serem configuradas para se adaptarem às necessidades mais particulares, mas isso é algo que veremos nos próximos artigos.

No momento, antes de acabar, colocamos aqui o código de uma página completa onde estamos usando o componente Datepicker de jQuery UI:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”
>
<html lang=”es”>
<head>
<title>Selecionar data com jQuery UI</title>
<link type=”text/css” href=”css/le-frog/jquery-ui-1.8.1.custom.css” rel=”Stylesheet” />
<script type=”text/javascript” src=”js/jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.8.1.custom.min.js”></script>
<script>
$(document).ready(function(){
$(“#campodata”).datepicker();
})
</script>
</head>
<body>

<form>
Data: <input type=”text” name=”data” id=”campodata”>
</form>

</body>
</html>

Fonte: http://www.criarweb.com/artigos/primeiros-passos-jquerui.html