aplicações móveis com j query mobile

AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile

Rondinelli Mesquita

[email protected]

Aplicações Móveis com

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


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


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


Características •  Write less, do more •  Cross-platform •  Flexível •  Baseado em temas •  Simples •  Plugins •  Orientado à marcação



Exemplos Introdução Estrutura Interface Navegação Aplicativo


Interface Introdução Estrutura Interface Navegação Aplicativo


Interface

Dialog Popup



Interface

Table reflow Table column-toggle



Interface

NavBar

Accordion



Interface

Grid



Plataformas suportadas

Suporte Introdução Estrutura Interface Navegação Aplicativo


Sponsors Introdução Estrutura Interface Navegação Aplicativo


Codificando…


•  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


<!– 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



<body><a data-role="button" data-theme=”c">Botão</a>

</body>

Botão

Resultado:



•  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


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



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



Transições: data-transition

fade pop flip turn flow slidefade slide slideup slidedown none



Í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



data-theme e data-iconpos

data-theme=“a”data-iconpos=“top”



<!– Página Padrão do Jquery Mobile--><div data-role="page">

<div data-role="header" data-theme="b"> <h1>Cabeçalho</h1></div><div data-role="content" data-theme="c"> <!– Conteúdo --> </div><div data-role="footer" data-theme="b"> <h1>Rodapé</h1></div>

</div>

Marcação básica Introdução Estrutura Interface Navegação Aplicativo


Marcação básica Introdução Estrutura Interface Navegação Aplicativo


<!– Página Padrão do Jquery Mobile--><div data-role="page">

<div data-role="header" data-theme="b"> <h1>Cabeçalho</h1></div><div data-role="content" data-theme="c"> <p>Um botão logo abaixo</p> <a data-role="button">Botão</a></div><div data-role="footer" data-theme="b"> <h1>Rodapé</h1></div>

</div>

Página com botão Introdução Estrutura Interface Navegação Aplicativo


Página com botão Introdução Estrutura Interface Navegação Aplicativo


Dialog


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

<!– dialog.html --><a href="dialog-content.html" data-role="button" data-rel="dialog" data-transition="fade">

Dialog</a>

<!– dialog-content.html --><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>


Popup


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

<a href="#login" data-role="button" data-rel="popup" data-transition="fade">Login</a><div id="login" data-role="popup" data-theme="a" data-dismissible="false"><div style="padding: 10px 20px">

<h3>login</h3><form> <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>

</div></div>


<a href="#tooltip" class="tip" data-role="button" data-icon="info" data-theme="e" data-iconpos="notext"></a><div id="tooltip" data-role="popup" data-theme="e">

<p>Informação</p></div>

Controlando via javascript Introdução Estrutura Interface Navegação Aplicativo


Tabelas


Tabelas

Table reflow Table column-toggle



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


<table data-role="table" data-mode="reflow" class="ui-responsive table-stripe" style="display: table !important">

<thead> <tr> <th>Código</th> <th>Nome</th> <th>Email</th> <th>Telefone</th> </tr></thead><tbody> <tr> <td>1</td> <td>Peter</td> <td>[email protected]</td> <td>99999999</td> </tr></tbody>

data-mode=“reflow” Introdução Estrutura Interface Navegação Aplicativo


data-mode=“reflow” Introdução Estrutura Interface Navegação Aplicativo


<table data-role="table" data-mode="columntoggle" class="ui-responsive table-stroke” data-column-btn-text="colunas" data-column-btn-theme="b" data-column-popup-theme="a" style="display: table !important">

<thead> <tr> <th data-priority="2">Código</th> <th data-priority="1">Nome</th> <th data-priority="1">Email</th> <th data-priority="2">Telefone</th> </tr></thead><tbody> <tr> <td>1</td> <td>Peter</td> <td>[email protected]</td> <td>99999999</td> </tr></tbody>

data-mode=“columntoggle” Introdução Estrutura Interface Navegação Aplicativo


data-mode=“columntoggle” Introdução Estrutura Interface Navegação Aplicativo


Accordion


Accordion Introdução Estrutura Interface Navegação Aplicativo


<div data-role="collapsible-set" data-content-theme="d"><div data-role="collapsible" data-theme="b"> <h1>Planetas</h1> <ul data-role="listview"> <li><a>Terra</a></li> <li>Marte</li> <li>Saturno</li> <li>Mercúrio</li> </ul></div>

</div>



Grid


Permite construir layout baseados em colunas responsivas.

Grid Introdução Estrutura Interface Navegação Aplicativo

<div class="ui-grid-a">

<div class="ui-block-a"> <a data-role="button”>Botão</a></div><div class="ui-block-b"> <a data-role="button”>Botão</a></div>

</div>

<div class="ui-grid-b">

<div class="ui-block-a"> <a data-role="button”>Botão</a></div><div class="ui-block-b"> <a data-role="button”>Botão</a></div><div class="ui-block-c"> <a data-role="button”>Botão</a></div>

</div>

