Desenvolvimento Web para Android

@ramonrabello

Desenvolvimento Web para Android

#TaSafoConf #LightningTalk

domingo, 17 de junho de 12

http://www.twitter.com/ramonrabello

http://www.twitter.com/ramonrabello

Formacão Completa em Android - @androidnarede

Você conhece uma dessas tecnologias?



Mas não sabe Android?



Calma!

“Palma, palma! Não priemos

cânico!”



JQuery Mobile é a Solução!

jquerymobile.com



Mas não somente para Android! Para Qualquer Plataforma!

...domingo, 17 de junho de 12


Por onde começar?

http://jquerymobile.com/demos/domingo, 17 de junho de 12

http://jquerymobile.com

http://jquerymobile.com


Estrutura básica de uma página em JQuery Mobile

<!DOCTYPE html> <html> ! <head> ! <title>Minha Página</title> ! <meta name="viewport" content="width=device-width, initial-scale=1"> ! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />! <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>! <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script></head>

Primeiramente, devemos fazer referência à biblioteca do JQuery Mobile


http://code.jquery.com/jquery-1.7.1.min.js

http://code.jquery.com/jquery-1.7.1.min.js



<body> <div page-role=”page”> <div page-role=”header”> </div>

<div page- role=”content”> </div>

<div page-role=”footer”> </div> </div></body>

Depois, definimos o corpo da página, com a tag

<body>.

Dentro, adicionamos o comando

<div page-role=”page”>.





<div page- role=”content”> </div>


Em seguida adicionamos o cabeçalho com o

comando <div page-role=”header”>





<div page-role=”content”> </div>


Depois definimos o conteúdo com

o comando <div page-role=”content”>





<div page-role=”content”> </div>


E por último, adicionamos

<div page-role=”footer”> para definirmos o

rodapé.



Exemplo: Criando uma lista simples

<body> <div page-role=”page”>  <div page-role=”content”> <ul data-role=”listview”> <li><a href=”#”>Android</a></li> <li><a href=”#”>iOS</a></li> <li><a href=”#”>Windows Phone</a></li> <li><a href=”#”>Blackberry</a></li> </ul> </div>  </div></body>



Case de Exemplo

http://tasafo.org/conf2012/mobile/

Tá Safo! Conf 2012 Mobile







Mas como integrar JQuery Mobile em Android?

WebView webView = (WebView) findViewById(R.id.webView);webView.loadUrl(“file:///android_asset/www/index.html”);

Deve-se utilizar o componente WebView, específico para exibir

páginas Web, utilizando o método loadUrl().




WebView webView = (WebView) findViewById(R.id.webView);webView.loadUrl(“file:///android_asset/www/index.html”);

WebSettings configuracoes = webView.getSettings();configuracoes.setJavaScriptEnabled(true);

Depois, devemos ativar a utilização de JavaScript

nas páginas.




<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="br.com.androidnarede.tasafoconf.app" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="3" /> <uses-permission android:name="android.permission.INTERNET" />  </manifest>

Por fim, deve-se adicionar a permissão de internet no

AndroidManifest.xml.


http://schemas.android.com/apk/res/android

http://schemas.android.com/apk/res/android


Tá Safo! Conf 2012 para Android

Em breve no



Obrigado!

http://about.me/ramonrabello

@androidnarede

Desenvolvimento Web para Android

Technology