Seções iMasters
Android + iPhone & iPad + JQuery + Mobile

Falando de jQuery Mobile

Com o “boom” do mobile neste ano, surgirão muitas tecnologias empolgantes para criar aplicações e sites naquelas minúsculas telinhas de lcd. O que não podemos esperar é que os mesmos sistemas que funcionam tanto no desktop/web, também funcionem bem em um dispositivo mobile, fazendo com que uma nova área no desenvolvimento de sistemas seja criada – o desenvolvedor mobile.

É claro que, na prática, o desenvolvedor mobile é também o desenvolvedor desktop/web e tem que se adequar a esta nova realidade, que é encaixar os seus sistemas, até então com bons recursos de hardware e tamanho, às telinhas dos celulares que ainda possuem recursos limitados.

Felizmente já existem alguns bons frameworks que cumprem esta tarefa. Dentre eles, destacamos:

  • Sencha: Um framework (pago) vindo do extjs com recursos touch. Usa o navegador do celular.
  • Flex Mobile: Na versão beta ainda. Vai se adequar muito bem à dispositivos android. É instalado nativamente no celular. 
  • jQuery Mobile: Usa o navegador para “imitar” uma interface mobile, com direito a listas, grids, menus e campos de formulário.

Destes três, o jQuery Mobile se destaca inicialmente por ser um framework fácil de aprender, que usa HTML simples e possui bom recursos para o início do desenvolvimento Mobile.

Além disto, o jQueryMobile se destaca pela quantidade de dispositivos suportados, como iPhone, iPad, android, iOS, Blackberry, Windows Phone, Palm, entre outros. Iremos neste e nos próximos artigos comentar sobre as funcionalidades deste framework.

Instalando jQuery Mobile

O jQM segue o princípio básico de instalação de frameworks JavaScript. Para usar o jQM, criamos uma página HTML e adicionamos, na tag <HEAD> do documento, os arquivos javaScript/css necessários para o frameowrk funcionar. A seguir, estarei publicando um documento HTML básico, no qual você poderá copiar/colar:

<!DOCTYPE html> 
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<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>
</head>
<body>

[Bloco de códigos html JQM]

</body>
</html>

Neste código html base, veja que estamos incluindo os arquivos css/js diretamente do repositório jquery. Esta é a forma mais simples de testar o JQM. Deve-se apenas observar a versão dos arquivos incluídos, pois aqui estamos usando a versão 1.0.3 alpha (-1.0a3) e talvez esta não seja mais a atual versão. Se você tiver experiência com jQuery, pode simplesmente baixar a última versão do JQM e usar no seu projeto, sem a necessidade de apontar para um arquivo do repositório jQuery.

Criando a primeira página Mobile

O jQueryMobile usa o já conhecido HTML para criar suas páginas. A única diferença é que ele usa HTML 5 com recursos extras chamados de “data driven” – em resumo, usa constantemente o atributo “data”. Vamos a um simples exemplo, e como não poderia ser diferente, iremos criar o Hello World, veja:

<div data-role="page">
<div data-role="header">
<h1>Hello World</h1>
</div>

<div data-role="content">
<p>Aqui entra o conteúdo</p>
</div>
</div>

Este pedaço de código HTML deve ser inserido entre a tag <body> do nosso modelo. Ao salvar e exibir esta página no navegador (com webkit: iOS, iPhone, Chrome, Firefox, Opera, exceto IE), temos a seguinte renderização:

 

A mágica acontece porque estamos usando o atributo data-role para informar qual a função daquele div. No div pricipal, definimos o data-role como page, e no div interno ao page, criamos mais duas divs, que é o header e o content.

Criando duas páginas mobile com transição

Estendendo um pouco o conceito sobre o JQM, vamos agora criar duas páginas mobile e linkar uma a outra. Uma característica importante que devemos observar é que duas páginas mobile não necessitam obrigatoriamente de dois arquivos HTML. Vamos fazer as páginas no mesmo arquivo html. O código é o seguinte:

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

<div data-role="header">
<h1>Hello World</h1>
</div>

<div data-role="content">
<p>Aqui entra o conteúdo</p>
<p>Acesse a segunda página: <a href="#segunda">aqui</a></p>
</div>

</div>

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

<div data-role="header">
<h1>Segunda página</h1>
</div>

<div data-role="content">
<p><a href="#primeira" data-rel="back">Primeira página</a></p>
</div>

</div>

Veja que agora criamos dois divs, cada um com seu data-role. Veja também que criamos um id para cada div, com o propósito de linkar cada uma das páginas. Na primeira página, em content, fazemos um link com o uso do href e apontando diretamente para #segunda. Ou seja, o link aponta para o id da outra div. 

Veja agora no navegador que, quando acessamos o link, surge uma transição para a segunda página. Nesta segunda página, veja que o botão back é automaticamente criado. Ao acessá-lo, a página volta para a #primeira.

Veja que no link da segunda página para a primeira, usamos o data-rel para indicar que estamos voltando uma página. Experimente retirá-lo e verificar o seu comportamento.

Criando um simples menu

