Sem mais enrolação, vamos ao passo-a-passo!
1) Crie um simples projeto Android com o nome de PocWebView (POC significa Prova de Conceito ou Prove Of Concepts) e nomeie sua Activity principal como MainActivity. Se você tem dificuldades em dar este primeiro passo siga nosso tutorial de como criar um projeto Android aqui.
2) Crie uma simples página HTML com o código abaixo e a salve com o nome "simplesHTML.html" na pasta "res/assets" do seu projeto. Caso a pasta não exista, crie-a.
OBS.: Este arquivo poderia estar contido em um servidor web qualquer, isso não mudaria o código deste tutorial significativamente.
<html>
<head> </head>
<body>
<div id="resposta" ></div>
<div>
<form id="form1">
<table width="100%" class="mytable">
<tr>
<td>Nome</td>
</tr>
<tr>
<td><input type="text" id="txt_nome"></td>
</tr>
<tr>
<td>E-mail</td>
</tr>
<tr>
<td><input type="text" id="txt_email"></td>
</tr>
</table>
</form>
</div>
<button onClick="chamarActivity()">Chamar Activity</button>
</body>
</html>
Este é um formulário simples que pede para o usuário digitar um nome e um email.
Verificamos que nosso botão "Chamar Activity" faz a chamada a uma função Javascript chamada "chamarActivity()" a qual não definimos ainda. Também foi definida uma "div" na página com o id "resposta" que utilizaremos para montar a página de resposta com os dados que serão enviados pela Activity.
3) Agora vamos deixar um pouco a página HTML de lado e vamos às configurações em nossa aplicação Android. Modifique seu arquivo "activity_main.xml" (ou correspondente) na sua aplicação Android adicionando um componente "Webview" desta forma:
4) Crie um atributo do tipo "android.webkit.Webview" em sua "MainActivity.java" (ou correspondente) e associe-o ao componente Webview de seu arquivo de layout:
5) Criaremos uma classe privada chamada "MyWebViewClient" que herda de "android.webkit.WebviewClient" apenas para evitarmos que as ações dentro de nossa webview abram o browser de nosso aparelho. Para isso sobrescreva o método "shouldOverrideUrlLoading" e configure esta classe como sendo o "WebViewClient" de sua Webview. Ficará desta forma:
6) Ativaremos o recurso de "JavaScript" em nossa Webview e vamos configurar nossa Activity permitindo acesso a ela através de "Javascript". Isso é feito através do método "addJavascriptInterface" passando como parâmetro o Objeto que será acessado (em nosso caso será nossa própria Activity) e o prefixo que será utilizado na web para encontrar tal Objeto. Iremos também carregar nossa página HTML em nossa Webview. Segue trecho do código responsável por este feito:
7) Neste passo iremos criar o método de nossa Activity que será chamado pelo botão criado em nosso formulário na página HTML. O mesmo método, como resposta, chamará um método declarado em Javascript na nossa página que criará um formulário de resposta com os dados recebidos pela Activity. Segue método comentado para melhor entendimento:
8) Agora acrescente no "head" de sua página html o seguinte javascript:
<script type="text/javascript">
function metodoWebView(data){
var obj = eval ("(" + data + ")");
var html = "<p><b>Data received</b><br><br>"+
"Nome: <span>"+obj.param_nome+"</span><br>"+
"E-mail: <span >"+obj.param_email+"</span></p>";
var div_resposta=document.getElementById("resposta");
div_resposta.innerHTML = html;
}
function chamarActivity(){
var nome = document.getElementById("txt_nome").value;
var email = document.getElementById("txt_email").value;
var dataObj = new Object();
dataObj.param_nome = nome;
dataObj.param_email = email;
var jsonObj = JSON.stringify(dataObj);
pocwebview.metodoActivity(jsonObj);
}
</script>
É isso aí!! Se tudo ocorreu bem e você seguiu todo o passo-a-passo, certamente você terá em mãos uma aplicação que conversa com uma Webview!! ;)
Faça download do código fonte desta aplicação AQUI.
