Utilizando PhoneGap e Android com IDE Eclipse

Apresentaremos neste artigo a implementaç�o de um aplicativo para o sistema operacional Android utilizando as tecnologias HTML, CSS e JavaScript. Para isso, analisaremos como montar o ambiente de desenvolvimento utilizando a IDE Eclipse e o Android SDK.

Este tema � �til ao abordar mais uma importante ferramenta para o desenvolvimento de aplicaç�es m�veis. Apesar de termos estudado apenas a codificaç�o de um exemplo Android, o PhoneGap tamb�m pode ser adotado para criar aplicativos para dispositivos como iPhone, BlackBerry, entre outros.

Veja tamb�m Preparando o ambiente para programar para Android

Neste artigo destacaremos o desenvolvimento de um aplicativo para o sistema operacional Android utilizando o framework PhoneGap e as tecnologias HTML, CSS e JavaScript. Nele, analisaremos tamb�m o uso do framework jQuery Mobile para criar uma interface mais amig�vel e como configurar um ambiente de desenvolvimento utilizando a IDE Eclipse e o Android SDK.

Curso de PhoneGap

Com a disseminaç�o dos smartphones e o uso cada vez mais frequente da internet, � dif�cil n�o estar conectado na rede, acessando o e-mail ou redes sociais, como Facebook e Twitter. Todos estes serviços disponibilizam um aplicativo para uso em smartphones, seja ele Android, iOS ou outro sistema operacional. Tais aplicativos s�o chamados de webapps, ou seja, precisam estar conectados � internet para disponibilizarem os seus serviços. Pensando nisso, nesse artigo iremos conhecer o PhoneGap, um framework que nos auxiliar� na criaç�o de aplicativos desse tipo.

O PhoneGap � um framework voltado para o desenvolvimento de aplicaç�es para dispositivos m�veis, open source, multiplataforma, com suporte para os sistemas operacionais iOS, Google Android, Palm, Symbian e BlackBerry. Com ele � poss�vel desenvolver aplicaç�es utilizando as tecnologias JavaScript, HTML 5 e CSS3, dispensando assim o uso de SDKs ou compiladores, bastando apenas adicionar um arquivo JavaScript e um JAR para ter acesso a v�rias funç�es de seu smartphone.

O JavaScript tem se transformado na linguagem de programaç�o mais popular da web. Inicialmente, no entanto, muitos profissionais denegriram a linguagem. Com o advento do Ajax, o JavaScript teve sua popularidade de volta e recebeu mais atenç�o profissional. O resultado foi a proliferaç�o de frameworks e bibliotecas, pr�ticas de programaç�o melhoradas e o aumento no uso do JavaScript fora do ambiente de navegadores bem como o uso de plataformas de JavaScript server-side.

O uso prim�rio de JavaScript � escrever funç�es que s�o embarcadas ou inclu�das em p�ginas HTML e que interagem com o Document Object Model(DOM) da p�gina. Alguns exemplos deste uso s�o:

abrir uma nova janela com controle program�tico sobre seu tamanho, posiç�o e atributos;
validar valores de um formul�rio para garantir que s�o aceit�veis antes de serem enviados ao servidor;
mudar imagens � medida que o mouse se movimenta sob elas.

Pelo fato do c�digo JavaScript rodar localmente no navegador do usu�rio, e n�o em um servidor remoto, o navegador pode responder a tais aç�es rapidamente, aprimorando desta forma o tempo de resposta para o usu�rio. Al�m disso, o c�digo JavaScript pode detectar aç�es de usu�rio que o HTML sozinho n�o poderia, tais como teclas pressionadas individualmente. Aplicaç�es como Gmail tomam vantagem disso: muito da l�gica da interface do usu�rio � escrita em JavaScript, e o JavaScript envia requisiç�es de informaç�o, tais como o conte�do de um correio eletr�nico, para o servidor. A tend�ncia mais ampla de programaç�o em Ajax explora de maneira similar este ponto forte.

