Falando de jQuery Mobile

Daniel Schmitz
em Android

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:

Você já está pronto para testar sua App Android? A Intel fez uma parceria para você testar gratuitamente sua App nos principais dispositivos com processador Intell®. Saiba mais aqui!

Daniel Schmitz

trabalha com desenvolvimento web desde 1998 e atualmente dedica-se a escrever livros sobre programação e desenvolvimento de sistemas, disponíveis no seu site. http://www.danielschmitz.com.br

50 comentários Comente também

  1. 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

  2. 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.

    1. 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?

    1. 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.

  3. 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.

    1. 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.

  4. 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.

    1. 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

  5. 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.

    1. 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!!

  6. 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!

  7. Ó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.

  8. 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!

  9. 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

  10. 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

Dê Sua Opinião

O seu endereço de email não será publicado Campos obrigatórios são marcados *


3 + seis =

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: