Upload
ramon-rabello
View
1.959
Download
4
Embed Size (px)
DESCRIPTION
Lightning Talk apresentada durante o Tá Safo! Conf 2012 - http://tasafo.org/conf2012/
Citation preview
@ramonrabello
Desenvolvimento Web para Android
#TaSafoConf #LightningTalk
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
Você conhece uma dessas tecnologias?
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
Mas não sabe Android?
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
Calma!
“Palma, palma! Não priemos
cânico!”
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
JQuery Mobile é a Solução!
jquerymobile.com
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
Mas não somente para Android! Para Qualquer Plataforma!
...domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
Por onde começar?
http://jquerymobile.com/demos/domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
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
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
Estrutura básica de uma página em JQuery Mobile
<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”>.
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
Estrutura básica de uma página em JQuery Mobile
<body> <div page-role=”page”> <div page-role=”header”> </div>
<div page- role=”content”> </div>
<div page-role=”footer”> </div> </div></body>
Em seguida adicionamos o cabeçalho com o
comando <div page-role=”header”>
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
Estrutura básica de uma página em JQuery Mobile
<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 conteúdo com
o comando <div page-role=”content”>
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
Estrutura básica de uma página em JQuery Mobile
<body> <div page-role=”page”> <div page-role=”header”> </div>
<div page-role=”content”> </div>
<div page-role=”footer”> </div> </div></body>
E por último, adicionamos
<div page-role=”footer”> para definirmos o
rodapé.
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
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>
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
Case de Exemplo
http://tasafo.org/conf2012/mobile/
Tá Safo! Conf 2012 Mobile
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
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().
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
Mas como integrar JQuery Mobile em Android?
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.
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
Mas como integrar JQuery Mobile em Android?
<?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>
Por fim, deve-se adicionar a permissão de internet no
AndroidManifest.xml.
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
Tá Safo! Conf 2012 para Android
Em breve no
domingo, 17 de junho de 12
Formacão Completa em Android - @androidnarede
Obrigado!
http://about.me/ramonrabello
@androidnarede
domingo, 17 de junho de 12