PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY ...frozza/2013.1/TSI11... · JQUERY...

PROGRAMAÇÃO PARADISPOSITIVOS MÓVEIS- INTRODUÇÃO A JQUERY MOBILEProf. Angelo Augusto Frozza, M.Sc.http://about.me/TilFrozza

ROTEIRO

Introdução

Principais características Página dentro de página Transições de página Caixas de diálogo Botões Elementos de formulário Listas Temas Eventos

JQUERY MOBILE

Para utilizar o JQuery Mobile você precisa incluir três coisas no seu HTML:

Script do JQuery http://code.jquery.com/jquery-1.5.min.js

Script do JQuery Mobile Onde estão os métodos específicos para mobile http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js

CSS da interface do usuário (UI) para JQuery Mobile http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css

JQUERY MOBILE

Primeiro exemplo (index.html)

<!DOCTYPE html> <html>

<head> <title>Primeira Página</title> <script type="text/javascript" src="http://code.jquery.com/jquery-

1.5.min.js"></script> <script type="text/javascript"

src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> <link rel="stylesheet"

href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> </head> <body>

<div data-role="page"> <div data-role="header">

<h1>Primeira página</h1> </div> <div data-role="content">

<p>Essa é sua primeira página para dispositivos móveis</p> </div>

</div> </body>

</html>

JQUERY MOBILE

A partir do HTML 5 pode-se colocar metadados nas tagsusando o data-*

Então a essência do JQuery Mobile é basicamenteutilizar o atributo data-* para as diferentesfuncionalidades e aparências.

Alguns atributos data-* que podem ser utilizados nas diferentes tags: data-role data-theme data-icon data-transition

JQUERY MOBILE

Exemplo de uso do data-*

<li class="comentario"

data-nome="Tecnologia em Sistemas para Internet"

data-cidade="Camboriú"

data-estado="SC"

data-pais="Brasil"

data-lang="pt-br">

<b>Programação para DM</b>

<span>Muito boa essa aula!</span>

</li>

JQUERY MOBILE

Exemplo de uso do data-*

.comentario [data-pais=Brasil] {color: yellow;background-color:green;

}.comentario [data-pais=Japao] {

color: red;background-color:white;

}...

JQUERY MOBILE

Como pode-se ver, o conteúdo da página em si é envoltoem uma div com atributo data-role="page". Isso permite que o jQuery Mobile saiba onde o conteúdo está

na marcação.

Dentro da div "page", existem outros div data-role "header" , "content" e "footer" Todos eles são opcionais, embora provavelmente seja incluido

pelo menos o div "content".

JQUERY MOBILE

<div data-role="header">

Essa div permite criar uma barra de ferramentas naparte superior da página, usada para coisas como otítulo da página e os botões. Normalmente existe pelo menos um botão "Voltar" no qual o

usuário pode tocar para retornar à página anterior.

Ao acrescentar dados de posição = "fixo" para ocabeçalho, pode-se ter certeza que o cabeçalho ficarásempre no topo da tela.

JQUERY MOBILE

<div data-role="content">

Contém o conteúdo principal da página, como texto,imagens, botões, listas, formulários e assim por diante.

JQUERY MOBILE

<div data-role="footer">

Cria uma barra de ferramentas na parte inferior dapágina, que é bastante útil para coisas como botões defunção principal. Ao adicionar os dados de posição = "fixo" para o rodapé,

pode-se ter certeza que sempre fica na parte inferior da tela.

JQUERY MOBILE

Página dentro de página

Uma página HTML pode conter duas ou mais div “page“, cada uma com um id diferente

<div data-role="page" id="home">

...

</div>

<div data-role="page" id="about">

... </div>

JQUERY MOBILE

Página dentro de página

A página inicial possui link a página about, enquanto que a segunda página tem um link para a página home.

JQuery Mobile automaticamente intercepta essas ligações de modo que cada div apareça como uma nóva página:

<div data-role="page" id="home"><div data-role="content">

<p><a href="#about">"Sobre" deste app...</a>

</p> </div>

</div>

<div data-role="page" id="about"><div data-role="content">

<p>Isto funciona! <a href="#home">Início</a>

</p> </div>

</div>

JQUERY MOBILE

Transições de página

JQuery Mobile permite aplicar diferentes efeitos de transição para uma nova página.

Para tanto, basta adicionar em cada link um atributo data-transition

<a href="#about" data-transition="flip">About</a>

Os valores possíveis estão na documentação da jQuery Mobilehttp://view.jquerymobile.com/1.3.0/docs/widgets/transitions/

JQUERY MOBILE

Caixas de diálogo

Pode-se transformar uma página em Caixa de diálogo ao adicionar na tag de link o atributo data-rel="dialog“.A caixa de dialogo aparecerá com cantos arredondados,

margens e um fundo escuro. Também pode-se adicionar uma transição, de forma a

demonstrar que está abrindo uma caixa de diálogo.

<a href="#about" data-rel="dialog" data-transition="slideup">Sobre…</a>

JQUERY MOBILE

Botões

Botões são uma parte essencial de qualquer aplicativo baseado no toque.

Eles são preferíveis aos links porque fornecem um alvo maior quando a intenção é tocar. Lembre-se do conceito do “Dedo gordo”

Para transformar um link em um botão, basta adicionar o atributo data-role="button" na tag do link:

<a href="#about" data-role="button" data-transition="slideup">Sobre…</a>

JQUERY MOBILE

Elementos de formulário

O jQuery Mobile substitui automaticamente o padrão de controles em formulários HTML P.ex. campos de texto, caixas e listas de seleção; Controles personalizados que funcionam melhor com uma interface

sensível ao toque e mais flexível; Caixas de seleção são feitas bem maiores pois elas são mais fáceis

de tocar;

JQUERY MOBILE


O jQuery Mobile também registra rótulos e campos de formulário com base na largura de exibição do dispositivo. P.ex. se o display tem 480 pixels de largura, os rótulos são colocados

acima dos campos para economizar espaço horizontal; Em telas mais amplas, os rótulos são exibidos ao lado dos campos.

JQUERY MOBILE


Outro recurso interessante é o agrupamento de botões do tipo radio e checkbox em um fieldset, com atributo data-role="controlgroup"; jQuery Mobile automaticamente implemenenta estilos aos campos,

observando o modo como eles estão agrupados, sem intervalos entre cada campo e arredondando os cantos nos campos superior e inferior.

JQUERY MOBILE


Exemplo:

Aula004-Exemplo04-Formularios.html

JQUERY MOBILE

Listas

Exibições de lista são um recurso muito poderoso do jQueryMobile;

Elas permitem trabalhar um padrão de estilo não-ordenado ou de listas ordenadas em uma variedade de formas úteis;

Para ativar uma lista regular em uma exibição de lista, adiciona-se o atributo data-role="listview" nas tags ul ou ol;

A seguir são mostradas algumas das coisas que se pode criar usando exibições de lista...

Aula004-Exemplo05-Listas.html

JQUERY MOBILE

Listas

Uma lista simples de itens de texto, com uma caixa em torno de cada item;

Uma lista de links - coloca-se uma tag link em um item da lista e o jQuery adiciona automaticamente um ícone de seta ('>' ) do lado direito de cada item da lista.

JQUERY MOBILE

Listas

Listas aninhadas - para aninhar uma tag ul dentro de uma tag li o jQuery automaticamente cria uma "segunda" página para a lista

incorporada, ligando a partir do original. Isto é muito útil para a criação de árvores de opções de menu, configurações e assim por diante;

Listas de botões divididos - Ao colocar dois links dentro de uma tag li, pode-se criar um item da lista com uma barra de divisão vertical no lado direito do item. O usuário pode então tocar em qualquer lado (esquerdo ou direito) do

