Android WebView

15 de julho de 2013 17 respostas

ed-cadu 15 de julho de 2013

Boa tarde pessoal preciso de uma mãozinha, sou novo com o desenvolvimento android e estou penando um pouco com algumas coisas,
o que eu estou fazendo no momento é desenvolvendo o layout do aplicativo em html5, css e jquery, na classe principal eu criei o banco,
agora preciso fazer o insert dos dados, mas como fazer para que o jquery(javascript) consiga executar o insert no banco sqlite nativo do
android, pq o ideal é que a aplicação tenha seu próprio banco e quando a pessoa fique online ele atualize os dados de ambos os bancos.
Infelizmente todos os exemplos que achei as pessoas estão usando xml, e eu não estou usando xml e sim html.

fico no aguardo de alguma ajuda e caso ache a resposta antes publico aqui pra vcs!

obrigado.

17 Respostas

Marky.Vasconcelos 15 de jul. de 2013

Via código você consegue interceptar chamadas JavaScripts (inclusive receber e retornar valores), procure por addJavascriptInterface da WebView.

Vai resolver seu problema.

No html você faz chamadas a javascripts como banco.adicionar(nome, telefone) e adiciona pelo codigo Java no SQLite provavelmente. Para consumir a mesma coisa, banco.getAllPessoas().

ed-cadu 18 de jul. de 2013

Marky.Vasconcelos vc teria algum exemplo simples desta aplicação?

Marky.Vasconcelos 18 de jul. de 2013

Ahh… é muitas coisas, mas de cabeça o que lembro:

html

<button onClick="alert(javascript:dao.adicionar(nome))" />

Java

static class DaoJavascriptListener {
public String adicionar(nome){
//adiciona no banco
return nome;
}
}

onCreate(){
WebView view = findView(R.id.webView);
view.addJavascriptInterface(new DaoJavascriptListener(), "dao");
}

E então toda chamada javascript em “dao” será redirecionada para o objeto criado.

PS: Necessario adicionar keep names no proguard para manter o Listener com os nomes corretos, pois não irão funcionar após obfuscado (já aconteceu comigo).

ed-cadu 18 de jul. de 2013

no android pelo que pude ver em exemplos esta correto e como o mark me orientou estou usando o addjavascriptinterface

package Exercicio.exercicio1;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.widget.Toast;

public class MainActivity extends Activity
{
    WebView web;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        web = (WebView)findViewById(R.id.webView);
        
        WebSettings settings = web.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setSupportMultipleWindows(true);
        settings.setSupportZoom(false);
        settings.setPluginsEnabled(true);
        web.setWebChromeClient(new WebChromeClient());
        web.setVerticalScrollBarEnabled(true);
        web.setHorizontalScrollBarEnabled(false);        
        web.loadUrl("file:///android_asset/www/index.html");
        web.addJavascriptInterface(new JavaScriptInterface(this),"MainActivity");
        web.addJavascriptInterface(new Js(), "Android");
    } 
    
    public class Js{       
        
        public String getSomeString(){
            return "Holla mundo!";
        }      
        
    }
    public class JavaScriptInterface{
        Context mContext;
        JavaScriptInterface(Context c){
            mContext = c;
        }      
       
        public void showToast(String toast){
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }
    
}

aqui no documento js

$(document).ready(function(){
    $("#btn").click(function(){
        alert("olá, "+$("#nome").val());
    });  
    $("#btn_2").click(function(){
        alert(teste());
    });
});

function teste() {
    Android.getSomeString();
}

e aqui no html

<!DOCTYPE html>
<html>
    <head>
        <title>aplicativo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
        <script type="text/javascript" src="js/general.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.3.1.js" ></script>
        
        <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css" type="text/css" /> 
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <style type="text/css">
            
        </style>
    </head>
    <script type="text/javascript">
            
    </script>
    <body>
        <div data-role="page" id="page" data-theme="e">
            <div data-role="header">
                <h1>Cabeçalho</h1>
            </div>         
        
            <div data-role="content">                
                <label>seu nome:</label>
                <input type="text" name="nome" id="nome"/>
                
                <input type="button" id="btn" value="aperte"/> 
                <input type="button" id="btn_2" value="outra coisa"/>
            </div>  
            
            <div id="clear"></div>
            <div data-role="footer">
                <footer>
                    Rodapé
                </footer>
            </div>
        </div>
    </body>
</html>

porem ele ainda não me retorna a tal string que estou usando para teste.
alguém ai já fez algo assim ?

Marky.Vasconcelos 18 de jul. de 2013

Não falta return no seu function?

function teste() {  
   return Android.getSomeString();  
}

