O documento apresenta uma introdução ao framework JQuery Mobile para desenvolvimento de aplicativos multiplataforma. Ele explica a estrutura básica de uma página em JQuery Mobile e como integrá-lo em aplicativos Android usando o componente WebView.
1. Desenvolvimento Web para Android
#TaSafoConf #LightningTalk
@ramonrabello
domingo, 17 de junho de 12
2. Você conhece uma dessas tecnologias?
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
3. Mas não sabe Android?
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
4. Calma!
“Palma, palma!
Não priemos
cânico!”
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
5. JQuery Mobile é a Solução!
jquerymobile.com
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
6. Mas não somente para Android! Para Qualquer Plataforma!
...
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
7. Por onde começar?
http://jquerymobile.com/demos/
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
8. 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
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
9. Estrutura básica de uma página em JQuery Mobile
<body>
<div page-role=”page”>
<div page-role=”header”>
Depois, definimos 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>
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
10. Estrutura básica de uma página em JQuery Mobile
<body>
<div page-role=”page”>
<div page-role=”header”>
</div> Em seguida adicionamos
<div page- role=”content”> o cabeçalho com o
</div> comando
<div page-role=”header”>
<div page-role=”footer”>
</div>
</div>
</body>
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
11. Estrutura básica de uma página em JQuery Mobile
<body>
<div page-role=”page”>
<div page-role=”header”>
</div> Depois definimos o
conteúdo com
<div page-role=”content”>
</div> o comando
<div page-role=”content”>
<div page-role=”footer”>
</div>
</div>
</body>
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
12. Estrutura básica de uma página em JQuery Mobile
<body>
<div page-role=”page”>
<div page-role=”header”>
</div> E por último,
adicionamos
<div page-role=”content”>
<div page-role=”footer”>
</div>
para definirmos o
<div page-role=”footer”> rodapé.
</div>
</div>
</body>
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
13. Exemplo: Criando uma lista simples
<body>
<div page-role=”page”>
<!-- cabeçalho -->
<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>
<!-- rodapé -->
</div>
</body>
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
14. Case de Exemplo
Tá Safo! Conf 2012 Mobile
http://tasafo.org/conf2012/mobile/
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
15. 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”);
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
16. Mas como integrar JQuery Mobile em Android?
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);
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
17. Mas como integrar JQuery Mobile em Android?
Por fim, 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" />
<!-- definição de application e activities -->
</manifest>
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
18. Tá Safo! Conf 2012 para Android
Em breve no
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12
19. @androidnarede
http://about.me/ramonrabello
Obrigado!
Formacão Completa em Android - @androidnarede
domingo, 17 de junho de 12