Receba em primeira mão o conteúdo exclusivo do Blog, além de promoções de livros e cursos de programação. Você receberá um email de confirmação. Somente depois de confirmar é que poderei lhe enviar o conteúdo exclusivo por email.

Email inválido.
Blog /Android /Integrando WebView Android Com JavaScript de Uma WebPage

Integrando WebView Android Com JavaScript de Uma WebPage

Vinícius Thiengo31/12/2013, Terça-feira, às 16h
(3336) (29) (44) (2)
Go-ahead
"Construa uma voz e uma opinião em primeiro lugar e, em seguida, se essas ressoam com o público, então você vai ter uma audiência."
Adam Carolla
Código limpo
Capa do livro Refatorando Para Programas Limpos
TítuloRefatorando Para Programas Limpos
CategoriaEngenharia de Software
AutorVinícius Thiengo
Edição
Ano2017
Capítulos46
Páginas598
Comprar Livro
Conteúdo Exclusivo
Receba em primeira mão o conteúdo exclusivo do Blog, além de promoções de livros e cursos de programação.
Email inválido

Opa! Blz?

Nesse vídeo dou continuidade ao vídeo anterior em que falo sobre o WebView, componente visual mutio utilizado para construir APPs Android. Nesse vídeo mostro a integração em termos de envio e recebimento de dados entre a APP que contém a WebView e a página Web que é carregada na WebView.

Note que mesmo que você esteja começando no desenvolvimento Android e já tenha algum conhecimento com desenvolvimento Web, com o componente WebView já é possível você mesmo no inicio construir suas APPs profissionais, pois como eu falei no vídeo, até mesmo grandes empresas da Web utilizam o WebView. Mas enfim, vou evitar mais delongas e deixar você assistir ao vídeo.

Se você não conhece o LogCat do Android, eu fiz um vídeo falando somente dele: Entendendo e Utilizando o a Classe Log Com o LogCat no Android

Se você está iniciando e nunca criou um projeto e nem instalou o Bundle do Android, esse post qe fiz pode ser muito util a você: Iniciando Em Android: Instalação e Configuração do Bundle

O link para download do projeto se encontra logo abaixo no post (incluindo a página HTML/PHP).

Note que utilizei a lib jQuery ao invés de utilizar o JavaScript, mas você pode utilizar o JavaScript puro ou outra lib, não há problemas.

Compartilhe, comente! Vlw

Receba em primeira mão o conteúdo exclusivo do Blog, além de promoções de livros e cursos de programação.
Email inválido

Relacionado

ScrollView e HorizontalScrollView no Android, Entendendo e UtilizandoScrollView e HorizontalScrollView no Android, Entendendo e UtilizandoAndroid
GridLayout no Android, Entendendo e UtilizandoGridLayout no Android, Entendendo e UtilizandoAndroid
GridView no Android, Entendendo e UtilizandoGridView no Android, Entendendo e UtilizandoAndroid
WebView no Android, Entendendo e UtilizandoWebView no Android, Entendendo e UtilizandoAndroid

Compartilhar

Comentários Facebook (15)

Comentários Blog (14)

Para código / script, coloque entre [code] e [/code] para receber marcação especifica.
Forneça seu nome válido.
Forneça seu email válido.
Forneça o comentário.
Enviando, aguarde...
26/10/2016, Quarta-feira, às 21h
Boa noite!

Criamos um webview utilizando android, e no site existe um input type="file", porém através do webview o input simplesmente não acessa as pastas do aparelho.
Gostaria de saber o que poderia ser feito para resolver esse problema, e se preciso liberar alguma permissão para isso.

Obrigado!!!
Responder
Vinícius Thiengo (0) (0)
28/10/2016, Sexta-feira, às 22h
Rafael, blz?

Esse é um problema antigo com o WebView e o input file.

Tem uma sugestão de solução nesse link: http://stackoverflow.com/questions/5907369/file-upload-in-webview/7041918#7041918

Mas uma outra possível solução é você em seu script Web identificar o tamanho da tela do device que está com o site aberto e com base nisso trabalhar a lógica de negócio correta no script JavaScript.

Falo sobre identificar o tamanho da tela para definir se é ou não um device mobile em uso, pois foi a maneira mais segura que encontrei até hoje de definir isso enquanto o site estava em produção. Mas existem alguns scripts JavaScript mais sofisticados por ai, vale a pena buscar mais.

