jQuery UI by Novatec Editora

jQuery UI Componentes de interface rica para suas aplicações web Maurício Samy Silva

Novatec

Copyright © 2012 da Novatec Editora Ltda. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida a reprodução desta obra, mesmo parcial, por qualquer processo, sem prévia autorização, por escrito, do autor e da Editora. Editor: Rubens Prates Revisão gramatical: Alessandro Thomé Editoração eletrônica: Carolina Kuwabata Capa: Carolina Kuwabata ISBN: 978-85-7522-296-6 Histórico das impressões: Maio/2012

Primeira edição

Novatec Editora Ltda. Rua Luís Antônio dos Santos 110 02460-000 – São Paulo, SP – Brasil Tel.: +55 11 2959-6529 Fax: +55 11 2950-8869 E-mail: novatec@novatec.com.br Site: www.novatec.com.br Twitter: twitter.com/novateceditora Facebook: facebook.com/novatec LinkedIn: linkedin.com/in/novatec

Dados

Internacionais de Catalogação na Publicação (Câmara Brasileira do Livro, SP, Brasil) Silva, Maurício Samy jQuery UI : componentes de interface rica para suas aplicações web / Maurício Samy Silva. -São Paulo : Novatec Editora, 2012. Bibliografia ISBN 978-85-7522-296-6 1. HTML (Linguagem de programação) 2. jQuery UI 3. Web sites - Desenvolvimento I. Título.

12-05284

CDD-005.2762 Índices para catálogo sistemático: VC20120509

1. jQuery UI : Desenvolvimento de aplicações WEB : Computadores : Processamento de dados 005.2762

(CIP)

capítulo 1

Apresentação da jQuery UI

Nesse capítulo faremos a apresentação da biblioteca jQuery UI, relatando as suas possibilidades, funcionalidades e princípios gerais de funcionamento. Detalharemos as técnicas de instalação da biblioteca em uma aplicação mostrando como construir uma infraestrutura mínima de marcação HTML5 e todas as suas variantes, em condições de receber e tratar de maneira adequada os códigos nativos de criação dos diferentes elementos de interface disponibilizados pela biblioteca.

1.1 Apresentação jQuery UI é uma biblioteca JavaScript criada em 1º de julho de 2007 por um grupo de desenvolvimento que atualmente tem como gerente geral do projeto Richard D. Worth, cuja foto é mostrada na figura 1.1. Richard é consultor para interfaces de usuário trabalhando na Richly Interactive, Inc., em Washington, D.C. Morou no Rio de Janeiro nos anos 1996 e 1997 e em Recife nos anos de 1997 a 1999, fala português com fluência e não é raro esbarrarmos com ele em eventos de desenvolvimento pelo Brasil, onde costuma palestrar.

Figura 1.1 – Richard D. Worth. 31

jQuery UI

A biblioteca jQuery UI foi criada com o propósito de ser uma “biblioteca para a biblioteca jQuery” destinada à criação de elementos ricos de interface de usuário. Seu princípio geral de desenvolvimento adota a mesma filosofia que norteia a biblioteca jQuery, que é: “fazer mais escrevendo menos”. O uso da biblioteca jQuery UI possibilita ao autor criar elementos de interface de usuário com um mínimo de código e sintaxe idêntica à sintaxe da biblioteca jQuery. Os elementos de interface disponíveis na biblioteca foram classificados, de acordo com sua finalidade, em grupos conforme mostrado na tabela 1.1. Tabela 1.1 – Classificação e finalidade dos elementos de interface Grupo

Nome

Draggable (Arrastar) Droppable (Soltar) Componentes Resizable (Dimensionar) Selectable (Selecionar) Sortable (Ordenar) Accordion (Acordeão) Autocomplete (Atocompletamento) Button (Botão) Datepicker (Seletor de datas) Widgets Dialog (Janela de diálogo) Progressbar (Barra de progresso) Slider (Controle deslizante) Tabs (Abas)

Descrição

Cria elementos capazes de serem arrastados pela interface. Cria elementos para receber os elementos arrastáveis. Cria elementos cujas dimensões podem ser controladas pelo usuário. Cria elementos que possam ser selecionados pelo usuário, quer individualmente quer em grupos. Cria elementos que possam ser ordenados pelo usuário com ação de arrastar e soltar. Cria o efeito acordeão, para ocultar/mostrar conteúdos. Apresenta ao usuário uma lista de sugestões de palavras à medida que ele digita em um campo de texto. Cria de vários tipos de botão. Cria uma janela popup para seleção da data a ser digitada em um campo destinado a coletar uma data. Cria vários tipos de janela de diálogo, entre elas janelas modais. Cria uma barra indicativa do andamento de uma tarefa. Cria um botão arrastável em uma guia para seleção de um valor compreendido em determinada faixa. Cria uma interface cuja navegação é feita com o uso de abas.

