Todo e qualquer software, por melhor e mais bem codificado que tenha sido, necessita de uma boa apresentação, uma boa interface. Interface apresentável e, sobretudo, amigável, por sua vez, é algo considerado por algumas vertentes do mundo de desenvolvimento de software como crucial para o sucesso de um projeto, principalmente quando o ambiente ao qual se relaciona é o mundo web e/ou mobile.
Em se tratando do mundo web, tudo influencia no momento de escolher qual a melhor interface: as melhores cores, qual é mais comum, qual imagem se adapta melhor às tonalidades da logo, fontes, tamanhos, etc. E além de tudo isso, os sistemas web tendem cada vez mais a necessitar adaptar-se aos diferentes dispositivos de acesso do usuário (computadores, laptops, smartphones, tablets, etc). A este conjunto de fatores, somado às linguagens que o dinamizam, tal como o JavaScript, por exemplo, e o estilizam (CSS) damos o nome de “camada front end” de uma aplicação.
Basicamente é através das tecnologias front end que o usuário consegue através de um cliente (o browser) se comunicar com as tecnologias que executam no lado servidor. Por isso esses tipos de aplicações web recebem comumente o nome de aplicações cliente-servidor.
O que é jQuery
A jQuery é uma biblioteca (ou framework, segue o mesmo conceito) JavaScript gratuita e de código fonte aberto, criada e concebida com o objetivo de facilitar o desenvolvimento de scripts no lado do cliente, de forma a obter uma manipulação do HTML mais rápida e eficiente. Além disso, provê simplicidade e produtividade na utilização de scripts client side (ver Nota 2) para dinamizar as páginas. Com sua política “write less, do more” (escreva menos, faça mais), ele trouxe à tona inúmeros plugins e bibliotecas auxiliares de componentes, como o jQuery UI, por exemplo.
O que é jQuery UI
O jQuery UI é uma ferramenta de interação e construída em cima do núcleo da jQuery que permite que você possa animar os diferentes elementos HTML, lhes dando impressionantes interações front-end com relativa facilidade. Em outras palavras, é uma rica e extensível biblioteca de componentes gráficos criada para maximizar o uso e poder da jQuery. Totalmente baseada no framework jQuery, é usada para fornecer uma melhor interação entre o usuário e o cliente (web browser), com recursos ricos como animação, efeitos, componentes estilizáveis, etc.
O pacote de interface é basicamente uma coleção de funções de interface de usuário que estão relacionadas e podem ser divididas em três módulos principais:
- Widgets, que contêm interfaces de usuário pré-construídas e customizáveis.
- Efeitos, que são animações muito simples e fáceis que você pode fazer para um elemento de uma página, tais como agitá-lo, explodi-lo, e assim por diante.
- Interação ampliada do mouse com os elementos da página (por exemplo, arrastar e soltar).
Muito foi indagado acerca do projeto nos últimos anos, especialmente quando do lançamento do mesmo. A mesma desconfiança da tecnologia pôde ser observada à época do lançamento do projeto jQuery. Entretanto, ao contrário do que muito se especulou o projeto vingou e promete crescer rapidamente com o passar do tempo. Isso acontece, assim como em muitas outras tecnologias, por causa da grande integração da comunidade de desenvolvedores que se interessam pela ferramenta e investem na correção de bugs e nos lançamentos de novas versões (releases).
Outro aspecto muito interessante do pacote UI é a capacidade de criar o seu próprio "tema", com a capacidade de estilização das cores, fontes e configurações de estilo, widgets pré-construídos, permitindo, assim, que os widgets que você baixar pareçam que foram feitos especialmente para o seu web site.
Um breve histórico
A história do jQuery UI é um pouco conturbada, mas extremamente importante para entender o motivo que leva a biblioteca ser tão querida entre os desenvolvedores web de hoje.
A biblioteca de interface de usuário mais famosa começou, na verdade, como um conjunto de vários plugins por volta do final de 2007. Os plugins, que foram todos muito populares e muitas vezes baixados pelos desenvolvedores que acompanhavam o desenrolar da criação da biblioteca, foram criados pelos profissionais mais experientes da comunidade jQuery. Decidiu-se então que estes plugins deveriam ser consolidados em um maior e promovido como uma extensão oficial do código do núcleo jQuery. Isso levou ao lançamento da primeira versão, a 1.5, no início de 2008.
No entanto, após o lançamento do plugin UI consolidado, os desenvolvedores que estavam tentando usá-lo em seu próprio código fizeram comentários (ou reclamações) que o código, enquanto bom, tinha muitas diferenças. Afinal, todos os plugins tinham diferentes autores, que, consequentemente, tinham estilos diferentes. A decisão tomada foi tentar ajustar todos os plugins para ter um estilo comum. Isto resultou em todas as versões 1.5.x, que você pode ver no histórico da biblioteca.
Com o lançamento da versão 1.6 da biblioteca, o trabalho de refatoração do código estaria completo, e a promessa de uma biblioteca de interface de usuário com um estilo comum e código comum seria cumprida. Diante disso teve início o império do jQuery UI ante a uma comunidade cada vez mais forte e exigente por novas funcionalidades e flexibilidade no desenvolvimento.
Neste artigo será mostrado como utilizar alguns dos recursos mais famosos e importantes dessa ferramenta, bem como encontrar meios de se habituar ao jeito jQuery UI de se trabalhar, através da implementação de alguns exemplos práticos.
Configurando o ambiente
Uma das grandes vantagens de usar jQuery (ou outras bibliotecas JavaScript) é que muitos dos arquivos de configuração encontrados em outras linguagens são dispensados. Toda a “tranqueira” de ferramentas, plugins, extensões, configurações, etc é totalmente desnecessária aqui. Tudo que você precisa fazer é baixar os dois arquivos de código JavaScript (jquery.js e jquery-ui.js) ou referenciar os mesmos diretamente (se você tiver uma conexão com a internet). Entretanto, ao contrário da jQuery core, a biblioteca UI não será instalada apenas referenciando os arquivos JavaScript. É necessário fazer o download do pacote de widgets e arquivos de scripts, CSS, etc.
Saiba mais: Curso de JavaScript Completo
Como você pôde notar, a biblioteca faz uso do núcleo da jQuery. Para baixar o arquivo de fonte da mesma acesse o link de download disponível na seção de links do artigo e clique na opção Download jQuery, tal como exibido na Figura 1. Isso o levará para uma página com vários códigos emaranhados. Essa mesma página é a representação do arquivo simplificado, isto é, comprimido da jQuery, o jquery-1.9.0.min.js, que na data de publicação desse artigo encontrava-se na sua versão 1.9.0. A única diferença entre esta versão, comprimida, e a outra, não comprimida, é que aquela vem com o código todo em uma linha só, para facilitar a importação pelo browser, deixando assim o carregamento e o processamento mais leve, no que confere à página fazer.
Note na Figura 1 que a opção Production na seleção do nível de compressão está selecionada por default. Se quiser, pode optar por Development, que representa o mesmo arquivo, porém, sem que o código esteja comprimido.
Crie uma pasta chamada jquery-ui-devmedia que representará a raiz do nosso projeto e salve o arquivo em uma pasta chamada js de modo a termos uma estrutura de pastas semelhante à mostrada na Figura 2. Logo após crie um documento qualquer e vazio e salve-o com o nome index-jquery-ui.html.
Isso será o suficiente para a primeira parte da configuração, que se refere ao core do jQuery. Agora, precisamos também do arquivo de extensão js do jQuery UI. Para tanto, acesse o link de download do jQuery UI disponível na seção de links. Nesta página você irá encontrar algo interessante para um framework JavaScript: a opção de selecionar o que deseja incluir no jQuery UI que está prestes a usar. Isso é bem vantajoso quando não se deseja usar todos os recursos do mesmo, diminuindo assim o consumo de banda ao usá-lo e aumentando consideravelmente o nível de customização. Portanto, desça a página até a última opção toogle e verifique que existe um botão de download para baixar os recursos selecionados. Ou, se desejar, logo abaixo terá disponível uma barra de Quick Access que te possibilita acessar diretamente o arquivo .js em questão.
Após baixar o arquivo, um zip, descompacte-o e copie o arquivo jquery-ui-1.9.2.custom.js da pasta js (ou o jquery-ui-1.9.2.custom.min.js, se preferir a versão comprimida) para a pasta js do seu projeto devmedia. Faça a mesma coisa para a pasta ui-lightness dentro da pasta CSS, copiando-a para a pasta CSS da nossa aplicação modelo.
ThemeRoller
Baixar e instalar a biblioteca de interface de usuário não é como instalar o núcleo da jQuery ou um plug-in. Em um esforço para minimizar o tráfego de rede e conexões, o time da UI criou seu próprio aplicativo Web onde eles pedem que você pré-selecione as peças da biblioteca UI que você gostaria de usar e seu esquema de compressão desejado, tais como cores, fontes, bordas, etc. Em seguida, eles permitem que você baixe o arquivo diretamente através de um link gerado automático. Isso tem a vantagem de permitir que você forneça apenas as partes da biblioteca de interface do usuário que você pretende usar, sem sacrificar o desempenho da sua aplicação. No entanto, a desvantagem é exigir que você baixe novamente o arquivo inteiro se decidir usar uma parte que você não tinha originalmente incluído no seu arquivo custom-made (arquivo principal).
Na seção de links, você pode encontrar a página de criação de temas, onde existe a possibilidade de desenvolver temas estilizados a gosto, de forma a montar um arquivo CSS com estilos marcados na página. Veja na Figura 3 a página em questão.
Este aspecto da biblioteca UI é chamado de ThemeRoller. Um nome estranho, mas na verdade é muito útil se você optar por usar qualquer um dos widgets da biblioteca em seu código. Tal como está agora, os widgets tem um layout pré-definido e padrão que pode ser usado pela sua aplicação ou adaptado por você mesmo. Assim, os criadores da jQuery UI refinaram muito nestes últimos tempos o gerador de CSS que você pode modificar para combinar com seu próprio site e, em seguida, salvar o arquivo CSS. O CSS gerado fará com que todos os seus widgets pareçam exatamente como você planeja.
Um dos muitos benefícios da ThemeRoller é que ela permite que você crie CSS e estilos pré-visualizados para coisas que pessoas não-especialistas em CSS normalmente não poderiam fazer facilmente. Por exemplo, ele permite que você especifique cantos arredondados em qualquer parte do widget, e permite que você crie sombras suspensas também. Ele tem realmente tomado a parte de codificação pesada do arquivo de CSS fora do uso da biblioteca UI, e permitiu que os desenvolvedores que não são artistas gráficos possam usar e modificar os widgets facilmente. Basicamente, ao invés de reinventar a roda e fazer teu próprio arquivo widget e correr o risco de não dar certo, o ThemeRoller permite fazê-lo de forma programática.
Finalmente, o ThemeRoller vem com muitos temas pré-construídos. Em sua grande maioria, os widgets substituem completamente o uso profissional de outros widgets no projeto. Em vez de colocar o CSS do seu site no ThemeRoller, você pode colocar o CSS do ThemeRoller em seu próprio site.
Note que ao lado esquerdo da página visualizada na Figura 3 está disponível a paleta de configurações, desde cores até fontes e tamanhos podem ser configurados para os mais diversos componentes e widgets do framework. E o mais interessante é que você pode acompanhar as mudanças ao lado com a maioria destes componentes atualizados automaticamente há cada alteração. trataremos sobre os temas mais a frente no artigo.
Opcionalmente, você poderá configurar seu projeto com os links de acesso direto aos arquivos, isso evita que o seu projeto tenha uma dependência demasiada de arquivos. Para isso, veja na Listagem 1 como adicionar as importações corretas dos arquivos de script e CSS.
01 <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.CSS"/>
02 <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
03 <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>Lembre-se que o código exibido na listagem deve ser configurado na tag da página HTML criada para esta finalidade.
Não serão tratadas aqui explanações acerca do uso correto do HTML, bem como do significado de suas tags, atributos, etc, sob o risco de perder o foco do artigo.
Agora que você já tem o necessário para usar o jQuery assim como o jQuery UI, focaremos nas três partes fundamentais da ferramenta: as interações, os efeitos e os widgets, vendo com clareza de detalhes quais as responsabilidades de cada um, assim como exemplos práticos.
Interações
Quando um elemento HTML se arrasta em detrimento de outro ou quando o mesmo está por cima de outro elemento, pode existir uma interação forte entre os dois. Isso constitui uma interação.
A interação de arrastar e soltar elementos (dragging/dropping) é uma área totalmente nova de design para aplicações web. Isso porque a maioria dos usuários está acostumada a páginas e elementos de página estáticos. Quando há, a interação de arrastar e soltar entre os componentes de aplicativos da Web que permitem como consequência a integração do usuário ao contexto do software, nem sempre se dá de forma efetiva.
O módulo de Interações do jQuery UI contém cinco tipos de interação. Trataremos de cada um deles para que possam assimilar as principais diferenças e objetivos.
Drag and Drop
O primeiro exemplo mostrado será o uso da ferramenta para fazer uma div deslocar de lugar com o clique e arraste do mouse, efeito conhecido como drag and drop.
Note que dentro da pasta de download que você baixou e descompactou existem alguns arquivos de JavaScript individuais (No path \jquery-ui-1.9.2.custom\jquery-ui-1.9.2.custom\development-bundle\ui\jquery.ui.draggable.js, por exemplo). Estes arquivos existem para que você possa usar recursos separados do jQuery UI. Para usá-los precisa apenas das importações básicas e da importação específica, tal como mostrado na Listagem 2.
<link rel="stylesheet" href="CSS/jquery-ui.CSS" type="text/CSS"/>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery.ui.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.draggable.js"></script>Para usar todos os recursos, porém, deverá usar tal como na Listagem 1.
O jQuery é baseado em funções. Para cada necessidade, existe uma função que resolve o problema, em alguns casos até atreladas a outras, para ver um efeito maior ou mais arrojado. Para implementar o recurso de draggable no jQuery UI, o primeiro passo é fazer as importações devidas e depois usar a função específica para isso: a draggable(). A função correspondente está exibida na Listagem 3, assim como a div necessária para fazer o teste de drag.
<html>
<head>
<title>jQuery UI App - Devmedia</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/
jqueryui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style type="text/CSS">
.draggable {
border: 2px solid blue;
background-color: gray;
width: 100px;
height: 60px;
margin: 20px;
display: block;
}
</style>
<script type="text/JavaScript">
$(document).ready(function() {
$("#divDrag").draggable();
});
</script>
</head>
<body>
<div id="divDrag" class="draggable ui-draggable"
style="position: relative;"></div>
</body>
</html>O CSS é apenas para que a div, até então vazia, consiga ser distinguida do fundo branco.
O resultado da Listagem 3 pode ser visualizado na edição da imagem representada pela Figura 4. Observe que as setas laranjas representam os lados para o qual o efeito permite mover o objeto.
Ao usar tal efeito e analisar o código em questão, o leitor pode se deparar com a situação de achar que o fazer tudo isso é muito simples, rápido e fácil, e enganosamente achar também que o efeito se resume apenas a isso. Os efeitos da biblioteca podem se estender às mais diversas situações possíveis, entretanto jamais conseguiremos exibir tal efeito se não utilizarmos um exemplo real, que possa ser aplicado no cotidiano dos desenvolvedores web. Dado esse cenário, iremos agora criar um segundo exemplo onde possamos expressar melhor tal efeito.
Imagine, por exemplo, que você tenha de desenvolver uma estrutura de carrinho de compras, na qual teremos um espaço dedicado à exibição do resumo e somatórios dos produtos (cursos da Devmedia, por exemplo) até então selecionados pelo usuário. No mesmo exemplo teremos a disponibilização dos itens e seus respectivos preços para que o usuário, de uma forma simples e rápida, consiga arrastar os itens desejados e ver o resumo no espaço designado. Faremos uso de algumas funções jQuery, mas evitaremos descrições aprofundadas sobre as mesmas para evitar fugir do assunto.
Na estrutura de pastas atual, crie uma nova pasta chamada “pages” que será responsável por guardar as demais páginas usadas nos exemplos que não sejam a index. E crie dentro desta um novo arquivo html, daremos o nome de drag-drop-carrinho.html.
O conteúdo da página em questão está exibido na Listagem 4. Atente para todos os comentários feitos dentro do código que são autoexplicativos.
<!doctype html>
<html>
<head>
<title>Carrinho de compras - Devmedia</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/
jqueryui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style type="text/css">
body {
padding: 25px;
}
#divCarrinho {
float: left;
padding-right: 50px;
}
.produto {
margin: 3px;
}
.produto img {
padding: 6px;
}
</style>
<script type="text/Javascript">
$(document).ready(function() {
$(".produto").draggable({
'opacity': 0.3, // faz com que o objeto fique semi-transparente
quando movido
'revert': "valid", // traz o objeto de volta após ter sido movido
'delay': 200, // demora 200 ms antes de começar a arrastá-lo
'distance':4, // espera até que ele seja arrastado 4 pixels
antes de iniciar
'helper': "clone" // mantém o objeto onde ele está e usar um
ajudante (clone) para mostrar arrastando
});
$("#carrinho").droppable({
'accept':".produto", // define quais elementos irão desencadear uma 'drop'
'activeClass':"border", // que classe para adicionar ao
droppable enquanto arrasta
'drop': function(e, ui){ // Esta função é chamada quando algo é descartado
// atualiza o número de itens no carrinhos
$("#numItems").text(new Number($("#numItems").text()) + 1);
var id = $(ui.draggable).attr("id");
// obtém o preço do objeto que acabou de colocar no carrinho
var preco = new Number($("#" + id + " .preco").text());
// Atualiza o preço total no carrinho
$("#total").text(new Number($("#total").text()) + preco);
}
});
});
</script>
</head>
<body>
<p>
<div id="divCarrinho">
<img src="..\img\carrinho.jpg" id="carrinho"/><br/>
<b><span id="numItems">0</span>
</b> itens no carrinho.
<p>O total acumulado é de <b>R$
<span id="total">0</span></b>.
</div>
<div style="float:left">
<div class="produto" id="java">
<img src="..\img\java.png" align="left"/> Java
<p>R$<span class="preco">71.99</span>
</div><br/><br/>
<div class="produto" id="csharp">
<img src="..\img\csharp.png" align="left"/> C#
<p>R$<span class="preco">56.99</span>
</div><br/><br/>
<div class="produto" id="php">
<img src="..\img\php.png" align="left"/> PHP
<p>R$<span class="preco">31.99</span>
</div><br/><br/>
<div class="produto" id="pbuilder">
<img src="..\img\ruby.png" align="left"/> Ruby
<p>R$<span class="preco">45.99</span>
</div><br/><br/>
</div>
</p>
</body>
</html>Observe também que a medida que o grau de complexidade do uso de determinadas funções cresce no jQuery, novos elementos e atributos surgem para atender a essa mesma complexidade. A grande maioria dos atributos das funções jQuery são opcionais, mais é muito importante que você os conheça para saber usar todo o poder que a biblioteca tem a oferecer.
Para testar o exemplo é preciso que você faça download de algumas imagens para representar cada um dos itens da página de compras. Você pode baixar as que desejar ou simplesmente usar as dos projeto em questão através do download do código fonte no link do artigo. O CSS usado serviu apenas para organizar melhor os componentes da tela de modo que a mesma pudesse ser bem visualizada e bem- disposta. Veja o resultado final na Figura 5.
Redimensionando elementos HTML
Usando o mesmo exemplo anterior, a única alteração que faremos será na função JavaScript de chamada ao jQuery. Ao invés de usar a função draggable(), agora substituiremos a mesma pela função resizable() conforme Listagem 5.
01 $(document).ready(function() {
02 $("#divDrag").resizable();
03 });Ou se preferir que a div atenda às duas funções ao mesmo tempo, pode usar o recurso de chamada recursiva nas funções (Listagem 6), uma vez que as mesmas sempre retornam o objeto utilizado. Isso fará com que a div seja redimensionável e reposicionável ao mesmo tempo.
01 $(document).ready(function() {
02 $("#divDrag").draggable().resizable();
03 });Dessa forma, o efeito aplicado se assemelhará ao da Figura 6. Repare que no canto direito embaixo da div apareceram agora dois traços que representam a habilidade que o componente tem de ser redimensionado. Esse mesmo efeito já pode ser observado em componentes como textarea’s, por exemplo, que tem essa habilidade configurada por padrão.
Classificando Elementos
Um recurso ainda mais interessante sobre a junção de funções no jQuery, assim como o uso do drag, é o recurso de classificar elementos HTML pelo framework. A função sortable() cumpre esse papel quando usada dentro de um número x de componentes de mesmo tipo, tais como <li>’s, para compor listas ordenadas ou não.
Considere então uma lista de opções que podem ser dispostas e reorganizadas a qualquer momento. Ao usar a função na raiz da lista, temos, através da mesma função, a possibilidade de (re) classificá-los.
Na Listagem 7, temos um exemplo de como a função reage. Note a simplicidade das chamadas; após ter a estrutura (HTML) montada, as chamadas JavaScript se tornam muito simples e o efeito elegante como desejado.
<!--Chamada JavaScript à função -->
$(document).ready(function() {
$('#lista_sort').sortable();
});
<!--Lista com elementos de teste -->
<ul id="lista_sort">
<li>Opção 1</li>
<li>Opção 2</li>
<li>Opção 3</li>
<li>Opção 4</li>
<li>Opção 5</li>
</ul>Para ver o efeito aplicado a um exemplo mais próximo da realidade, crie um novo arquivo na pasta pages chamado sortable-lista.html e inclua no mesmo a Listagem 8. Ela será responsável por fazer a criação de uma lista com CSS aplicado e aplicar a função em questão.
<!doctype html>
<html>
<head>
<title>Sortable - Devmedia</title>
<style type="text/css">
body{
background-color: white;
color: black;
font-weight: bold;
}
#sortable {
list-style-type: none;
width: 300px;
}
#sortable li {
margin: 6px;
padding: 5px;
background-color: green;
cursor:pointer;
}
#sortable li.placeholder {
height: 1.5em;
background-color: red;
}
</style>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/
jqueryui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/JavaScript">
$(function() {
$("#sortable").sortable({
placeholder: 'placeholder'
});
$("#sortable").disableSelection();
});
</script>
</head>
<body>
Lista de Cursos:
<ul id="sortable">
<li>Java</li>
<li>C#</li>
<li>Ruby</li>
<li>PHP</li>
<li>Python</li>
</ul>
</body>
50</html>Perceba que a função sortable também faz uso de atributos e neste exemplo temos o exemplo do atributo “placeholder” sendo usado com a finalidade de informar qual classe CSS será chamada quando o elemento for movido, dando a impressão de que o efeito deixa uma espécie de lacuna quando executado.
Veja o resultado do exemplo em questão representado na Figura 7.
Widgets
Widget é um termo técnico criado para definir componentes ou pedaços de interface gráfica que proveem funcionalidades básicas como: botões, listas, ícones, janelas, etc. Estes são muito comuns em Sistemas Operacionais para representar pequenos aplicativos que pairam pelo desktop com funcionalidades específicas.
Accordion
O efeito acordeão, assim chamado, é bem comum em aplicativos desktop e agora também web. Com ele, é possível organizar um texto demasiado extenso em div’s que se escondem e se mostram uma por vez. O nome se deve em vista do instrumento musical que tem efeito semelhante.
O acordeão transforma uma lista em uma representação gráfica dessa mesma lista, permitindo que os usuários naveguem entre cada item da lista, vendo uma, e somente uma seção de cada vez. Em alguns círculos de desenvolvedores web, este widget é chamado de “Barra do Outlook”, depois que o programa originou seu uso há alguns anos atrás. Um erro bem comum com esta ferramenta é tentar obter mais do que uma seção visível ao mesmo tempo. Este widget não foi feito para isso.
Ao contrário, ele exibirá apenas uma seção de cada vez, e é eficaz para conter muitas informações numa seção. Este elemento depende muito da configuração correta da HTML para funcionar corretamente. Em outras palavras, você precisa configurar a HTML na expectativa de usar o widget do acordeão corretamente de acordo com os itens HTML escolhidos e usados.
Para criar um accordion em jQuery, você deve seguir uma estrutura padrão de div’s e cabeçalhos. Para tanto, podemos ter um HTML tal como se encontra na Listagem 9.
O uso de listas ul, ol com elementos de links (tag a) também podem ser usados para a exibição correta dos acordeões.
<div id="acordeon">
<h3>Seção 1</h3>
<div>
Seção 1
</div>
<h3>Seção 2</h3>
<div>
Seção 2
</div>
<h3>Seção 3</h3>
<div>
Seção 3
</div>
</div>Os ’ são responsáveis por demarcar o local onde serão criados os cabeçalhos de cada item da lista. E as divs logo abaixo de cada um, serão o conteúdo do que aparecerá no item selecionado.
Para fazer com que o exemplo funcione, insira no script de inicialização da página o código disponível na Listagem 10.
$(document).ready(function() {
$('#acordeon').accordion();
});Na Figura 8 está o resultado do código usado na Listagem 10.
Calendar
Um recurso cada vez mais comum em aplicações web é o uso de calendários para seleção de datas viabilizadas pela visualização real de um calendário gráfico. Esse tipo de recurso foi disponibilizado, inicialmente, por alguns frameworks JavaScript, com junção de imagens e efeitos para criar o dito calendário. Algumas vezes as configurações eram demasiadas demoradas e complexas de serem feitas. Daí então, o jQuery UI sentiu a necessidade de incluir esse componente na sua lista de widgets.
Para configurar um calendário jQuery você precisa inicialmente de toda a lista de configurações e import’s feitos anteriormente. Conforme citado anteriormente, está tudo dentro do framework. Logo após, precisa criar um input (esse é o uso padrão do componente), dar um id ao mesmo e depois adicionar o script de criação (chamada) do calendário ao campo, via JavaScript. Na Listagem 11 você pode ver o código usado e na Figura 9 o resultado do mesmo.
01 <!--Campo input para a data -->
02 Data: <input type="text" id="data" />
03 <!--Código de chamada no JavaScript -->
04 $(document).ready(function() {
05 $('#data').datepicker();
06 });
Existem várias formas de lidar com esse componente, dentre elas o uso de um botão para acionar o calendário ou a seleção de efeitos diferentes para exibir o mesmo, por exemplo. Todas estas formas variam no uso do código e tomariam muito espaço se fossem mostradas aqui, portanto, você pode conferi-las no site oficial do projeto.
O uso do ícone é o mais comum, além de mais intuitivo, uma vez que assim o usuário pode saber que deve selecionar a data clicando ali ou, pelo menos, que o campo é um campo de data. Paralelo a isso, fica a seu cargo, como programador, definir se deve ou não habilitar a seleção de datas somente pelo calendário ou também pelo campo manualmente (essa estratégia é comum para evitar que o usuário digite valores indevidos no campo, entretanto “não” deve ser a única estratégia em uma aplicação web).
Para tanto, a única alteração ocorrerá na chamada à função jQuery datepicker(), uma vez que novos parâmetros serão adicionados. Com posse do ícone de botão, você poderá adicionar o código mostrado na Listagem 12, considerando que o mesmo ícone se encontre numa pasta chamada img.
$(document).ready(function() {
$('#data').datepicker({
showOn: "button",
buttonImage: "img/calendar.png",
buttonImageOnly: true
});
});Abaixo você pode conferir o que significa cada um dos parâmetros adicionados à função:
- showOn: Essa propriedade determina quando o calendário deverá ser exibido. São três opções disponíveis:
- Quando o campo input receber o foco;
- Quando o botão for clicado;
- Quando os dois eventos anteriores acontecerem.
Os valores para estas mesmas opções são respectivamente: focus, button e both.
- buttonImage: Representa o valor do caminho referente à imagem usada para exibir o ícone de calendário. O valor é composto de uma string comum com o mesmo caminho. Opcionalmente, você poderá usar a opção buttonText para configurar o texto que aparecerá no atributo alt da tag HTML img.
- buttonImageOnly: Propriedade usada para marcar se o botão deverá constituir apenas uma imagem no âmbito HTML, ou seja, aparecer por si só, ou se deverá estar inserida em um botão HTML. Os valores possíveis são true e false, quando a primeira opção demarca que a imagem deve aparecer no HTML.
Na Figura 10 você pode visualizar como fica o calendário, após a referida alteração.
Efeitos
Quando se ouve falar sobre o mundo client side, sobre as funcionalidades suportadas e/ou interpretadas por um browser para prover dinamismo às páginas web, também é possível ver que o JavaScript e os efeitos passíveis de serem gerados pelo mesmo são bem conhecidos.
No mundo jQuery, efeito é uma palavra bem recorrente, e a partir dele é possível dinamizar pedaços de HTML criando resultados bem interessantes. Aqui, serão listados alguns efeitos mais usados e sua forma de uso junto ao framework.
Os efeitos basicamente estão ligados a um tipo (explosão, sanfona, etc), à visibilidade do campo e/ou à animação do mesmo.
Tabs
As Tabs (guias) HTML tornaram-se um dos componentes de interface de usuário mais utilizados em web design. Tabs são geralmente usadas para quebrar o conteúdo em várias seções que podem ser trocadas para economizar espaço. Diferentes implementações e aplicações das tabs HTML estão disponíveis e a jQuery UI é um das mais simples.
Para adicionar tabs jQuery em sua página HTML, primeiro tenha certeza que você incluiu o arquivo css tema corretamente em html. Se os temas css não estiverem definidos corretamente, as tabs jQuery não serão processadas corretamente. Note que esta é uma configuração a todos os widgets aqui citados. Em seguida, crie o arquivo HTML que contém o código da guia (Este pode ser incluído na index.html, onde estamos desenvolvendo os códigos principais). A Listagem 13 expressa o código necessário para construir tabs na jQuery.
<div id="tabs">
<ul>
<li><a href="#java">Java</a></li>
<li><a href="#csharp">C#</a></li>
<li><a href="#php">PHP</a></li>
<li><a href="#ruby">Ruby</a></li>
</ul>
</div>A Listagem 3 está fazendo uso de listas não ordenadas para exibição dos valores das tabs. Note que todo o trabalho de exibição é feita pelo arquivo JavaScript da jQuery UI em conjunto com os seus arquivos CSS. Para que ao clicar em cada item da lista seja exibido um texto referente, é necessário adicionar o código da Listagem 14 logo abaixo do elemento <ul>.
<div id="java">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="csharp">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="ruby">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>O resultado pode ser visto na Figura 11.
Modal Dialog
Os diálogos modais se fazem cada vez mais importantes e presentes nas aplicações web. Eles permitem que você exiba o conteúdo dentro de uma janela flutuante que tem uma barra de título, área de conteúdo, barra de botões, uma alça para arrastar e soltar e botão de fechar. Ele também pode ser movido, redimensionado e fechado. Os exemplos que se seguem demonstram o uso do elemento de diálogo.
Para criar um diálogo básico basta chamar o método dialog() em uma div. O framework jQuery UI converterá a div em uma caixa de diálogo modal. Para criar uma caixa de diálogo modal em vez disso, defina a opção modal (uma caixa de diálogo modal impede a interação com o resto da página enquanto ele estiver ativo, bloqueando-a). Você também pode especificar a opção para especificar os botões que devem ser exibidos na caixa de diálogo. O exemplo ilustrado na Listagem 15 mostra como criar uma caixa de diálogo modal com botões Sim/Não.
<!doctype html>
<html>
<head>
<title>Dialog simples com botões - Devmedia</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/
jqueryui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/JavaScript">
$(function() {
$("#dialog").dialog({
modal: true,
resizable: false,
buttons: {
"Ok": function() {
alert("Tem certeza?");
$(this).dialog("close");
},
"No, obg! :(": function() {
$(this).dialog("close");
}
}
});
});
</script>
</head>
<body>
<div id="dialog" title="Web Magazine">
<p>
Oi, seja bem vindo a revista Web Magazine da Devmedia<br>
Esperamos que aprecie!
</p>
</div>
</body>
</html>Confira o resultado expresso na Figura 12.
Show, Hide, Toggle
A função show(), como o próprio nome denota, é usada para exibir elementos. Ela age basicamente sobre a propriedade CSS display disponível para todos os componentes HTML. Com o jQuery UI é possível usar essa função (já disponível no jQuery core) atrelada aos efeitos citados e combinados. Veja na Listagem 16 alguns exemplos de uso da função, comentados para casos diferentes. Para os mesmos exemplos será usada como tag HTML de teste a divDrag da Listagem 3.
<!-- Os parâmetros representam em ordem 1) o efeito selecionado
(existe uma lista de valores possíveis, com vários efeitos, consulte a
lista no site oficial do projeto); 2) os parâmetros opcionais
(específicos para alguns efeitos); 3) a duração do efeito,
em milissegundos (default: 400); e 4) a função de callback,
usada para quando se deseja executar alguma função após o
término do efeito. -->
$( "#divDrag" ).show( “size”, {width: 500, height: 300}, 500, null );
As outras duas funções funcionam da mesma forma que a anterior, a diferença se resume apenas ao efeito final. A função hide() esconde o componente e a toggle() funciona como um botão toggle, que ao clicar efetua os dois efeitos anteriores em ordem de clique.
Animate do jQuery
A função animate() do jQuery é usada, a título do próprio nome, para animar um componente HTML, geralmente div. Ela é bem semelhante às funções usadas anteriormente, como a toggle, no entanto, é possível alterar CSS enquanto o efeito é implementado. Na Listagem 17 tem um exemplo de como usar a função.
$(document).ready(function() {
$("#divDrag").animate({
<!—Cor de fundo -->
backgroundColor: "yellow",
<!—Cor da fonte -->
color: "black",
<!—Duração do efeito -->
}, 1000 );
});Existem muitas outras coisas que podem ser faladas acerca do jQuery UI. Muitas delas são esquecidas pelos programadores front-end, ou sequer são lembradas. Mas o poder desse framework se revela aos primeiros contatos com o mesmo. Desde sua criação, muito já foi discutido, melhorado e evoluído. E é notável a evolução que a jQuery UI teve desde sua criação, ganhando cada vez mais respeito e apreciação do mercado de desenvolvimento web.
Conforme falado anteriormente, muito pode ser encontrado no próprio site do projeto, além disso, existe um blog mantido pelo mesmo, onde você pode encontrar muito mais sobre novidades, tutoriais, etc. Além de uma página para o fórum oficial, onde você pode discutir vários tópicos acerca desse mesmo assunto (veja as referências na seção de links).
Não é de hoje que ter bons conhecimentos acerca de JavaScript, CSS e tecnologias front-end se faz necessário no mundo de desenvolvimento web. Mais que isso, é preciso ter domínio das ferramentas mais usadas e saber conectar as mesmas dentro de um universo organizado, distribuído e programático.
Tudo que foi mostrado aqui, além do que você encontrar pela grande web, pode te ajudar a basear teus conhecimentos e solidificá-los se quiser investir nisso, mas de longe é assegurado que jQuery UI é um framework amplamente utilizado e aceito pela comunidade web.