item da lista para conseguir coisas diferentes (como a visualização ou compra);

JQUERY MOBILE

Listas

Bolhas de contagem - ao incluir um elemento com uma classe de contagem em um item da lista, o jQuery cria um pequeno ícone de "bolha" no lado direito do item de lista contendo o conteúdo do elemento. Isso é ótimo para coisas como contagens de mensagens em listas de

correio;

Filtragem de pesquisa - ao adicionar o atributo data-filter="true" para uma tag ul ou ol, então a lista fica disponível para pesquisa. Uma caixa de texto "Filtrar resultados ..." aparece acima da lista,

permitindo ao usuário diminuir as opções; Perfeito para grandes listas;

JQUERY MOBILE

Listas

Divisores de lista para as listas com divisão em seções. Basta adicionar o atributo data-role="list-divider" para qualquer item

da lista;

Miniaturas e ícones – ao colocar um elemento img no início de um item da lista, o jQuery vai usar a imagem como uma miniatura da lista em escala de 80 x 80 pixels. Ao adicionar uma classe ui-li-icon para a img, o ícone terá escala de

16 x 16 pixels.

JQUERY MOBILE

Listas

Veja mais detalhes em:

Criando lista com jQuery Mobile – Parte 01http://imasters.com.br/artigo/20192/jquery/criando-lista-com-jquery-mobile-parte-01/

Criando lista com jQuery Mobile – Parte 02http://imasters.com.br/artigo/20272/mobile/criando-lista-com-jquery-mobile-parte-02/

JQUERY MOBILE

Temas

O estilo de cores cinza, preto e azul com Widgetsarredondados produzido pelo jQuery Mobile permitem uma experiência muito agradável

Porém, a vida seria monótona se todos tivessem que usar o mesmo estilo em todos os aplicativos móveis!

JQUERY MOBILE

Temas

Por isso, jQuery Mobile permite criar temas que personalizam coisas como, por exemplo: Família de fontes Sombras Valores de raio de botões e caixas de canto Conjuntos de ícones

JQUERY MOBILE

Temas

Cada tema pode conter até 26 amostras de cores diferentes (rotuladas de 'a' a 'z'), que controlam a cor de primeiro plano, cor de fundo, gradiente. O tema padrão vem com 5 amostras.

Normalmente, para fazer um elemento de página usar uma amostra particular, usa-se o atributo data-theme:

Aula004-Exemplo06-Temas.html

JQUERY MOBILE

Eventos

Pode-se dizer que são os eventos que tornam a linguagem JavaScript útil.

Um script depende da ocorrência de um evento para realizar a ação nele prevista.

Toda vez que ocorre interação com um documento web, um evento é disparado. P.ex. O toque em um link ou o arraste da tela caracterizam a

ocorrência de um evento.

JQUERY MOBILE

Eventos

Tornam mais fácil a construção de interfaces de usuário;

jQuery Mobile adiciona alguns eventos específicos usados para detectar ações executadas em DM; P.ex: Pode-se usar o evento taphold para detectar se o usuário tocou

e segurou o dedo em um elemento (1 segundo); O evento swipe ocorre quando o usuário toca um elemento,

arrastando-o horizontalmente para a esquerda ou direita por uma distância no mínimo igual a 30px.

Aula004-Exemplo07-Eventos.html

REFERÊNCIAS

Consulte:

SILVA, M. S. jQuery Mobile: desenvolva aplicações web para dispositivos móveis com HTML 5, CSS3, Ajax, jQuery e jQueryUI. São Paulo: Novatec, 2012.

Também pode consultar o material complementar no link:http://www.ifc-camboriu.edu.br/~frozza/2013.1/pdm.html

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY ...frozza/2013.1/TSI11... · JQUERY...

Documents

Transcript of PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY ...frozza/2013.1/TSI11... · JQUERY...