ed-cadu 18 de jul. de 2013

coloquei o return mas mesmo assim sem resposta

ed-cadu 18 de jul. de 2013

Mark deu certo, obrigado, é que eu estava testando no chrome tbm e lá não me retorna nada, mas na aplicação no android esta certinho, vlw agora com isso acredito que consiga avançar nos meus estudos aqui… vlw msm pelas dicas!

ed-cadu 19 de jul. de 2013

Ok pessoal desculpe ter começado um novo tópico como entre no fórum muito pouco não sei as regras, ache que a dúvida merecia outro tópico, então minha dúvida é como fazer o insert no banco de dados do android via javascript se puderem dar uma ajuda, ficarei grato.
e desculpe por duplicar o tópico.

Marky.Vasconcelos 19 de jul. de 2013

Seu método da JavaScript interface não está sendo invocado? Adicione por ele.

ed-cadu 23 de jul. de 2013

olá, no android está assim

package Exercicio.exercicio1;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.widget.Toast;

public class MainActivity extends Activity
{
    WebView web;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        web = (WebView)findViewById(R.id.webView);
        
        WebSettings settings = web.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setSupportMultipleWindows(true);
        settings.setSupportZoom(false);
        settings.setPluginsEnabled(true);
        web.setWebChromeClient(new WebChromeClient());
        web.setVerticalScrollBarEnabled(true);
        web.setHorizontalScrollBarEnabled(false);        
        web.loadUrl("file:///android_asset/www/index.html");
        web.addJavascriptInterface(new JavaScriptInterface(this),"MainActivity");
        web.addJavascriptInterface(new Js(), "Android");
        web.addJavascriptInterface(new BancoJS(), "Banco");
        
        BancoJS banco = new BancoJS();
        banco.CriaDB();
                
    } 
    
    public class BancoJS{
        
        String NomeDB = "aula";
        SQLiteDatabase DB = null;
        Cursor cursor;
        
        public void CriaDB(){
            try{
                DB = openOrCreateDatabase(NomeDB, MODE_WORLD_READABLE, null);
                String SQL = "CREATE TABLE IF NOT EXISTS tabPessoa (_id INTEGER PRIMARY KEY AUTOINCREMENT, nome_pessoa TEXT NOT NULL, telefone_pessoa TEXT NOT NULL)";
                DB.execSQL(SQL);
                MensagemAlerta("Banco de dados", "Banco Criado Com Sucesso!");
            }catch(Exception erro){
                MensagemAlerta("Erro Banco de dados", "Não foi possível cria o banco!" + erro);
            }
            finally{
                 DB.close();
             }
        }       
        
        public void insertDB(String nome, String telefone){
            try{
                DB = openOrCreateDatabase(NomeDB, MODE_WORLD_READABLE, null);
                String SQL = "INSERT INTO tabCadastroPessoa(nome_pessoa, telefone_pessoa) VALUES ('"+nome.toString()+","+telefone.toString()+"')";
                DB.execSQL(SQL);
                MensagemAlerta("Banco de dados", "Registro Gravado Com Sucesso!");
            }catch(Exception erro){
                MensagemAlerta("Erro Banco de dados", "Não foi possível gravar o registro!" + erro);
            }
            finally{
                 DB.close();
             }
            
        }

        public void MensagemAlerta(String TituloAlerta, String MensagemAlerta){
            AlertDialog.Builder Mensagem = new AlertDialog.Builder(MainActivity.this);
            Mensagem.setTitle(TituloAlerta);
            Mensagem.setMessage(MensagemAlerta);
            Mensagem.setNeutralButton("OK", null);
            Mensagem.show();

        }
        
    }
    
    public class Js{       
        
        public String getSomeString(){
            return "Holla mundo!";
        }      
        
    }
    
    public class JavaScriptInterface{
        Context mContext;
        JavaScriptInterface(Context c){
            mContext = c;
        }      
       
        public void showToast(String toast){
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }
    
}

no js

$(document).ready(function(){   
    
    $("#btn").click(function(){
        var nome = $("#nome").val();
        var telefone = $("#telefone").val();
        insertBanco( nome, telefone);
    });  
    $("#btn_2").click(function(){
        alert(teste());
    });
    
});

function insertBanco(){
    Banco.insertDB();
}

function mensagemBanco(){
    return Banco.MensagemAlerta();
}

function teste() {
    return Android.getSomeString();
}

Marky.Vasconcelos 23 de jul. de 2013

ed-cadu 23 de jul. de 2013

E q não esta passando o valor pelo javascript(jquery). eu dei um alert pra saber se esta recuperando o valor dos inputs e até ai blz esta ocorrendo certinho, mas na hora de enviar ao java para fazer o insert no banco do android não esta indo, e tenho certeza que estou fazendo algo errado e precisava de uma mãozinha se possível.