Agora vamos criar um simples menu de itens. Para isso, usamos o já conhecido <ul> <li> e claro mais alguns atributos data, veja:

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

<div data-role="header">
<h1>Hello World</h1>
</div>

<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">MENU</li>
<li><a href="#segunda">Item 1</a></li>
<li><a href="#segunda">Item 2</a></li>
<li><a href="#segunda">Item 3</a></li>
<li><a href="#segunda">Item 4</a></li>
<li><a href="#segunda">Item 5</a></li>
</ul>
</div>

</div>

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

<div data-role="header">
<h1>Segunda página</h1>
</div>

<div data-role="content">
<p><a href="#primeira" data-rel="back">Primeira página</a></p>
</div>

</div>

Agora, na primeira página, criamos um <ul> cujo o data-role é listview. O atributo data-inset faz com que o menu não fique “grudado” em toda a página. Retire-o para ver a diferença. Depois criamos os itens de menu com o uso do <li>. Este código produz o seguinte resultado:

Resumo do jQuery Mobile

Nestes três exemplos, conseguimos sintetizar o JQM ao entendimento de HTML 5 e os atributos data driven, que serão vistos ao longo dos nossos próximos artigos. Até mais!

Mensagem do anunciante:

Curso ao vivo de WordPress: Aprenda a gerenciar conteúdo no CMS mais popular do mundo com o Apiki WP Cursos. Vagas limitadas, matricule-se agora. Cursos Apiki

Comente também

50 Comentários

Cristian Cardoso

Muito bom Daniel,
O Framework esta evoluindo bastante, ainda possui alguns bugs, mas que com as novas versões serão conseqüentemente resolvidas.

Mas pelo que o framework já apresentou podemos esperar muita coisa boa, principalmente pela grande quantidade de aparelhos que o mesmo contempla.

Fico no aguardo pelos próximos posts.
Forte Abraço.
Cristian Cardoso.
http://ctncardoso.com.br

    Daniel Schmitz

    Faltou dizer que o jQuery Mobile está na versão beta !!!! Em breve sairá uma versão oficial.

    Cristian Cardoso

    Opa!
    Perfeito, detalhe importantíssimo que acabei deixando de fora, mesmo na versão beta já se tem idéia do que poderá ser feito,

    Abraço.

Jonas

Parabéns pelo artigo Daniel. Você tem uma facilidade incrível de passar o conhecimento Fico no aguardo dos próximos artigos.

Marcos

Parabéns pela matéria, se tiver um tempo faz um livro sobre criar sites para mobile com programação JQuery

Até mas
abraço

Flavio Ferreira

Parabéns pela didatica !! Muito intuitivo o post.

JQUERY(bom D+) + Mobile = melhor ainda

Aguardo o próximo post.

Mauricio Junior

Olá Daniel, parabéns primeiramente pelo artigo, muito bom. Gostaria de saber de você a possibilidade de fazer esse aplicativo mobile, mas com o topo fixo, ou seja, quando rolar a página, o topo fica fixo sempre no topo e sem sumir, tem como fazer com esse JQuery?

É como se fosse um frame, mas sem frame.

    Daniel Schmitz

    Tem jeito sim, veja:

    Fixed toolbars

    veja o data-position …

    Mauricio Junior

    Daniel,
    Desculpe mas não funcionou, ele abaixa a primeira vez, mas quando passa para a segunda, ele nao abaixa. Eu testei no safari mobile.

    Daniel Schmitz

    Na segunda vez significa na segunda página? Tem que colocar o fixed em todos os headers

    Mauricio Junior

    Obrigado por responder Daniel,
    Desculpe a minha mal explicação.

    Imagine que exista uma página grande, com isso gera uma barra de rolagem. Quando eu mudei a minha aplicação colocando da forma que informou no artigo e na resposta, funcionou em certo ponto.

    O topo apareceu, com isso eu rolei a página uma vez, o menu desapareceu e apareceu no topo (até ai tudo bem), mas quando eu rolei novamente a página ele sumiu e não apareceu mais, entendeu?

    Você já fez esse teste com o safari mobile?

Fabio Nagao

O Sencha não é mais pago. Inclusive eles devolveram o dinheiro para as pessoas que compraram a licensa durante o beta.

    Daniel Schmitz

    Fabio, obrigado pela observação. Eles criaram uma grande confusão desde o extjs. A primeira versão do extjs era free, depois mudou para GPL3, que gerou um pouco de desconforto. Então veio o sencha como GPL3 e agora eles mudaram de novo. Então pessoal, eu recomendo que analisem a licença no próprio site deles.

Miqueias Lopes

Daniel, parabéns pelo artigo!
Existe alguma IDE específica para desenvolver com jQM. Alguma IDE onde você possa ver o resultado em um emulador do smartphone por exemplo.

    Joel Galdino

    O Opera tem um emulador mobile.

    Daniel Schmitz

    Eu acho que ainda nao tem algo específico, mas você pode usar o chrome para testar (ou qualquer navegador com webkit). O que vou procurar é uma IDE com complementação de código para os comandos data driven. Se achar posto aqui.

    Miqueias Lopes

    O emulador do Opera mobile não tem o Ipad ou Iphone, tem apenas algums aparelhos da HTC.