Capítulo 1 ■ Apresentação da jQuery UI Grupo

Efeitos

Nome

Color Animation Toggle class Add class Remove class Switch class

Esses efeitos destinam-se a animar elementos baseados na manipulação dos seus atributos classe.

Effect

Toggle Hide Show Utilidades

Descrição

Esse efeito destina-se a animar as cores de um elemento.

Position Widgets

Aplica em um elemento uma série de efeitos de animação padrão da biblioteca jQuery, tais como os efeitos de esmaecimento, pulsação, balanço, sacudir etc. Aplica um dos efeitos padrão da biblioteca jQuery com a finalidade de alternar entre ocultar e esconder um conteúdo. Efeito destinado a ocultar um conteúdo. Efeito destinado a mostrar um conteúdo. Destina-se a controlar e manipular o posicionamento de elementos na interface. Destina-se à criação de widgets personalizados.

O princípio de funcionamento da biblioteca é a modificação do DOM. Para modificar o DOM os mecanismos nativos da biblioteca identificam a marcação HTML criada pelo autor e inserem elementos adicionais e atributos classes de modo a criar condições para a estilização adequada à criação do elemento de interface. Vejamos um exemplo geral sem preocupação com detalhes, mas consistente o bastante para demonstrar o príncipio de funcionamento e a modificação do DOM como descrito. Considere uma página na qual o autor pretende implementar um elemento div que possa ser arrastado, pelo usuário, livremente na tela. Observe a marcação existente na página para conseguir esse objetivo. ... <style> #drag { width: 200px; height: 100px; background: red; } </style> <script> $(function() { $('#drag').draggable(); // sintaxe jQuery para aplicação de um método da biblioteca }); </script> </head> <body> <div id="drag"></div> ...

jQuery UI

E é somente isso. Basta marcar o div com um id e no script aplicar um método chamado draggable() no objeto jQuery #drag. O funcionamento é assim: os mecanismos do método draggable() identificam no DOM o elemento ao qual ele foi aplicado e nele, elemento, insere classes do tipo ui-* nativas da biblioteca. Essas classes servem de referência para a estilização e para os scripts internos da biblioteca tornarem o elemento arrastável. Esse é um exemplo simples. Consideremos a seguir um exemplo mais complexo. ... <script> $(function() { $('#data').datepicker(); }); </script> </head> <body> <label>Data: <input type="text" id="data" /></label> ...

Nesse exemplo o autor pretende criar uma janela popup contendo um calendário para a seleção de uma data sempre que o usuário der o foco ao campo input. Aqui não é suficiente inserir classes no elemento input. Em dois momentos, quando a página é carregada e quando o usuário dá o foco ao campo da data, os mecanismos internos da biblioteca criam e inserem elementos div, span e table no DOM, que, devidamente estilizados pela folha de estilos nativa, os transformam em calendário e apresentam o calendário devidamente estilizado em uma janela popup próximo ao campo de entrada da data. Você poderá visualizar o funcionamento da biblioteca inspecionando o DOM no console do navegador. Depois que progredir na leitura do livro e aprender como criar os componentes da biblioteca, crie uma página que contenha um componente, por exemplo, um seletor de datas, abra o console do navegador e inspecione o DOM antes e depois de dar o foco ao campo de entrada da data. Chamamos de console do navegador a ferramenta nativa ou instalada como complemento em um navegador destinada a inspecionar o DOM, os scripts, as estilizações etc. de uma página aberta no navegador. O uso dessa ferramenta é indispensável caso o desenvolvedor pretenda personalizar as interfaces criadas com a biblioteca jQuery UI. Portanto, se você não conhece tal ferramenta, recomendo começar com a leitura de uma matéria escrita pelo Pedro Rogério, disponível em http://kwz.me/tl (http://www.pinceladasdaweb.com.br/blog/2011/10/08/ aprenda-mais-sobre-o-console-do-firebug/).

Capítulo 1 ■ Apresentação da jQuery UI

