OPTATIVA IV - PROGRAMAÇÃO PARA
DISPOSITIVOS MÓVEIS
Ó
- INTRODUÇÃO A JQUERY MOBILE
P f Angelo
Prof.
A
l A
Augusto
t F
Frozza, M
M.Sc.
S
http://about.me/TilFrozza
ROTEIRO
Introdução
Principais características
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
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/jquery1.5.min.js">
</
</script>
i t>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js">
</script>
y
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
</head>
<body>
<div data-role="page">
<di data-role="header">
<div
d t
l "h d ">
<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 tags
usando o data-*
Então a essência do JQueryy Mobile é basicamente
utilizar o atributo data-* para as diferentes
funcionalidades e aparências.
Alguns atributos data-* que podem ser utilizados nas
diferentes tags:
dif
data-role
data-theme
data theme
data-icon
data
data-transition
transition
JQUERY
MOBILE
Exemplo de uso do data-*
<li class="comentario"
data-nome="Tecnologia em Sistemas
para Internet"
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>
/li
JQUERY
MOBILE
Exemplo de uso do data-*
.comentario [data-pais=Brasil] {
color: yellow;
background-color:green;
}
.comentario [data-pais=Japao] {
color:
l
red;
d
background-color:white;
}
...
JQUERY
Como pode-se ver, o conteúdo da página em si é envolto
em uma div com atributo data-role="page".
MOBILE
Isso permite que o jQuery Mobile saiba em que parte o
conteúdo está na marcação.
Dentro da div "page", existem outros div data-role
"header"
"h
d " , "content"
"
" e "footer"
"f t "
Todos eles são opcionais, embora provavelmente seja incluido
pelo menos o div "content"
content .
JQUERY
MOBILE
<div data-role="header">
Essa div permite criar uma barra de ferramentas na
parte superior
p
p
da p
página,
g
usada p
para coisas como o
título da página e os botões.
Normalmente existe pelo menos um botão "Voltar" no qual o
usuário
á i pode
d tocar
t
para retornar
t
à página
á i anterior.
t i
Ao acrescentar
A
t
d d
dados
d posição
de
i ã = "fixo"
"fi " para o
cabeçalho, pode-se ter certeza que o cabeçalho ficará
sempre no topo da tela.
tela
JQUERY
MOBILE
<div data-role="content">
Contém o conteúdo principal da página, como texto,
imagens,
g
botões, listas, formulários e assim p
por diante.
JQUERY
MOBILE
<div data-role="footer">
Cria uma barra de ferramentas na parte inferior da
página,
p
g
que é bastante útil p
q
para coisas como botões de
função principal.
Ao adicionar os dados de posição = "fixo" para o rodapé,
pode-se
d
t certeza
ter
t
que sempre fica
fi na parte
t inferior
i f i da
d tela.
t l
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 apontando para a página about,
about enquanto
que a segunda página tem um link apontando 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>
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
página.
Para tanto, basta adicionar em cada link um
atributo data-transition
data transition
<a href
href="#about"
#about data
data-transition="flip">About</a>
transition flip >About</a>
Os valores possíveis estão na documentação da
jQuery Mobile
http://view.jquerymobile.com/1.3.0/docs/widgets/transitions/
j
y
g
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
data-rel="dialog“.
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" datatransition="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
a a ttransformar
a so a u
um link e
em u
um botão, basta ad
adicionar
co a o
atributo data-role="button" na tag do link:
<a href="#about" data-role="button" datatransition="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
Elementos
de formulário
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
i
d
dos campos para economizar
i
espaço h
horizontal;
i
t l
Em telas mais amplas, os rótulos são exibidos ao lado dos campos.
JQUERY
MOBILE
Elementos
de formulário
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
b
d o modo
d como eles
l estão
tã agrupados,
d
sem iintervalos
t
l entre
t
cada campo e arredondando os cantos nos campos superior e
inferior.
JQUERY
MOBILE
Elementos
de formulário
Exemplo:
Aula004-Exemplo04-Formularios.html
JQUERY
MOBILE
Listas
Exibições de lista são um recurso muito poderoso do jQuery
Mobile;
Elas permitem trabalhar um padrão de estilo não-ordenado ou
d listas
de
li t ordenadas
d
d em uma variedade
i d d d
de fformas út
úteis;
i
Para ativar uma lista regular em uma exibição de lista
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
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
li t e o jQuery
lista
jQ
adiciona
di i
automaticamente
t
ti
t um ícone
í
de
d seta
t
('>' ) 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 datafilter="true" para uma tag ul ou ol, então a lista fica
disponível
p
p
para p
pesquisa.
q
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 01
http://imasters.com.br/artigo/20192/jquery/criando lista com jquery mobile parte 01/
http://imasters.com.br/artigo/20192/jquery/criando-lista-com-jquery-mobile-parte-01/
Criando lista com jQuery Mobile – Parte 02
http://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 Widgets
arredondados produzido pelo jQuery Mobile permitem uma
experiência
iê i muito
it agradável
dá l
Porém, a vida seria monótona se todos tivessem que usar o
Porém
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
d ffundo,
d gradiente.
di t
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
prevista.
Toda
oda vez
e que oco
ocorre
e interação
te ação co
com u
um docu
documento
e to web,
eb, um
u
evento é disparado.
P.ex. O toque em um link ou o arraste da tela caracterizam a
ocorrência de um evento
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:
P
ex: Pode-se
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
t d
h i
horizontalmente
t l
t para a esquerda
d ou di
direita
it 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 jQuery
UI São Paulo: Novatec,
UI.
Novatec 2012.
2012
Também pode consultar o material complementar no link:
htt //
http://www.ifc-camboriu.edu.br/~frozza/2013.1/pdm.html
if
b i d b/ f
/2013 1/ d ht l
Download
