Frete Grátis
  • Google Plus

Jquery Ui - Componentes de Interface Rica Para Suas Aplicações Web (Cód: 4063773)

Silva, Maurício Samy

NOVATEC

Ooopss! Este produto está temporariamente indisponível.
Mas não se preocupe, nós avisamos quando ele chegar.

Ooops! Este produto não está mais a venda.
Mas não se preocupe, temos uma versão atualizada para você.

Ooopss! Este produto está fora de linha, mas temos outras opções para você.
Veja nossas sugestões abaixo!

R$ 119,00 em até 3x de R$ 39,67 sem juros
Cartão Saraiva R$ 113,05 (-5%) em até 1x no cartão ou em até 5x de R$ 23,80 sem juros
Grátis

Cartão Saraiva

Descrição

A “jQuery UI” é uma biblioteca com base em “jQuery”que facilita a criação de elementos de interface de usuário com um mínimo de código e sintaxe idêntica à da biblioteca “jQuery”, e é compatível com os padrões web.Este livro tem por objetivo fornecer aos profissionais envolvidos na criação de sites, tanto na área de design quanto na de desenvolvimento e programação, os conceitos fundamentais e as técnicas de programação necessárias ao emprego da biblioteca” jQuery UI” na criação de interfaces ricas e de alta interatividade, tornando-as visualmente mais agradáveis e amigáveis. Serão fornecidas informações detalhadas do funcionamento básico da biblioteca” jQuery UI”, estudando seus componentes, mecanismos e funcionalidades. Explicações teóricas em linguagem corrente e clara são acompanhadas de exemplos práticos explicados passo a passo e complementados por arquivo HTML para consulta. Profissionais da área de design, familiarizados com as técnicas aqui descritas, contarão com uma valiosa fonte de inspiração no planejamento das funcionalidades para incrementar suas criações. Para tirar o máximo proveito dos ensinamentos contidos no livro, são pré-requisitos: familiaridade com a biblioteca ”jQuery”, bons conhecimentos de HTML e CSS e conhecer os fundamentos e a sintaxe da linguagem JavaScript.

Características

Produto sob encomenda Não
Editora NOVATEC
Cód. Barras 9788575222966
Altura 23.50 cm
I.S.B.N. 9788575222966
Profundidade 3.80 cm
Acabamento Brochura
Número da edição 1
Ano da edição 2012
Idioma Português
Número de Páginas 736
Peso 1.10 Kg
Largura 17.00 cm
AutorSilva, Maurício Samy

Leia um trecho

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. 32 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 Descrição Componentes Draggable (Arrastar) Cria elementos capazes de serem arrastados pela interface.Droppable (Soltar) Cria elementos para receber os elementos arrastáveis. Resizable (Dimensionar) Cria elementos cujas dimensões podem ser controladas pelo usuário. Selectable (Selecionar) Cria elementos que possam ser selecionados pelo usuário, quer individualmente quer em grupos. Sortable (Ordenar) Cria elementos que possam ser ordenados pelo usuário com ação de arrastar e soltar. Widgets Accordion (Acordeão) Cria o efeito acordeão, para ocultar/mostrarconteúdos. Autocomplete (Atocompletamento) Apresenta ao usuário uma lista de sugestões de palavras à medida que ele digita em um campo de texto. Button (Botão) Cria de vários tipos de botão. Datepicker (Seletor de datas) Cria uma janela popup para seleção da data a ser digitada em um campo destinado a coletar uma data. Dialog (Janela de diálogo) Cria vários tipos de janela de diálogo, entre elas janelas modais. Progressbar (Barra de progresso) Cria uma barra indicativa do andamento de uma tarefa. Slider (Controle deslizante) Cria um botão arrastável em uma guia para seleção de um valor compreendido em determinada faixa. Tabs (Abas) Cria uma interface cuja navegação é feita com o uso de abas. Capítulo 1 ¦ Apresentação da jQuery UI 33 Grupo Nome Descrição Efeitos Color Animation Esse efeito destina-se a animar as cores de um elemento. Toggle classEsses efeitos destinam-se a animar elementos baseados na manipulação dos seus atributos classe. Add class Remove class Switch class Effect 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. Toggle Aplica um dos efeitos padrão da biblioteca jQuery com a finalidade de alternar entre ocultar e esconder um conteúdo. Hide Efeito destinado a ocultar um conteúdo. Show Efeito destinado a mostrar um conteúdo. Utilidades Position Destina-se a controlar e manipular o posicionamento de elementos na interface. Widgets 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. ...
... 34 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. ... ... 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 35 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 Query 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. Useapenas 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. 36 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 37 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:38 jQuery UI ... 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. Capítulo 1 ¦ Apresentação da jQuery UI 39 [/exemplos/c1/template-dos-exemplos.html] Livro jQuery UI do Maujor

Capítulo N — Nome do capítulo

Tema: nome do tema do capítulo

40 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.

Avaliações

Avaliação geral: 0

Você está revisando: Jquery Ui - Componentes de Interface Rica Para Suas Aplicações Web