Uma JavaScript engine (tamb�m conhecida como interpretador JavaScript ou uma implementaç�o JavaScript) interpreta c�digo fonte JavaScript e o executa de forma adequada. A primeira implementaç�o JavaScript foi criada por Brendan Eich na Netscape Communications Corporation, para o Navegador Netscape. A implementaç�o, nomeada SpiderMonkey, � implementada em C e vem sendo atualizada para estar em conformidade com a ediç�o 3 do ECMA-262. A implementaç�o Rhino, criada primariamente por Norris Boyd (ex-empregado da Netscape; agora no Google) � uma implementaç�o de JavaScript em Java. Rhino, como SpiderMoneky, est� em conformidade com a terceira ediç�o do ECMA-262.

Por ser o JavaScript a �nica linguagem que a maioria dos navegadores populares suportam, tem se tornado uma linguagem alvo para muitos frameworks em outras linguagens, a despeito do fato de n�o ter sido planejado para tal.

Atualmente o PhoneGap se encontra na vers�o 1.0, e alguns dos destaques deste release s�o:

API mais est�vel;
Arquitetura �plug�vel�, permitindo a criaç�o de componentes;
Compatibilidade com acesso a dados padronizados pelo W3C;
Possibilidade de manipulaç�o dos contatos da agenda telef�nica.

Al�m destes, o framework oferece diversos recursos que auxiliam o seu uso. A Figura 1 apresenta os recursos suportados em cada plataforma.

Figura 1. Recursos suportados por cada plataforma.

O PhoneGap j� est� sendo utilizado por diversas empresas, como � o caso da Adobe, que integrou o framework ao Adobe Dreamweaver, facilitando a criaç�o de aplicativos para dispositivos m�veis, podendo ainda testar estes aplicativos em emuladores a partir do pr�prio editor do Dreamweaver.

Para as pr�ximas vers�es, os desenvolvedores do PhoneGap est�o planejando suporte a outras plataformas e novas APIs, que poder�o ter acesso a funcionalidades como calend�rio do smartphone, websockets, criptografia, entre outras.

Nesse artigo, iremos apresentar, passo a passo, como configurar o ambiente de desenvolvimento para a implementaç�o com Android e iniciar a codificaç�o de um aplicativo utilizando o framework PhoneGap. O objetivo de nosso sistema ser� auxiliar corredores a gerenciar seus treinos.

Preparando o ambiente de desenvolvimento

Neste momento, poder�amos optar pelo desenvolvimento para iOS, Symbian ou outras plataformas, mas como nosso objetivo � apresentar o PhoneGap, adotaremos o Android devido � sua facilidade de configuraç�o. Para podermos utilizar os recursos do Android no Eclipse, o Google disponibiliza um SDK que fornece uma m�quina virtual, suporte para m�dias de �udio, v�deo e imagem, nos formatos MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, GIF, bem como acelerador gr�fico 3D, baseado no OpenGL. Deste modo, faça o download do SDK no link http://developer.android.com/sdk/index.html.

Agora, acesse o diret�rio onde foi realizada a instalaç�o do Android SDK, execute o aplicativo SDK Manager, escolha a opç�o Available Packages e a plataforma Android 2.1. Por fim, selecione Install Selected, conforme a Figura 2.

Figura 2. SDK Manager, download da plataforma.

Ap�s a instalaç�o do SDK, � preciso configurar o Eclipse com o plugin ADT - Android Developer Tools. Assim, no Eclipse, selecione o menu Help > Install New Software, clique em Add..., e em Location, informe o endereço: https://dl-ssl.google.com/android/eclipse/, como apresentado na Figura 3. Depois de encerrada a instalaç�o, reinicie o Eclipse.

Figura 3. Adicionando a URL do plugin ADT.

Para finalizar a configuraç�o, acesse o menu Window > Preferences e depois a opç�o Android, para informar o local onde foi instalado o SDK, como mostra a Figura 4.

Figura 4. Configurando o path do Android SDK no Eclipse.

Criando uma m�quina virtual

Para executar as aplicaç�es desenvolvidas com PhoneGap, precisamos ainda criar uma m�quina virtual, que ser� respons�vel por emular o ambiente Android (ler Nota DevMan 1). Para isso, selecione no menu do Eclipse Window > Android SDK and AVD Manager, clique em New... e informe a configuraç�o da m�quina, de acordo com a Figura 5.

M�quina Virtual