Tiago Baeta

Parabéns Daniel! Volta em grande estilo!!! Aquele abraço!

Bruno

Opera Mobile Emulator
http://www.opera.com/developer/tools/#operamobile

eu ja tinha achado um do iphone mais nao lembro qual era o site :(

Daniel Schmitz

Pessoal, já enviei mais 3 artigos sobre jQm e estou preparando mais! Vocês podem sugerir artigos, fiquem a vontade! A iMasters publica os artigos a cada segunda feira.

    Miqueias Lopes

    Cara, eu to tentando fazer o footer ficar sempre no rodapé do browser, mas não to conseguindo.
    Queria que ele sempre deixasse fixo o header no topo e o footer no rodapé.
    Qual a dica?

    Valeuu

    Daniel Schmitz

    use: data-position=”fixed” na div que define o footer.

Carlos Eduado Pereira da Silva Pereira da Silva

Otimo artigo

Sérgio Santana

Parabéns pelo artigo com exemplos simples porem bem funcionais.

    Daniel Schmitz

    Sérgio, esse é o primeiro artigo. Vamos aumentando a complexidade dos exemplos a medida que formos aprendendo mais. Aguardem.

Bruno Maia

Muito legal esse framework, para quem programa em PHP a utilização do pacote de classes jqmPhp (http://www.jqmphp.com) acelera bastante o desenvolvimento.

Mauricio Junior

Estou tendo um problema muito grande usando jQuery com .NET principalmente porque fica o # na frente da url, nenhum botão funciona ou faz o que precisa ser feito.

    Daniel Schmitz

    Tentou usar Generic Handler ao inves de WebForm ?

    O Generic Handler resonde somente com o DIV necessário para criar uma página jQm

    kassiano

    Mauricio Junior voce resolveu esse problema do # na frente das paginas? estou tendo o mesmo problema, sempre que vou acessar algumas paginas de login por exemplo não dá certo por que a url fica toda doida cheio de # e as paginas que naveguei anteriormente.

    um simple fato de navegar um pouco no site ja adiciona um tanto de # e fica todos os nomes das paginas na url, ai muita coisa nao funciona, como login, validar formulario e etc.

    Sera se voce pode me ajudar? ficarei grato!!

Gustavo Luiz M Pegorer

parabensss pelo post ! Mto Bom

Anderson

Daniel, muito bom!!!! Você teria um exemplo do jquerymobile consumindo webservice, pois ja tentei e no ie vai bem mas no iphone não.

obrigado!

gilmario

Boa tarde, muito bom!!! mas gostaria de saber com acessar o banco de dados com jquery mobile mysql php

Thiago Avelino da Silva

Bom dia

Alguém tem a lista com todos os data- atributos que o Jquery mobile usa?

Daniele Dantas

Ótimo post. Estou vendo a necessidade de criar um site simples onde usuários logados poderam incluir clientes e pedidos, mas não consigo fazer a validação de usuário. É possível usar SESSION ou COOKIES? Programo em PHP+MySQL.

Fabio Oliveira

Olá, vi que em algumas aulas na internet (inglês) tem um celular virtual para testes, vocês sabem onde posso conseguir???

Rosana

oi Daniel
eu queria fazer 2 sites um para desktop e outro mobile.
Vc sabe como eu faço para identificar qual é qual?
Via Php?
Obrigada
R.

    Felipe Costa

    Criando uma página desktop e uma mobile
    Indetifica-se de onde vem o acesso, e direciona assim:

Julio

Olá!
Tenho dúvidas em relação as folhas de estilo. No caso, estou a criar um layout, nesse, tenho toda a parte de aplicação de cores, imagens de fundo, estilos de links e afins. Gostaria de saber como faço para rodar a minha folha de estilo sem ter que subscrever css’s do FrameWork, estou nesse empasse, não sei como fazer.
Agradeço desde já.
Abraço!

kiko

Muito bom o artigo. Estou tentando usar o jquery mobile no site http://cuponzeria.com.
abs

Wilson

Daniel parabéns pelo post,
Gostaria de saber se você pode disponibilizar este exemplo para download.

Estou no aguardo de novo post.
Obrigado,

Carlos Alberto Bessa

Muito Obrigado por essa valiosa orientação!!!

Marcelo Pereira Cavalini

Daniel, parabéns pelo artigo sobre o jQuery Mobile, em especial a sesssão, “Criando a primeira página Mobile”.

Para codificação de sites e aplicativos para dispositivos móveis (mobile), há diversas ferramentas e frameworks que resolvem problemas e situações comuns, como, a compatibilidade cross-browser, resolução de tela, e também a renderização do HTML e CSS.

Veja os melhores frameworks JavaScript para desenvolvimento mobile em http://cavas.com.br/index.php/site/os-melhores-frameworks-javascript-para-desenvolvimento-mobile

andre enrique

Muito bom o artigo aprendi muito com ele
E gostaria de saber por exemplo tenho um site em wordpress como posso fazer a integração dos post pages e tudo que é colocado no site para a versão mobile

Qual a sua opinião?