1.2 Download da biblioteca O primeiro passo para criar uma aplicação com uso das funcionalidades da biblioteca jQuery UI é fazer o download da biblioteca. Ao contrário da biblioteca jQuery e do framework jQuery Mobile, que estão hospedados em vários CDNs e prontos para serem lincados dos seus servidores públicos, a biblioteca jQuery UI, embora hospedada no CDN do Google, poderá ser personalizada de acordo com as necessidades do projeto ou de cada página e ser hospedada em servidor próprio. Isso ocorre porque a biblioteca é modularizada e é recomendável que o autor use apenas os módulos relativos aos componentes que irá usar em seu projeto, ou seja, se uma página usa os componentes Arrastar e Soltar, não há necessidade de se carregar os demais componentes da biblioteca. A modularidade é outra característica da biblioteca e visa a agilizar o carregamento das páginas. Se você deseja carregar a biblioteca completa, o que na maioria dos casos não é uma boa opção, poderá lincá-la do CDN do Google. Consulte a sintaxe para criar o link para aquele CDN em http://kwz.me/YV (http://code.google.com/ apis/libraries/devguide.html#jqueryUI). Se você deseja personalizar a biblioteca para suas necessidades, o que é uma boa opção, os arquivos para download estão disponíveis em uma interface denominada Download Builder, que em tradução livre significa Construtor de Download, hospedado em http://kwz.me/YV (http://jqueryui.com/download) e cuja interface é mostrada na figura 1.2.

Figura 1.2 – Download Builder.

jQuery UI

Após abrirmos a ferramenta Download Builder no navegador, devemos desmarcar todos checkboxes porventura marcados clicando o link (Des)Select all components (número 1 da figura) e a seguir escolhemos, em um menu do tipo dropdown (seleção), um tema nativo entre os 24 disponíveis e mais uma opção de não escolher tema algum para o caso de um projeto com personalização de tema (número 2 na figura). Notar que ao escolher o tema abre-se um link denominado Advanced Theme Settings que nos leva a um formulário para escolher um tema em escopo. Estudaremos tema em escopo no capítulo 16. O próximo passo consiste na marcação do checkbox do componente (ou os checkboxes dos componentes) que pretendemos usar no nossa aplicação. No exemplo da figura marcamos o componente Draggable (número 3 na figura). Feito isso, são marcados automaticamente (sem interferência do usuário) os scripts necessários ao funcionamento do componente escolhido (número 4 na figura), ou seja, os scripts dos quais o componente escolhido depende. Finalmente escolhemos uma entre duas versões da biblioteca, em geral a versão mais atual (número 5 na figura), e clicamos o botão Download. Para fazer a escolha do tema no menu de seleção como explicado anteriormente é necessário que o autor conheça com antecêndia as cores de cada um dos 24 temas disponíveis e relacionados pelos seus nomes. Podemos vizualizar os temas em uma ferramenta denominada Theme Roller, disponível em http://kwz.me/YX (http://jqueryui.com/themeroller). Essa ferramenta se destina a criar automaticamente um tema personalizado, mas oferece também a opção de visualização dos 24 temas nativos, não só possibilitando o download deles, mas principalmente oferecendo-nos a possibilidade de consultar a aparência de cada um deles. Na figura 1.3 mostramos a interface dessa ferramenta destacando o link denominado Gallery, destinado a abrir os thumbnails dos temas que, quando clicados, mostram o tema na janela principal (no lado direito) da interface. Na figura estamos mostrando o tema denominado Start, cujo thumbnail foi destacado na figura. A personalização de temas será estudada com detalhes no capítulo 16.

Fazendo o download da biblioteca conforme os passos mostrados, recebemos um arquivo comprimido (zipado) que, quando devidamente descomprimido, resulta em três diretórios e um arquivo index.html conforme mostrado na figura 1.4.

Capítulo 1 ■ Apresentação da jQuery UI

Figura 1.3 – Temas nativos.

Figura 1.4 – Arquivos do download da biblioteca.

A pasta developer-bundle e o arquivo index.html fornecem informações sobre os scripts e folhas de estilos da biblioteca personalizada pelo download, inclusive apresentando arquivos comentados com o propósito de esclarecer os desenvolvedores sobre as particularidades de tais arquivos. Essa pasta e o arquivo não interessam para o projeto da nossa interface, pois contêm informações que são relevantes para o desenvolvimento de temas personalizados, como veremos no capítulo 16. Assim, não precisam ser colocadas no servidor e não têm qualquer influência no funcionamento da biblioteca. As pastas js e css devem ser, de preferência, colocadas na raiz do site (ou aplicação), subidas para o servidor próprio, e os arquivos a serem lincados devem seguir a seguinte sintaxe:

jQuery UI <head> ... <link type="text/css" href="css/nome_do_tema/jquery-ui-versão.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-versão.min.js"></script> <script type="text/javascript" src="js/jquery-ui-verão.custom.min.js"></script> </head>

O caminho para os arquivos deve ser ajustado de acordo com a estrutura de diretórios e da pasta da aplicação, e o número das versões, de acordo com o que for baixado. O nome do tema no caminho para a folha de estilos deve ser aquele do tema escolhido quando fizemos o download dos arquivos da biblioteca (ver número 4 da figura 1.1 mostrada anteriormente, na qual o nome do tema é ui-lightness). Se você tiver dúvida sobre o nome do tema, abra o diretório css, ele contém uma pasta cujo nome é o nome do tema. Opcionalmente o arquivo da biblioteca jQuery poderá ser lincado de um CDN. Nesse caso recomendamos que o link aponte para a versão que foi baixada juntamente com a biblioteca jQuery UI. Para usar essa opção linque para o CDN da jQuery em http://kwz.me/Bh (http://code.jquery.com/jquery-versao.min.js).

1.3 Estrutura HTML Certamente, como desenvolvedores modernos que somos, iremos criar nossas aplicações com uso da linguagem de marcação HTML5, para tirar proveito de todas as suas ferramentas nativas, funcionalidades para acessibilidade e semântica. Assim, os exemplos deste livro serão desenvolvidos com uso da HTML5, sem contudo entrarmos nos detalhes da linguagem e muito menos nas ferramentas necessárias para servir HTML5 aos navegadores Internet Explorer, pois essa particularidade está fora do escopo deste livro e considera-se que o leitor conhece o desenvolvimento com uso da HTML5. Se você não se sentir confortável com a HTML5, adote XHTML ou mesmo HTML, pois os conceitos básicos da biblioteca jQuery UI se aplicam também a essas versões da linguagem de marcação. O template mínimo que adotaremos para criar os exemplos deste livro é conforme mostrado a seguir.

Capítulo 1 ■ Apresentação da jQuery UI

[/exemplos/c1/template-dos-exemplos.html] <!DOCTYPE html> <html lang="pt-br"> <head> <title>Livro jQuery UI do Maujor</title> <meta charset="utf-8" /> <link href="../estilos.css" rel="stylesheet" type="text/css" />  <link type="text/css" href="css/nome_do_tema/jquery-ui-versao.custom.css" rel="stylesheet" /> <script type="text/javascript" src="http://code.jquery.com/jquery-versao.min.js "></script> <script type="text/javascript" src="js/jquery-ui-versao.custom.min.js"></script> <script> //<![CDATA[ $(function() { // entra o código para criar elementos de interface }); //]]> </script> </head> <body class="capN"> <div id="tudo"> <div id="conteudo"> <header> <h1>Capítulo N &#8212; Nome do capítulo</h1> <p><a href="../index.html"></a></p> <div class="clear"></div> </header> <section>  <p class="tema">Tema: nome do tema do capítulo</p> </section> <footer> <nav><a href="../c9/barra-ferramentas.html">&laquo; anterior</a> | <a href="pt-br.html">próximo &raquo;</a></nav> <input type="button" value="RESET" onclick="window.location.reload()" id="reload" /> <div class="clear"></div> </footer> </div>  </div>  </body> </html>

jQuery UI Conforme mostrado no código do template, os scripts específicos para cada um dos exemplos serão incorporados à página, na seção head do documento, com a finalidade de facilitar a visualização e o estudo. Em situação real, coloque o script em um arquivo externo e linque para a página.

O template mostrado fornece uma página para apresentação dos exemplos do livro que, quando estilizada pela folha de estilos para as páginas exemplo, é renderizada conforme é mostrado na figura 1.5.

Figura 1.5 – Template dos exemplos.

Para cada capítulo do livro, os exemplos serão mostrados segundo um tema diferente, sendo que o próprio template se adapta às cores do tema. No arquivo que apresenta o template ([/exemplos/c1/template-dos-exemplos.html]) existe um link apontando para a folha de estilos do template. Abra aquela folha de estilos e examine-a para entender como foi construído o template e constate que não há conflitos com as folhas de estilos dos temas da biblioteca, exceto um ajuste no tamanho das fontes quando necessário.