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