Quando definido que é uma tela de desktop ou laptop, então deixe o input file trabalhar da maneira comum.

Caso contrário, definido que é um device mobile, utilize a comunicação via Interface com o código Android, digo, JavaScript e Android.

Nesse artigo / vídeo mostro como fazer isso: http://www.thiengo.com.br/integrando-webview-android-com-javascript-de-uma-webpage

Porém ele está sendo explicado em um projeto muito fictício, tenho um projeto mais atual e real utilizando WebView Interface nesse artigo / vídeo: http://www.thiengo.com.br/checkout-transparente-da-web-no-android

Essa comunicação será ativada somente com o clique no input file, ou seja, você terá de remover o comportamento padrão desse button. Com jQuery isso é trivial.

Clicado no input file, chame o código JavaScript para ativar um método Android para então ativar o file chooser do device.

Uma library que pode lhe ajudar a ativar o file chooser é a seguinte: https://android-arsenal.com/details/1/4044

Feito isso, ainda tem a parte do envio do formulário com a mídia. Essa mídia escolhida deverá ser enviada também pelo Android, então o melhor caminho que vejo é manter a conexão JavaScript x Android via Interface e assim enviar todos os outros dados de texto do formulário para o Android e o código Android, junto a uma library como o Retrofit, enviar todos os dados para seu backend Web.

Caso não conheça o Retrofit, veja esse artigo / vídeo (e os links indicados): http://www.thiengo.com.br/library-retrofit-2-no-android

Siga as dicas e veja se consegue fazer funcionar sem problemas.

Note que você pode ter problemas quando o usuário estiver em um sistema mobile diferente do Android.

Nesse caso tente esse script jQuery: http://stackoverflow.com/a/6031480/2578331

A princípio ele detecta devices Android, logo é melhor que a minha técnica de tamanho de tela.

Abraço.
Responder
04/06/2015, Quinta-feira, às 12h
Olá, como vai?Primeiramente parabéns pelo vídeo, adoro seu trabalho.Diga-me é possível desabilitar ou alterar o botão IR do teclado do telefone? Porque quando preencho o campo nome e se eu clicar no botão ir do teclado do telefone ele envia os dados, quero que ele pule pro próximo campo a ser preenchido.
Responder
Vinícius Thiengo (0) (0)
05/06/2015, Sexta-feira, às 08h
Fala Francisco, td tranquilo.
Dê uma olhada a resposta certa desse link (http://stackoverflow.com/questions/5677563/listener-for-done-button-on-edittext). Verifique se quando vc retorna false se ele não faz nada. Vc consegue dentro desse listener mudar o focus de um campo para outro. Ve se consegue ai, qualquer coisa volte ae. Abraço
Responder
05/06/2015, Sexta-feira, às 11h
Olá Thiengo, obrigado pela atenção, mas não deu certo.Esqueci de informar que é na webView a página que estou carregando tem um formulário, campo nome, email, observção, eu quero que campo estiver no campo nome e clicar no botão ir do teclado o focu mudará pro próximo campo.Estou usando o viewWeb.setOnKeyListener () para identificar o back, tentei usa-lo para identificar a ação da tecla ir, coloquei um breakPoint ele nem reconhce , somente do back.
Responder
Vinícius Thiengo (1) (0)
06/06/2015, Sábado, às 10h
Fala Francisco, blz?
Encontrei esse link (http://stackoverflow.com/questions/14682193/hide-or-disable-webview-softkeyboard-go-done-enter-button). Nele o problema do camarada é o mesmo que o seu, mesmo o post sendo um pouco antigo (2013) aparentemente nada mudou em relação a essa limitação. Ele tb tentou de todas as formas capturar o clique no "Go" button para evitar o envio, porém sem sucesso (o camarada da segunda resposta a pergunta conseguiu fazer isso). Mas ele c=achou uma solução, no caso remover o "Go" button, no form que está no WebView ele colocou um TextArea com rows="1" para simular um input type="text", dessa forma o "Go" button não aparece, pois segundo a resposta esse button aparece somente com inputs. Teste ai e ve se roda para ti. Abraço
Responder
08/06/2015, Segunda-feira, às 16h
Obrigado Thiengo, a solução é boa, mas no meu caso eu só faço o load do site, não monto o html.
Responder
17/09/2014, Quarta-feira, às 15h
Olá Thiengo, estou com um pequeno problema, quando o Aplicativo abre, em vez de carregar na WebView, o blog está sendo carregado no navegador...

peguei o link de uma categoria do blog, e coloquei como pagina de load no app, até ae abriu beleza, porem na hora q eu clico no menu pra mudar de categoria, ele carrega no navegador em vez de ser dentro da WebView... me dê uma luz, já estou a muito tempo atras disso e nda. VLW
Responder
Vinícius Thiengo (1) (0)
18/09/2014, Quinta-feira, às 02h
Fala Nilsinho, blz?
Problema comum, quando fiz o vídeo não sabiia que isso poderia acontecer, a solução segue abaixo:

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.loadUrl(webData.getUrl());
webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url){
view.loadUrl(url);
return true;
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon){}
@Override
public void onPageFinished(WebView view, String url){}
});