Marky.Vasconcelos 23 de jul. de 2013

function insertBanco(){  
    Banco.insertDB();  
}

Não seria:

function insertBanco(var x1, var x2){  
    Banco.insertDB(x1, x3);  
}

ed-cadu 23 de jul. de 2013

Então, testei e consegui dessa maneira

$(document).ready(function(){   
    
    $("#btn").click(function(){
        var nome = $("#nome").val();
        var telefone = $("#telefone").val();
        insertBanco( nome, telefone);
    }); 
    
});

function insertBanco(nome, telefone){
    return Banco.insertDB(nome, telefone);    
}

function mensagemBanco(){
    return Banco.MensagemAlerta();    
}

android

package Exercicio.exercicio1;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.widget.Toast;

public class MainActivity extends Activity
{
    WebView web;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        web = (WebView)findViewById(R.id.webView);
        
        WebSettings settings = web.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setSupportMultipleWindows(true);
        settings.setSupportZoom(false);
        settings.setPluginsEnabled(true);
        web.setWebChromeClient(new WebChromeClient());
        web.setVerticalScrollBarEnabled(true);
        web.setHorizontalScrollBarEnabled(false);        
        web.loadUrl("file:///android_asset/www/index.html");
        web.addJavascriptInterface(new JavaScriptInterface(this),"MainActivity");
        web.addJavascriptInterface(new Js(), "Android");
        web.addJavascriptInterface(new BancoJS(), "Banco");
        
        BancoJS banco = new BancoJS();
        banco.CriaDB();
                
    } 
    
    public class BancoJS{
        
        String NomeDB = "aula";
        SQLiteDatabase DB = null;
        Cursor cursor;
        
        public void CriaDB(){
            try{
                DB = openOrCreateDatabase(NomeDB, MODE_WORLD_READABLE, null);
                String SQL = "CREATE TABLE IF NOT EXISTS tabPessoa (_id INTEGER PRIMARY KEY AUTOINCREMENT, nome_pessoa TEXT NOT NULL, telefone_pessoa TEXT NOT NULL)";
                DB.execSQL(SQL);
                MensagemAlerta("Banco de dados", "Banco Criado Com Sucesso!");
            }catch(Exception erro){
                MensagemAlerta("Erro Banco de dados", "Não foi possível cria o banco!" + erro);
            }
            finally{
                 DB.close();
             }
        }       
        
        public void insertDB(String nome, String telefone){
            try{
                DB = openOrCreateDatabase(NomeDB, MODE_WORLD_READABLE, null);
                String SQL = "INSERT INTO tabPessoa(nome_pessoa, telefone_pessoa) VALUES ('"+nome.toString()+"','"+telefone.toString()+"')";
                DB.execSQL(SQL);
                MensagemAlerta("Banco de dados", "Registro Gravado Com Sucesso!");
            }catch(Exception erro){
                MensagemAlerta("Erro Banco de dados", "Não foi possível gravar o registro!" + erro);
            }
            finally{
                 DB.close();
             }
            
        }

        public void MensagemAlerta(String TituloAlerta, String MensagemAlerta){
            AlertDialog.Builder Mensagem = new AlertDialog.Builder(MainActivity.this);
            Mensagem.setTitle(TituloAlerta);
            Mensagem.setMessage(MensagemAlerta);
            Mensagem.setNeutralButton("OK", null);
            Mensagem.show();

        }
        
    }
    
    public class Js{       
        
        public String getSomeString(){
            return "Holla mundo!";
        }      
        
    }
    
    public class JavaScriptInterface{
        Context mContext;
        JavaScriptInterface(Context c){
            mContext = c;
        }      
       
        public void showToast(String toast){
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }
    
}

Marky.Vasconcelos 23 de jul. de 2013

Funcionou?

ed-cadu 23 de jul. de 2013

sim agora funcionou, to pegando o jeito de programar em android aos poucos, é que os exemplos que eu achei pela net em sua maioria são todos usando xml então acaba mudando a maneira de se fazer as coisas pelo menos um pouco, mas deu certo sim, agora é criar uma lista com os contatos que estão no banco.
e mais uma vez vlw as dicas marky!!

Marky.Vasconcelos 24 de jul. de 2013

Que bom.

Edite o primeiro topico e adicione [RESOLVIDO] ao titulo para identificar essa questão como resolvida.

Criado 15 de julho de 2013

Ultima resposta 24 de jul. de 2013

Respostas 17

Participantes 2

17 Respostas

Topicos relacionados