Desenvolvimento Web para Android

Desenvolvimento Web para Android

#TaSafoConf #LightningTalk

@ramonrabello

domingo, 17 de junho de 12

Você conhece uma dessas tecnologias?

Formacão Completa em Android - @androidnarede

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!

...

Por onde começar?

http://jquerymobile.com/demos/

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

<body>
<div page-role=”page”>
<div page-role=”header”>
Depois, deﬁnimos o corpo
</div> da página, com a tag
<body>.
<div page- role=”content”>
</div> Dentro, adicionamos o
comando
<div page-role=”footer”>
</div> <div page-role=”page”>.
</div>
</body>

<body>
</div> Em seguida adicionamos
<div page- role=”content”> o cabeçalho com o
</div> comando
</div>
</div>
</body>

<body>
</div> Depois deﬁnimos o
conteúdo com
<div page-role=”content”>
</div> o comando
</div>
</div>
</body>

<body>
</div> E por último,
adicionamos
</div>
para deﬁnirmos o
<div page-role=”footer”> rodapé.
</div>
</div>
</body>

Exemplo: Criando uma lista simples

<body>

<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

Tá Safo! Conf 2012 Mobile

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

Mas como integrar JQuery Mobile em Android?

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”);



Depois, devemos ativar
a utilização de JavaScript
nas páginas.

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

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


Por ﬁm, deve-se adicionar a
permissão de internet no
AndroidManifest.xml.
<?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>

Tá Safo! Conf 2012 para Android

Em breve no


@androidnarede

http://about.me/ramonrabello

Obrigado!

Desenvolvimento Web para Android

Mais conteúdo relacionado

Destaque

Semelhante a Desenvolvimento Web para Android

Mais de Ramon Ribeiro Rabello

Último

Desenvolvimento Web para Android