A jogada mesmo está no método setWebViewClient(). Abraço
Responder
18/09/2014, Quinta-feira, às 11h
Valeu mesmo pela atenção, pelo incrível que pareça eu consegui fazer funcionar, encontrei um campo falando sobre isso mesmo, olha como eu coloquei (desse jeito funcionou 100%):


public class MainActivity extends Activity {

private String url = "http://blog.nilsinho.com";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        WebView wv = (WebView) findViewById(R.id.webView);
        WebSettings ws = wv.getSettings();
        ws.setJavaScriptEnabled(true);
        wv.loadUrl(url);
        wv.setWebViewClient(new WebViewClient());
        return;
        
    }
}

agora o próximo passo é criar um menu bacaninha pra aplicação. Obrigado! =)
Responder
Luciano Castilho (1) (0)
18/02/2014, Terça-feira, às 16h
Boa tarde Thiengo,

Assisti as suas video aulas e gostei bastante, tem me ajudado muito.
Agora tenho uma dúvida sobre como usar ajax no webview, a fim de evitar reload no app, será que tem como fazer isso?!
Fiz diversos testes, e no html funciona direitinho, no ambiente do eclipse também, agora qdo vou usar o telefone, ele só fas o beforeSend do ajax e nada mais, pode me ajudar?

muito obrigado
Responder
Vinícius Thiengo (0) (0)
18/02/2014, Terça-feira, às 19h
Fala Luciano... comportamento estranho, vc está acompanhando o LogCat quando está utilizando no ambiente que dar certo (eclipse e cia.) e no ambiente que da errado (smartphone)? Tentou algum outro smartphone? Acho que se seu problema é reload o atributo "configChanges" da tag <activity> pode lhe ajudar. Quando trabalho com WebView costumo utilizar esse atributo para evitar a reconstrução da Activity quando o usuário muda a orientação do dispositivo (landscap para portrait e vice-versa) ou quando chama o teclado fisico do dispositivo. Luciano vc está sobrescrevendo o método public boolean shouldOverrideUrlLoading(WebView view, String url) de WebViewClient()? Pode ser isso tb... aqui no blog fiz um vídeo mostrando como utilizar o atributo configChanges, é só colocar no buscador do site que ele será o primeiro resultado. Se quiser dar uma destrinchada melhor envie o projeto por email para eu poder dar uma olhada nessa parte, mas aconselho vc tentar rodar em outro dispositivo smartphone para ter certeza tb que isso não uma limitação de seu smartphone... Abraço e sucesso ai com sua App
Responder
Luciano (1) (0)
19/02/2014, Quarta-feira, às 11h
Thiengo,
Primeiramente muito obrigado pela sua atenção no meu caso, essas alterações no configChanges, e o override nos metodos estava fazendo, mas nada disso estava inferferindo, na verdade era a versão do jquery que estava referenciando no html, quando coloquei a mais atual funcionou, o ajax funcionou direitinho ao menos no meu Motorola de teste. Vou assistir os videos sugeridos por você, e gostaria de parabenizar você por eles, são muito bons realmente.
[]'s Luciano Castilho
Responder
Vinícius Thiengo (0) (0)
19/02/2014, Quarta-feira, às 14h
Vlw Luciano, abraço
Responder