O termo m�quina virtual foi descrito na d�cada de 1960 utilizando um termo de sistema operacional: uma abstraç�o de software que enxerga um sistema f�sico (m�quina real). Com o passar dos anos, o termo englobou um grande n�mero de abstraç�es � por exemplo, Java Virtual Machine � JVM que n�o virtualiza um sistema real.

Ao inv�s de ser uma m�quina real, isto �, um computador real feito de hardware e executando um sistema operacional espec�fico, uma m�quina virtual � um computador fict�cio criado por um programa de simulaç�o. Sua mem�ria, processador e outros recursos s�o virtualizados. A virtualizaç�o � a interposiç�o do software (m�quina virtual) em v�rias camadas do sistema. � uma forma de dividir os recursos de um computador em m�ltiplos ambientes de execuç�o.

Os emuladores s�o m�quinas virtuais que simulam computadores reais. S�o bastante conhecidos os emuladores de v�deo games antigos e os emuladores de microcomputadores, como o VMware, o Bochs e o VM VirtualBox, software livre da Oracle.

Algumas das vantagens que se tem ao se trabalhar com m�quinas virtuais s�o:

Facilita o aperfeiçoamento e testes de novos sistemas operacionais;
Possibilita a comparaç�o de v�rios sistemas operacionais utilizando o mesmo equipamento;
Executa diferentes sistemas operacionais sobre o mesmo hardware, simultaneamente;
Simula alteraç�es e falhas no hardware para testes ou reconfiguraç�o de um sistema operacional, provendo confiabilidade e escalabilidade para as aplicaç�es.
Diminuiç�o de custos com hardware;
Facilidades no gerenciamento, migraç�o e replicaç�o de computadores, aplicaç�es ou sistemas operacionais;
Confiança e disponibilidade: A falha de um software n�o prejudica os demais serviços.

Figura 5. Configurando a m�quina virtual.

Iniciando o projeto

Para iniciar a implementaç�o de nosso aplicativo, devemos agora criar um projeto Android. Para isso, abra o Eclipse e selecione File > New >Other > Android Project, conforme a Figura 6.

Figura 6. Criando o projeto Android.

No campo Project Name (ver Figura 7), informe um nome para o projeto, como �HelloWorld�, em Build Target, selecione a vers�o da API que ir� trabalhar, no nosso caso, Android 2.1-update1. Por �ltimo, defina em Package name um pacote chamado .com.cachina, e o nome da Activity, neste caso, HelloWorldActivity. Lembrando que podemos ter quantas activities forem necess�rias, no entanto, � poss�vel executar apenas uma por vez.

Figura 7. Criando o novo projeto.

Para poder utilizar o PhoneGap, � preciso adicionar algumas bibliotecas e configurar o nosso projeto.

Deste modo, baixe a vers�o mais nova no endereço http://code.google.com/p/phonegap/downloads/list e descompacte o arquivo zip. O arquivo conter� todas as bibliotecas para as diversas plataformas. Neste exemplo, iremos precisar da pasta XML e de mais dois arquivos que est�o dentro da pasta Android, denominados phonegap-1.0.0.js e phonegap-1.0.0.jar.

Crie uma pasta chamada lib na raiz do projeto e coloque o arquivo JAR dentro dela. Agora, crie outra pasta chamada www dentro da pasta asserts, coloque o arquivo js nesta pasta e a pasta XML dentro da pasta res. Em seguida, adicione o JAR do PhoneGap ao Build Path.

Por fim, abra o arquivo HelloWorldActivity.java. Ele � o arquivo necess�rio para iniciar o nosso aplicativo, e se encontra dentro da pasta src. Assim, altere o c�digo, conforme a Listagem 1, para que possamos utilizar os recursos do PhoneGap.

Listagem 1. Configurando o PhoneGap na Activity.


  package br.com.devmedia;
   
  import android.os.Bundle;
   
  import com.phonegap.*;
   
  public class HelloWordActivity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      super.loadUrl("file:///android_asset/www/index.html");
    }
  }

Explicando o c�digo, adicionamos o pacote com.phonegap.*, que cont�m todas as classes contidas no JAR do PhoneGap. Tamb�m alteramos a herança da classe HelloWorldActivity para a classe DroidGap, e por fim, substitu�mos o m�todo setContentView() por loadUrl(). Com esse m�todo, informamos ao nosso programa que o PhoneGap deve carregar sua interface e executar c�digo HTML.