<div class="ui-grid-a ui-responsive">


</div>

Grid responsive Introdução Estrutura Interface Navegação Aplicativo


@media all and (max-width: 560px) { .ui-block-a,.ui-block-b,.ui-block-c,.ui-block-d,.ui-block-e { width: 100%; float: none;}

}

A mágica Introdução Estrutura Interface Navegação Aplicativo

Nosso próprio breakpoint

Adicionando a classe my-breakpoint no container dos elementos

<div class="ui-grid-a my-breakpoint">


</div>


Nosso próprio breakpoint

Reescrevendo o CSS

@media all and (max-width: 560px) {.my-breakpoint .ui-block-a,.my-breakpoint .ui-block-b,.my-breakpoint .ui-block-c,.my-breakpoint .ui-block-d,.my-breakpoint .ui-block-e { width: 100%; float: none;}

}



Eventos


É uma mensagem de software informando que alguma coisa aconteceu. •  Evento de mouse •  Evento de teclado

Eventos Introdução Estrutura Interface Navegação Aplicativo


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



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



Navegação


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


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


<div data-role="page" id="page1"> <div data-role="header" data-theme="b"> <h1>Página 1</h1> </div> <div data-role="content" data-theme="c"> <a data-role="button" href="#page2">página 2</a> </div> <div data-role="footer" data-theme="b"> <h1>Rodapé</h1> </div></div><div data-role="page" id="page2"> <div data-role="header" data-theme="b"> <h1>Página 2</h1> </div> <div data-role="content" data-theme="c"> <a data-role="button" href="#page1">página 1</a> </div> <div data-role="footer" data-theme="b"> <h1>Rodapé</h1> </div></div>

Multi-páginas Introdução Estrutura Interface Navegação Aplicativo

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

<div data-role="header" data-theme="b"> <h1>Página 1</h1></div><div data-role="content" data-theme="c"> <a data-role="button" href=“page2.html">página 2</a></div><div data-role="footer" data-theme="b"> <h1>Rodapé</h1></div>

</div>

Páginas separadas – Página 1 Introdução Estrutura Interface Navegação Aplicativo

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

<div data-role="header" data-theme="b"> <h1>Página 2</h1></div><div data-role="content" data-theme="c"> <a data-role="button" href=“page1.html">página 1</a></div><div data-role="footer" data-theme="b"> <h1>Rodapé</h1></div>

</div>

Páginas separadas – Página 2 Introdução Estrutura Interface Navegação Aplicativo

<div data-role="navbar" data-theme="a"><ul>

<li><a data-icon="home" data-theme="a">Contatos</a></li><li><a data-icon="grid" data-theme="a">Grupos</a></li><li><a data-icon="gear" data-theme="a">Configurações</a></li>

</ul></div>

Barra de navegação Introdução Estrutura Interface Navegação Aplicativo


Barra de navegação Introdução Estrutura Interface Navegação Aplicativo


Aplicativo: Agenda


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


Aplicação: Agenda Introdução Estrutura Interface Navegação Aplicativo


<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



Resultado

Login Introdução Estrutura Interface Navegação Aplicativo

<div data-role="header" data-theme="a">

<a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-ajax="false"></a>

<h1>Agenda</h1><a href="login.html" data-role="button" data-icon="delete" data-

iconpos="notext" data-ajax="false"></a><div data-role="navbar" data-theme="a"> <ul> <li><a href="contacts.html" data-icon="home" data-

theme="a" class="ui-btn-active" data-ajax="false">Contatos</a></li> <li><a href="groups.html" data-icon="grid" data-theme="a"

data-ajax="false">Grupos</a></li> <li><a href="settings.html" data-icon="gear" data-

theme="a" data-ajax="false">Configurações</a></li> </ul></div>

</div>

Contatos Introdução Estrutura Interface Navegação Aplicativo

<div data-role="content" data-theme="c" id="contactContent">

<ul data-role="listview" id="contactList"> </ul>

</div>


<!– Footer --><div data-role="footer" data-theme="b"><div data-role="navbar" data-theme="a"><ul>

<li><a href="new-contact.html" data-icon="plus" data-theme="a" class="ui-btn-active" data-ajax="false">Novo</a></li>

<li id="deleteAll"><a data-icon="delete" data-theme="a">Apagar tudo</a></li></ul></div></div>



Resultado



<form id="newContactForm" data-ajax="false"><input type="text" name="nome" id="nome”/><input type="text" name="nome" id="telefone”/><select name="grupo" id="grupo" data-native-menu="false”> <option value="Amigos">Amigos</option> <option value="Família">Família</option> <option value="Trabalho">Trabalho</option> <option value="Faculdade">Faculdade</option></select><button type="submit" data-theme="a">Salvar</button>

</form>

Novo Contato Introdução Estrutura Interface Navegação Aplicativo


Resultado



<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


Resultado



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


bit.ly/sistemasdeinfo

rondymesquita

[email protected]

Finalizando…


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


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

aplicações móveis com j query mobile

Technology