Desenvolvimento Web para Android

Desenvolvimento Web para Android #TaSafoConf #LightningTalk @ramonrabellodomingo, 17 de junho de 12

Você conhece uma dessas tecnologias? Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12

Mas não sabe Android? Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12

Calma! “Palma, palma! Não priemos cânico!” Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12

JQuery Mobile é a Solução! jquerymobile.com Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12

Mas não somente para Android! Para Qualquer Plataforma! ... Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12

Por onde começar? http://jquerymobile.com/demos/ Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12

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 - @androidnarededomingo, 17 de junho de 12

Estrutura básica de uma página em 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> Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12

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 - @androidnarededomingo, 17 de junho de 12

Estrutura básica de uma página em JQuery Mobile <body> <div page-role=”page”> <div page-role=”header”> </div> Depois deﬁnimos 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 - @androidnarededomingo, 17 de junho de 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 deﬁnirmos o <div page-role=”footer”> rodapé. </div> </div> </body> Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12

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> Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12

Case de Exemplo Tá Safo! Conf 2012 Mobile http://tasafo.org/conf2012/mobile/ Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12

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 - @androidnarededomingo, 17 de junho de 12

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 - @androidnarededomingo, 17 de junho de 12

Mas como integrar JQuery Mobile em Android? 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> Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12

Tá Safo! Conf 2012 para Android Em breve no Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12

@androidnarede http://about.me/ramonrabello Obrigado! Formacão Completa em Android - @androidnarededomingo, 17 de junho de 12

Desenvolvimento Web para Android

by Ramon Rabello on Jun 17, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 3

Statistics

Desenvolvimento Web para Android Presentation Transcript