Feito isso, vamos adicionar no arquivo AndroidManifest.xml as permiss�es que nosso programa poder� acessar no smartphone, como pode ser visto na Listagem 2. Essa etapa � muito importante se voc� estiver pensando em distribuir o seu aplicativo no Android Market. A Tabela 1 mostra os tipos de permiss�es que podemos adicionar.

Listagem 2. Permiss�es de acesso do aplicativo.


  ...
    <uses-sdk android:minSdkVersion="8" />
   
    <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" />
      <uses-permission android:name="android.permission.VIBRATE" />
      <uses-permission 
      <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  ...

Permiss�o	Descriç�o
android.permission.CAMERA	Permite acesso aos recursos da c�mera.
android.permission.VIBRATE	Permite acesso aos recursos de vibraç�o do aparelho.
android.permission.ACCESS_COARSE_LOCATION	Permite acesso aos recursos de n�veis de precis�o de latitude (menos precis�o).
android.permission.ACCESS_FINE_LOCATION	Permite acesso aos recursos de n�veis de precis�o de latitude (mais precis�o).
android.permission.READ_PHONE_STATE	Permite acesso � leitura da ligaç�o em andamento.
android.permission.INTERNET	Permite acesso � internet.
android.permission.RECEIVE_SMS	Permite acesso a receber SMS.
android.permission.RECORD_AUDIO	Permite gravaç�o de �udio.
android.permission.MODIFY_AUDIO_SETTINGS	Permite acesso � configuraç�o de �udio.
android.permission.READ_CONTACTS	Permite acesso aos contatos telef�nicos.
android.permission.WRITE_CONTACTS	Permite acesso a gravar contatos telef�nicos.
android.permission.WRITE_EXTERNAL_STORAGE	Permite acesso a gravar arquivos.
android.permission.ACCESS_NETWORK_STATE	Permite acesso � rede.
android.permission.GET_ACCOUNTS	Permite acesso �s contas.

Tabela 1. Permiss�es de acesso do aparelho para a aplicaç�o.

Ainda no AndroidManifest.xml, � necess�rio adicionar uma Activity para que, caso o usu�rio mude a orientaç�o do aparelho, a aplicaç�o n�o seja reiniciada (o m�todo onCreate() � executado toda vez que acontece este evento). Precisamos tratar eventos como esse para n�o ter problemas de ficar reiniciando nosso programa. Na Listagem 3, segue o c�digo para evitar que isso aconteça.

Listagem 3. Activity auxiliar para n�o reiniciar a aplicaç�o ao rodar a tela.


  ...
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>
              
    <activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden">
      <intent-filter>
      </intent-filter>
    </activity>
   
  </application>
  ...

Agora que configuramos nosso projeto, o pr�ximo passo ser� criar o arquivo index.html na pasta /asserts/www/. Para isso, acesse a opç�o de menu File > New > File. Esse arquivo ser� a primeira p�gina a ser exibida pela aplicaç�o. Como podemos analisar na Listagem 4, � um arquivo no formato HTML, onde foi adicionada a tag <script type=�text/javascript� charset=�utf-8� src= �phonegap.js�></script>, respons�vel por carregar na p�gina as funç�es do framework.

Listagem 4. C�digo do arquivo index.html.


  <!DOCTYPE HTML>
  <html>
    <head>
      <title>PhoneGap</title>
      <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    </head>
    <body>
      <h1>Hello World</h1>
    </body>
  </html>

Para verificar o resultado, execute o c�digo no emulador. Portanto, clique com o bot�o direito sobre o projeto e no menu Run > Run As � > Android Application. Dessa forma ser� iniciado um emulador que ir� instalar e executar a aplicaç�o. Uma vez o emulador iniciado, n�o � preciso fech�-lo para ficar testando a aplicaç�o, basta execut�-la novamente pelo Eclipse. Como voc� poder� notar, o emulador demora um bom tempo para iniciar.

Dando continuidade ao desenvolvimento de nossa aplicaç�o, que servir� para auxiliar os exerc�cios de esportistas cuja atividade f�sica � o atletismo, a interface dever� conter um cron�metro onde ser� informado o tempo previsto da corrida.

