2. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
É um framework para construção de interfaces
gráficas baseado em HTML5 e CSS3, otimizado
para dispositivos touch como tablets e
smartphones. Possui “layout responsive” capaz
de se adaptar aos diversos tamanhos de tela.
O que é JQuery Mobile?
Introdução Estrutura Interface Navegação Aplicativo
3. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
O que é JQuery Mobile?
Introdução Estrutura Interface Navegação Aplicativo
4. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
JQuery
<script>
// com javascript
var box1 = document.getElementById("box1");
box1.style.border = "1px solid blue";
//com jquery
var box2 = $("#box2");
box2.css("border","1px solid blue");
//ou
$box2 = $("#box2");
$box2.css("border","1px solid blue");
//ou ainda
$("#box2”).css("border","1px solid blue");
</script>
Introdução Estrutura Interface Navegação Aplicativo
5. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
JQuery
É um framework baseado em javascript que
torna mais fácil escrever código javascript.
JQuery Mobile
É um framework também baseado em javascript
que usa o JQuery, porém é voltado para
construção de interfaces gráficas para a web.
Não é uma alternativa para o JQuery!
JQuery vs JQuery Mobile
Introdução Estrutura Interface Navegação Aplicativo
6. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
O que é JQuery Mobile?
Introdução Estrutura Interface Navegação Aplicativo
7. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Características
• Write less, do more
• Cross-platform
• Flexível
• Baseado em temas
• Simples
• Plugins
• Orientado à marcação
O que é JQuery Mobile?
Introdução Estrutura Interface Navegação Aplicativo
8. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Exemplos
Introdução Estrutura Interface Navegação Aplicativo
9. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Interface
Introdução Estrutura Interface Navegação Aplicativo
10. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Interface
Dialog
Popup
Introdução Estrutura Interface Navegação Aplicativo
11. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Interface
Table reflow Table column-toggle
Introdução Estrutura Interface Navegação Aplicativo
12. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Interface
NavBar
Accordion
Introdução Estrutura Interface Navegação Aplicativo
13. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Interface
Grid
Introdução Estrutura Interface Navegação Aplicativo
14. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Plataformas suportadas
Suporte
Introdução Estrutura Interface Navegação Aplicativo
15. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Sponsors
Introdução Estrutura Interface Navegação Aplicativo
17. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
• Montar a estrutura do projeto
o Linkar os arquivos css
o Linkar os arquivos js
Vamos ao que interessa
Introdução Estrutura Interface Navegação Aplicativo
18. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
<!– Folhas de Estilo-->
<link rel="stylesheet" href=”jquery.mobile.structure-1.3.1.css"/>
<link rel="stylesheet" href=“jquery.mobile.theme-1.3.1.css"/>
<!– Biblioteca JQuery -->
<script src=“jquery-1.9.1.min.js"></script>
<!– Script -->
<script src=“jquery.mobile-1.3.1.js"></script>
Montando a Estrutura do Projeto
Introdução Estrutura Interface Navegação Aplicativo
20. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
• Elementos são declarados usando tags com
atributos data-role
• Cada arquivo deve conter pelo menos um
data-role=“page”
• Atributo data-* para adicionar
comportamentos ao elemento (onde * é o
tipo do comportamento)
Elementos
Introdução Estrutura Interface Navegação Aplicativo
21. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Alguns atributos
data-role Declaração de elemento
data-theme Define o tema do elemento
data-icon Define o ícone para o elemento
data-inline Define se o elemento será block ou inline
data-iconpos Define a posição do ícone em relação ao texto
data-ajax Ativa ou desativa as requisições ajax
data-corners Ativa bordas arrendondadas do elemento
data-shadow Ativa as sombras do elemento
data-rel Define o relacionamento do elemento atual para
outro elemento
data-transition Define a transição do elemento atual para outro
elemento
Introdução Estrutura Interface Navegação Aplicativo
22. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Alguns atributos
data-dismissible Popups: faz com que o mesmo não
possa ser fechado
data-overlay-theme Dialog: define o tema de background
data-column-btn-text Tabela: define texto do botão para
escolha das colunas a serem exibidas
data-column-btn-theme Tabela: define o tema do botão para
escolha das colunas a serem exibidas
data-column-popup-theme Tabela: define o tema do popup para
escolha de colunas a serem exibidas
data-priority th de tabela: define a prioridade da
coluna caso a janela seja
redimensionada
data-content-theme Accordion e Collapsible: defiine o tema
do contéudo
Introdução Estrutura Interface Navegação Aplicativo
23. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Transições: data-transition
fade
pop
flip
turn
flow
slidefade
slide
slideup
slidedown
none
Introdução Estrutura Interface Navegação Aplicativo
24. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Ícones: data-icon
plus forward
minus back
delete grid
arrow-l star
arrow-r alert
arrow-u info
arrow-d home
check search
gear bars
refresh edit
Introdução Estrutura Interface Navegação Aplicativo
25. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
data-theme e data-iconpos
data-theme=“a”
data-iconpos=“top”
Introdução Estrutura Interface Navegação Aplicativo
31. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Como funciona
• Um botão dispara uma chamada para uma
página
• O framework constrói a página html dentro
do Dialog
Dialog
Introdução Estrutura Interface Navegação Aplicativo
32. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Dialog
Introdução Estrutura Interface Navegação Aplicativo
33. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
<!– dialog.html -->
<!-- Dispara o dialog -->
<a href="dialog-content.html" data-role="button"
data-rel="dialog" data-transition="fade">
Dialog
</a>
Dialog
Introdução Estrutura Interface Navegação Aplicativo
34. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
<!– dialog-content.html -->
<!-- Dispara o dialog -->
<p>Deseja excluir o registro? </p>
<a data-role="button" data-inline="true" data-theme="b">Sim</a>
<a data-role="button" data-inline="true" data-rel="back">Não</a>
Dialog
Introdução Estrutura Interface Navegação Aplicativo
36. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Como funciona
• Um botão dispara uma chamada para o
popup
• O framework simplesmente exibe o popup
que está oculto
Popup
Introdução Estrutura Interface Navegação Aplicativo
37. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Popup
Introdução Estrutura Interface Navegação Aplicativo
42. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Tabelas
Table reflow Table column-toggle
Introdução Estrutura Interface Navegação Aplicativo
43. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
data-mode=“reflow”
A tabela passa a ser “responsive” se adaptando
a tela do dispositivo
data-mode=“columntoggle”
Permite selecionar as colunas que serão
exibidas na tabela ou priorizando algumas
colunas
Tabelas
Introdução Estrutura Interface Navegação Aplicativo
61. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
É uma mensagem de software informando que
alguma coisa aconteceu.
• Evento de mouse
• Evento de teclado
Eventos
Introdução Estrutura Interface Navegação Aplicativo
62. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Eventos
tap Evento de toque
tap-hold Evento “toca e segura”
swipe Evento de arraste sobre o elemento
pagecreate Ocorre quando uma página é criada
pageshow Ocorre quando uma página é exibida (depois da
animação ajax)
pagehide Ocorre quando uma página é ocultada (depois da
animação ajax)
pageinit Ocorre quando uma página é inicializada
(independente se o acesso foi direto ou via ajax)
pageload Ocorre quando a página é carregada e inserida no
DOM
Introdução Estrutura Interface Navegação Aplicativo
63. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Eventos
pageloadfailed Ocorre quando há falha na requisição de uma
página
orientationchange Ocorre quando a orientação do dispositivo muda
scrollstart Ocorre quando a rolagem é iniciada
scrollstop Ocorre quando a rolagem é finalizada
vmousemove Simula o movimento do mouse
vmouseover Simula quando o cursor do mouse está sobre um
elemento
vmouseout Simula quando o cursor do mouse sai de um
elemento
vmousedown Simula quando o botão do mouse é clicado
vmouseup Simula quando o botão do mouse é solto
vclick Simula o click do botão
Introdução Estrutura Interface Navegação Aplicativo
68. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Como funciona
O JQuery Mobile utiliza Ajax para realizar as
requisições ao invés de HTTP
1. Realiza a requisição a procura do conteúdo
2. Insere o conteúdo na página mas deixa-o oculto
(display:none)
3. Realiza a transição entre as páginas usando
animações
4. Remove a página antiga
Navegação
Introdução Estrutura Interface Navegação Aplicativo
69. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Ajax desativado
Ajax “escuta” todos os links exceto quando:
• O elemento possui atributo data-ajax=”false”
• O elemento possui atributo target
• O elemento possui atributo data-rel=“external”
• O elemento aponta para um domínio externo ao site
Navegação
Introdução Estrutura Interface Navegação Aplicativo
76. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Aplicação
• Login
• Tela de contatos
• Tela de novo contato
Aquivos necessários
• js e css do JQuery Mobile
• Biblioteca JQuery
• Script storageHTML5.js para armazenamento
local com html5
Aplicação: Agenda
Introdução Estrutura Interface Navegação Aplicativo
77. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Aplicação: Agenda
Introdução Estrutura Interface Navegação Aplicativo
78. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
<form id="formLogin" data-ajax="false">
<div id="info"></div>
<input type="text" id="username" placeholder="nome de usuário”/>
<input type="password" id="password" placeholder="senha”/>
<input type="submit" value="Login" data-theme="b"/>
</form>
Login
html tela de login
Introdução Estrutura Interface Navegação Aplicativo
79. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
<script>
$("#formLogin").submit(function(){
var username = $("#username").val();
var password = $("#password").val();
if(username == "username" && password == "123"){
window.location = "contacts.html";
}else{
$("#info").text("Dados incorretos!");
}
return false;
});
</script>
Login
javascript tela de login
Introdução Estrutura Interface Navegação Aplicativo
80. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Resultado
Login
Introdução Estrutura Interface Navegação Aplicativo
86. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Resultado
Novo Contato
Introdução Estrutura Interface Navegação Aplicativo
87. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
<div data-role="content" data-theme="c">
<ul data-role="listview" id="groupList" data-inset="false">
<li>
<a class="labelGroup">Amigos</a>
<span class="ui-li-count">28</span>
</li>
</ul>
</div>
Grupos
Introdução Estrutura Interface Navegação Aplicativo
88. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
Resultado
Novo Contato
Introdução Estrutura Interface Navegação Aplicativo
89. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
JQuery e JQuery Mobile
• http://jquery.com/
• http://jquerymobile.com/
• http://api.jquerymobile.com/
• http://jquerymobile.com/themeroller/
• http://dev.jtsage.com/jQM-DateBox/
Prototipagem
• http://pencil.evolus.vn/
• http://cacoo.com
Ferramentas CSS3
• http://css3generator.com/
• http://www.colorzilla.com/gradient-editor/
Links
90. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
bit.ly/sistemasdeinfo
rondymesquita
rondinellimesquitas@gmail.com
Finalizando…
91. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
DOYLE, Matt. Master mobile web apps with jquery mobile. 3. ed. New
South Walles: Elated Communications, 2012.
CAMDEN, Raymon; MATTHEWS, Andy. Jquery mobile web development
essentials. 1. ed. Birmingham: Packt Publishing, 2012.
THE JQUERY FOUNDATION. JQuery Mobile. Disponível em <http://
jquerymobile.com> . Acesso em 15 de abril de 2013.
THE JQUERY FOUNDATION. JQuery. Disponível em <http://jquery.com> .
Acesso em 15 de abril de 2013.
THE JQUERY FOUNDATION. Api JQuery Mobile. Disponível em <http://
api.jquerymobile.com/> . Acesso em 15 de abril de 2013
Referências
92. Aplicações
Móveis
com
JQuery
Mobile
-‐
Rondinelli
Mesquita
IBM. Introdução ao jquery mobile. Disponível em <http://www.ibm.com/
developerworks/br/library/wa-jquerymobileupdate/> . Acesso em 15 de
abril de 2013.
TAVARES, Alan. Estrutura de navegação de jquery mobile. Disponível em
<http://alantavares.com.br/estrutura-navegacao-jquery-mobile/>. Acesso
em 15 de abril de 2013
DEVGROW. Mobile web development part 2: creating a simple app
using jquery mobile. Disponível em <http://devgrow.com/mobile-web-
dev-using-jquery-mobile/> Acesso em 14 de maio de 2013.
Referências