Antes de falar em UI

Não podemos falar em jQuery UI antes de falar em jQuery.

“jQuery é um framework para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de incompatibilidade dos navegadores atuais”.  [Wikipédia 2009]

O jQuery é JavaScript puro, uma biblioteca poderosa e tem um alto nível de abstração para criar aplicações ricas “DHTML”.

Ela vai de efeitos visuais até controle complexo de dados via Ajax. Apesar de ser uma plataforma relativamente jovem, o jQuery vem ganhando confiança e o carisma entre os desenvolvedores e empresas que estão freqüentemente adotando o uso desta plataforma.

Seu lema é escrever menos e fazer mais, “Write less, do more” [jquery.com 2009].

jQuery UI

Inicialmente, os desenvolvedores do jQuery se juntaram para corrigir alguns bugs e a empolgação foi tanta que eles desenvolveram a plataforma jQuery UI.

“A jQuery UI proporciona abstrações de baixo nível de interação e animação, avançados efeitos especiais e de alto nível, construída em cima do jQuery JavaScript Library, que pode ser utilizada para construir aplicações web altamente interativas”.
[jquery.com 2009]

Características

A redução drástica de escrita de código fonte é um dos fatores que chama mais atenção nesta plataforma. Para termos idéia, segue um exemplo básico de como pegar um elemento do DOM através do id.

JavaScript tradicional:

document.getElementById(“teuId”);

Com o jQuery:

$(“#teuId”);

Como podemos observar, o jQuery tem uma sintaxe própria e bem reduzida.

Instalando a jQuery UI

Podemos fazer o download da plataforma no site oficial da jQuery UI em “http://jqueryui.com”. No site você poderá configurar temas, encontrar a documentação, exemplos e tutoriais.

Para instalar a plataforma, basta descompactar os arquivos no localhost e instanciar nas aplicações que vão utilizar o framework.

Os componentes

Por ser de código aberto podemos editar qualquer componente. Alguns deles não necessitam de alterações, esses chamaremos de componentes fixos e os que manipularemos com mais freqüência chamaremos de componentes variáveis. Os componentes da jQuery UI ficam dentro da estrutura de pasta mostrada na figura 1.0.

Figura: 1.0

Detalhando os componentes

• Pasta js

Dentro da pasta “js” vamos encontrar dois componentes fixos, “jquery-1.3.2.min.js” e o ” jquery-ui-1.7.1.custom.min.js”, mostrados na figura 1.1.

Ao chamar o arquivo “jquery-1.3.2.min.js” na aplicação, o mesmo fará com que os códigos jQuery sejam interpretados e permitirá programar com a sintaxe da biblioteca.

O componente fixo “jquery-ui-1.7.1.custom.min.js”, mostrado na figura 1.1, irá carregar a plataforma User Interface, e permitirá utilizar as funcionalidades da jQuery UI, como o calendário “Datepicker”, o menu “Accordion” e a caixa de diálogo “dialog”.

Figura 1.1

• Pasta development-bundle

Na pasta pacote do desenvolvedor “development-bundle”, detalhada na figura 2.0, encontraremos alguns arquivos de texto como a licença, os autores e a versão da UI, outras pastas com componentes de demonstração “demos”, a documentação “docs”, “external”, temas “themes” e a pasta “ui”, onde vamos encontrar os componentes separados caso o desenvolvedor queira escolher os que vão ser utilizados em sua aplicação.

Figura 2.0

• Pasta Demo

Na pasta “demo”, detalhada na figura 2.1, encontraremos os componentes variáveis de demonstração da plataforma com todas as funcionalidades instaladas separadamente.

Figura 2.1

• Pasta Docs

Na pasta “docs”, detalhada na figura 2.2, teremos a documentação em formato HTML dos componentes variáveis, com exemplos e especificando alguns parâmetros para a customização dos mesmos.

Figura 2.2

• Pasta External

Na pasta “external”, detalhada na figura 2.3, teremos algumas pastas com a documentação e exemplos de alguns componentes fixos, como manipulação de cookies, eventos de teclados e teste de browser.

Figura 2.3

• Pasta Themes

Na pasta “themes”, detalhada na figura 2.4, é onde se encontram alguns dos componentes variáveis de construção dos temas. Dentro de cada pasta, teremos um ou mais arquivos CSS e imagens que compõe a interface da plataforma web, como mostrado na figura 2.4.1.

Figura 2.4

Figura 2.4.1

• Pasta UI

A pasta “ui”, detalhada na figura 2.5, contém os componentes fixos separados por módulos. Por padrão, o arquivo “jquery-ui-1.7.1.custom.min.js” (ver figura 1.1) contém todas as funcionalidades.

Figura 2.5

Instalando a plataforma web jQuery UI

Para instalar a plataforma, basta chamar os componentes fixos e variáveis que sua aplicação irá usar. Vamos usar o tema “Black tie”, baixado no site oficial da jQuery UI em http://jqueryui.com/download.

Após descompactar a plataforma web jQuery UI, colocaremos os arquivos no local onde a aplicação ficará, criaremos um “HTML” simples para podermos manipular o “DOM ” e então vamos instanciar os componentes que iremos usar em nossa aplicação para instalar a plataforma web.

Criando a estrutura HTML

Neste trabalho não vamos nos aprofundar muito em HTML, pois o nosso foco é a jQuery UI. Criamos um HTML simples mostrado na figura 3.0.

Figura 3.0

Instalando os componentes

Para instalar os componentes da jQuery UI, basta chamar em sua aplicação os arquivos javaScript e CSS relacionados.

Instanciaremos os componentes fixos “jquery-1.3.2.min.js” e ” jquery-ui-1.7.1.custom.min.js”, que já foram mostrados na figura 1.2, e o terceiro componente chamado “acao.js” que é um arquivo novo,  um componente criado por nós que será o nosso javaScript variável, responsável pelas ações, mostrado na figura 3.1.

A figura 3.2 mostra os arquivos CSS de formatação da plataforma “css/black-tie/jquery-ui-1.7.1.custom.css” e o variável “css/css.css”, que é um componente novo criado pelo desenvolvedor e pode ter o nome que você preferir.

Figura 3.1

Figura 3.2

Testando a plataforma

Para testarmos a plataforma e identificar que está tudo funcionando bem, vamos escrever no documento “acao.js” o código abaixo e o web browser terá que retornar uma mensagem de alerta como mostrado na figura 3.3 .

$(document).ready(function(){

alert(“O DOM foi carregado e o jQuery está instalado!”)

});

Figura 3.3