Deste modo, vamos modificar o arquivo index.html conforme a Listagem 5. Este c�digo tem por finalidade criar uma estrutura HTML para implementaç�o de um cron�metro utilizando c�digo JavaScript. A tag <span id="chronotime"> ser� atualizada atrav�s da funç�o chrono() constantemente com a contagem do tempo. Tamb�m adicionaremos dois bot�es, Start e Reset, que chamam as funç�es chronoStart(), chronoContinue() e chronoReset(), que fazem refer�ncia ao JavaScript para iniciar, parar e resetar o cron�metro, respectivamente.

Listagem 5. Adicionando o cron�metro ao index.html.


  <!DOCTYPE HTML>
  <html>
    <head>
      <title>PhoneGap</title>
      <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    </head>
    <script language="JavaScript">
      <!--
        var startTime = 0
        var start = 0
        var end = 0
        var diff = 0
        var timerID = 0
        function chrono(){
          end = new Date()
          diff = end - start
          diff = new Date(diff)
          var msec = diff.getMilliseconds()
          var sec = diff.getSeconds()
          var min = diff.getMinutes()
          var hr = diff.getHours()
          if (min < 10){
            min = "0" + min
          }
          if (sec < 10){
            sec = "0" + sec
          }
          if(msec < 10){
            msec = "00" +msec
          }
          else if(msec < 100){
            msec = "0" +msec
          }
          document.getElementById("chronotime").innerHTML = hr + ":" + min + ":" + sec + ":" + msec
          timerID = setTimeout("chrono()", 10)
        }
   
        function chronoStart(){
          document.chronoForm.startstop.value = "stop!"
          document.chronoForm.startstop.onclick = chronoStop
          document.chronoForm.reset.onclick = chronoReset
          start = new Date()
          chrono()
        }
        function chronoContinue(){
          document.chronoForm.startstop.value = "stop!"
          document.chronoForm.startstop.onclick = chronoStop
          document.chronoForm.reset.onclick = chronoReset
          start = new Date()-diff
          start = new Date(start)
          chrono()
        }
        function chronoReset(){
          document.getElementById("chronotime").innerHTML = "0:00:00:000"
          start = new Date()
        }
        function chronoStopReset(){
          document.getElementById("chronotime").innerHTML = "0:00:00:000"
          document.chronoForm.startstop.onclick = chronoStart
        }
        function chronoStop(){
          document.chronoForm.startstop.value = "start!"
          document.chronoForm.startstop.onclick = chronoContinue
          document.chronoForm.reset.onclick = chronoStopReset
          clearTimeout(timerID)
        }
      //-->
    </script>
   
    <body>
      <h1>Cronometro</h1>
        
      <span id="chronotime">0:00:00:00</span>
      <form name="chronoForm" id="chronoForm">
        <input type="button" name="startstop" value="start!" onClick="chronoStart()" />
        <input type="button" name="reset" value="reset!" onClick="chronoReset()" />
      </form>
    </body>
  </html>

Ap�s finalizar esta codificaç�o, ao executar o nosso c�digo, o resultado deve ser igual ao da Figura 8.

Figura 8. Executando a aplicaç�o no emulador.

Adicionando o jQuery Mobile

Visando aprimorar a interface e a usabilidade de nosso sistema, utilizaremos o framework JavaScript jQuery Mobile. Este � um framework web para desenvolvimento de aplicativos para smartphones e tablets, constru�do com jQuery e jQuery UI (ler Nota DevMan 2). O jQuery Mobile tem como principal objetivo fornecer ferramentas para a construç�o de interfaces touch. E para isso, o framework disponibiliza v�rios recursos, tais como: listas, pain�is, eventos, drag-and-drop e uma imensa gama de controles de formul�rios e widgets UI, o que simplifica e muito a vida do desenvolvedor

jQuery

O jQuery � uma biblioteca JavaScript capaz de adicionar interatividade e dinamismo �s p�ginas web sem complicar a vida do programador, ao contr�rio, o objetivo proposto de acordo com o seu lema � Write less, do more (Escreva menos, faça mais). A biblioteca foi criada dentro dos Padr�es Web estipulados pela W3C, por este motivo � uma biblioteca Cross-Browser, ou seja, � compat�vel com qualquer navegador de internet.

O grande diferencial do jQuery est� no suporte total ao CSS3 que permite o uso de seletores para localizar elementos de marcaç�o no HTML da p�gina, em sua arquitetura compat�vel com a instalaç�o de plug-ins e extens�es, na extensibilidade que permite a adiç�o de novas funcionalidades, e na integraç�o com o Ajax e linguagens server-side que permitem buscar informaç�es em um servidor remoto sem precisar recarregar a p�gina. E por esses e outros motivos, o jQuery � considerado por muitos uma ferramenta simples e eficaz no desenvolvimento de RIAs (Rich Internet Applications).

O diferencial do jQuery est�:

no suporte total ao CSS3 que permite o uso de seletores para localizar elementos de marcaç�o no HTML da p�gina;
em sua arquitetura compat�vel com a instalaç�o de plug-ins e extens�es;
na extensibilidade que permite a adiç�o de novas funcionalidades;
e na integraç�o com o Ajax e linguagens que permitem buscar informaç�es em um servidor remoto sem que seja necess�rio recarregar a p�gina.

Para adicionar ao nosso projeto o framework, precisamos realizar o download do arquivo do jQuery Mobile e do jQuery no site do projeto e coloc�-los dentro das pastas asserts/js e asserts/css, respectivamente.

Para utilizar este framework, no arquivo index.html, adicione na tag <header> as chamadas para os arquivos JavaScript (phonegap-1.0.0.js, js/jquery-1.6.4.js e js/jquery.mobile-1.0b3.min.js) e CSS (style/jquery.mobile-1.0b3.min.css), conforme a Listagem 6.

Listagem 6. Chamadas a arquivos CSS e JavaScript.


  ...
  <title>PhoneGap</title>
        
  <link rel="stylesheet" href="style/jquery.mobile-1.0b3.min.css" />
   
  <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
  <script src="js/jquery-1.6.4.js"></script>
  <script src="js/jquery.mobile-1.0b3.min.js"></script>
  ...

O jQuery Mobile disponibiliza recursos de tags HTML para estilizar a p�gina. E para tal, ele nos sugere a estrutura b�sica apresentada na Listagem 7.

Dentro da tag <body>, a p�gina � identificada com um elemento <div> contendo o atributo data-role=�page�. Dentro do container page, todas as tags HTML v�lidas podem ser utilizadas, mas nas p�ginas que utilizarem o jQuery Mobile, o filho imediato de uma �page� s�o divs contendo tags data-roles header, content e footer, sendo estas, respectivamente, cabeçalho, conte�do e rodap�.

Listagem 7. Template do jQuery Mobile.


  <div data-role="page"> 
    <div data-role="header">
      ...
    </div> 
    <div data-role="content">
      ...
    </div> 
    <div data-role="footer">
      ...
    </div> 
  </div>

Para montarmos as nossas p�ginas, precisamos seguir essa sequ�ncia do template. Na tag <div> com data-role=�header�, colocamos informaç�es referentes ao cabeçalho, um nome para a aplicaç�o ou informaç�es adicionais. J� a tag <div data-role=�content�> definir� o conte�do principal; no nosso caso, as informaç�es do cron�metro e os bot�es do formul�rio. Por fim, na <div data-role=�footer�>, poderemos inserir os menus ou outras informaç�es. A Listagem 8 apresenta o c�digo que emprega os recursos do jQuery Mobile em nosso projeto.

Listagem 8. jQuery Mobile em aç�o.


  <div data-role="page"> 
    <div data-role="header">
      <h1>Cronometro</h1>
    </div> 
    <div data-role="content">
      <span id="chronotime">0:00:00:00</span>
      <form name="chronoForm" id="chronoForm">
        <input type="button" name="startstop" value="start!" onClick="chronoStart()" />
        <input type="button" name="reset" value="reset!" onClick="chronoReset()" />
      </form>
    </div> 
  <div data-role="footer">...</div> 
  </div> 
  ...

Ao executarmos novamente a aplicaç�o, teremos o resultado apresentado na Figura 9.

Figura 9. Aplicativo com jQuery Mobile.

Agora, com pequenas modificaç�es, podemos usar as funcionalidades do jQuery Mobile e adicionar um estilo aos bot�es, deixando-os alinhados e melhorando a interface de nosso aplicativo, como demonstra a Figura 10.

Figura 10. Alinhando os bot�es da interface.

Dessa forma, adicione ao index.html o c�digo da Listagem 9. O arquivo cronometro.css ser� comentado posteriormente. A principal modificaç�o nesse c�digo est� nas tags <input>, onde foi adicionado o atributo data-inline =�true�. Ele deve ser empregado caso voc� deseje alinhar os bot�es. Por padr�o, um elemento preenche toda a tela.

Listagem 9. Adicionando recursos do jQuery Mobile.


  <header>
  ...
        <link rel="stylesheet" href="style/cronometro.css" />
  ...
  </header>
   
  ...
        <form name="chronoForm" id="chronoForm">
              <input type="button" name="startstop" value="start!" data-inline="true" data-theme="b" onClick="chronoStart()" />
              <input type="button" name="reset" value="reset!" data-inline="true" onClick="chronoReset()" />
        </form>

Para finalizar a interface do cron�metro vamos customizar os seus bot�es. Portanto, crie um arquivo de folha de estilo (cronometro.css) � conforme a Listagem 10 � dentro da pasta asserts/css.

Listagem 10. C�digo do arquivo cronometro.css.


  #chronotime {
    font-size: 90px;
  }
   
  #chronoForm {
    margin-left: 100px;
  }

Agora, execute novamente a aplicaç�o e veja o resultado destas pequenas mudanças na Figura 11.

Figura 11. Cron�metro funcional.

Conclus�o sobre PhoneGap

O desenvolvimento para dispositivos m�veis continua em ascens�o, sendo puxado agora � principalmente � pelas plataformas Android e iOS. Por causa disso, a quantidade de ferramentas para simplificar este trabalho tamb�m n�o para de aumentar. No entanto, algo que ainda n�o recebia tanta import�ncia começou a ser tratado com o devido respeito, a interface do usu�rio.

Neste contexto, neste artigo aprendemos a configurar o ambiente de desenvolvimento para criar sistemas Android e a montar um pequeno exemplo utilizando os frameworks PhoneGap e jQuery Mobile, que al�m de facilitar o desenvolvimento para varias plataformas, possibilitam a elaboraç�o de interfaces de boa usabilidade e apar�ncia.

Links �teis

CRUD em ASP.NET MVC com busca e paginaç�o:
Neste exemplo veremos como desenvolver um CRUD completo em ASP.NET MVC que contar� com os recursos de validaç�o no front-end e no back-end, m�scaras em campos de texto, busca e paginaç�o.
Java 8: Conheça os recursos para a programaç�o concorrente:
Aprenda com esse artigo a utilizar as melhorias da biblioteca de concorr�ncia do Java 8 e aprimore o desempenho e a qualidade de suas aplicaç�es.
Como manipular XML em Delphi:
Neste curso voc� aprender� a ler e gerar arquivos no formato XML. Aprender a manipular arquivos XML � necess�rio para desenvolver uma aplicaç�o de Nota Fiscal Eletr�nica (NF-e), por exemplo, pois toda a transmiss�o de informaç�es � realizada com arquivos XML.

Saiba mais sobre PhoneGap ;)

Guias Programaç�o Mobile:
Aumente seus conhecimentos nas tecnologias m�veis. Aqui voc� encontra um Guia de estudo perfeito para cada ferramenta do mercado. Escolha o seu!
Guia Completa de Cordova:
Neste Guia de Refer�ncia voc� encontrar� o conte�do que precisa para aprender a desenvolver aplicativos mobile multiplataforma utilizando o Cordova.
Guia Completa de Android:
O Android � a plataforma oficial para desenvolvimento de aplicativos mobile do Google. Neste guia voc� encontrar� artigos, v�deos e cursos para aprender tudo sobre esse SDK, que domina o mundo dos dispositivos m�veis.

PhoneGap com Android

Apresentaremos neste artigo a implementação de um aplicativo para o sistema operacional Android utilizando as tecnologias HTML, CSS e JavaScript. Para isso, analisaremos como montar o ambiente de desenvolvimento utilizando a IDE Eclipse e o Android.