O documento discute o uso de WebView em aplicativos Android para exibir conteúdo da web. A WebView permite carregar HTML, CSS e JavaScript localmente ou remotamente. Ela pode ser personalizada com métodos para navegação, histórico e interação com JavaScript através de interfaces. A comunicação entre o código web e Android é feita por meio dessas interfaces.

1. Programação Android Avançada
ACESSO WEB EM ANDROID
Prof. André Márcio de Lima Curvello
andre.ml.curvello@gmail.com

3. WebView
◦ View Android específica para exibição de conteúdo Web
◦ HTML + CSS + JavaScript
◦ Funcionamento idêntico ao Browser do Android
◦ Uso do WebKit
◦ Permite embarcar conteúdo web em aplicação Android
◦ Local – armazenado na aplicação
◦ Remoto

4. WebView
◦ Por ser uma View, pode então:
◦ Ser posicionada em algum lugar no design interface de usuário.
◦ Possuir dimensões específicas.
◦ Ou ocupar a tela inteira.
◦ Deve possuir uma ID.
◦ Deve ser atribuída a seu objeto
WebView equivalente.

5. WebView
◦ Aplicações
◦ Exibir conteúdo formatado na aplicação
◦ Texto justificado com imagens
◦ Fontes personalizadas
◦ Exibir animações em formato *.GIF
◦ Reuso de código para aplicação Web em aplicação Nativa.

6. WebView
◦ Acesso Off-line - HardCoded
◦ É criada uma String com o conteúdo a ser exibido.
◦ Para ser exibido, chama-se o método loadData, passando por parâmetro a String, seu tipo
(“text/html”) e encoding (“UTF-8”) a ser utilizado.
◦ Não precisa de permissão para acesso Web.

7. WebView
◦ Acesso Off-line - Assets
◦ É preciso colocar a página e sua estrutura no diretório “assets” do projeto da aplicação
◦ A exibição do conteúdo é iniciada com a chamada de loadUrl, passando por parâmetro o endereço
URL do arquivo HTML no diretório assets.
◦ Não precisa de permissão para acesso Web

8. WebView
◦ Acesso On-line
◦ Basta passar a URL da aplicação na chamada de loadUrl do objeto WebView.
◦ É preciso ter a permissão de acesso à INTERNET no Manifesto da aplicação

9. WebView
◦ A WebView permite parametrizar o acesso ao conteúdo Web.
◦ O desenvolvedor tem acesso a recursos que permitem definir configurações tais
como:
◦ Habilitar suporte a Zoom
◦ Salvar dados de Formulários
◦ Salvar dados de passwords (senhas)
◦ Habilitar suporte a JavaScript – Desabilitado por padrão
◦ Carregar imagens automaticamente...
◦ Controlar forma de Scroll.
◦ Dentre outros, pesquise!

10. WebView – Alguns métodos
◦ canGoBack() – Especifica que pode ter histórico de retorno.
◦ goBack() – retorna uma página no histórico.
◦ canGoForward() – Especifica que pode ter histórico para adiante.
◦ goForward() – avança uma página no histórico.
◦ clearHistory() – Limpa todo o histórico da instância de WebView.
◦ destroy() - Destrói o estado interno da WebView.
◦ findAllAsync(String find) – Encontra as ocorrências de “find” e destaca-as no texto.
◦ getProgress() – Obtém o progresso da página atual.
◦ getTitle() – Obtém o título da página.
◦ getUrl() – Obtém a URL da página.

11. WebView – Alguns métodos
◦Dá pra você fazer seu próprio “Navegador” Web
◦ Utilizando dos recursos do WebView e do WebKit associados.
◦ Utilizando dos eventos de navegação
◦ Tratamento de entrada de dados
do usuário
◦ Etc!

12. WebViewClient
◦ Adicional ao WebView que permite uma customização ainda maior da interação do usuário
com a WebView e a aplicação, de modo a:
◦ Interceptar e filtrar chamadas a URLs específicas
◦ Permite manter o fluxo de páginas dentro da aplicação
◦ Bloqueia o usuário de abrir páginas não desejadas
◦ Ou permite que demais conteúdos sejam exibidos no Browser nativo do Android
◦ Permite interceptar respostas HTTP – Erro, OK, etc...
◦ Tratar eventos tais como teclas pressionadas
◦ Caso o usuário pressione Enter...
◦ Caso o usuário pressione Voltar...
◦ E assim realizar alguma ação específica.

13. WebChromeClient
◦ Adicional ao WebView que permite uma maior interação com chamadas JavaScript
da página e demais recursos tais como:
◦ A exibição de alert()
◦ Ou em vez de exibir alert() – exibir uma AlertDialog em Android
◦ Obter ícone de favorito do site – favicon
◦ Obter o nome de título do site
◦ Obter o progresso de carregamento do site
◦ Exibir janela para seleção de arquivo
◦ Integração com console JavaScript
◦ Dentre outros!

14. JavaScript Interface
◦ É uma classe que fará a ponte entre o conteúdo Web e a aplicação Android
por meio de JavaScript.
◦ Precisa ter um construtor com atributo de contexto de aplicação.
◦ Terá os métodos que serão chamados pela aplicação Web
Ou seja...
Implementará as “interfaces”
-Parâmetros...?
-Retornos...?
-Funcionamento...?
Você define.
Direção da comunicação:
Web  Android

15. JavaScript Interface
◦ É de fundamental importância que o JavaScript esteja habilitado na WebView
utilizada.
◦ Depois de criada a Classe de Interface, seu vínculo é feito com o método do
objeto WebView:
◦ Exemplo:

16. JavaScript Interface
◦ Vejam o seguinte exemplo de página Web que faz interface com o código Android:
◦ Vejam que foi determinado
que o objeto será chamado
por “Android” no código
JavaScript.

17. JavaScript Interface
◦ E se você quiser chamar um recurso da página Web, na WebView, a partir da
aplicação Android?
◦ Basta chamar loadUrl do objeto WebView, tendo a URL de parâmetro a seguinte
estrutura:
◦ Início – “javascript:” – indica que é uma chamada a uma rotina JavaScript
◦ Depois – nome da sua função no código JavaScript
◦ E depois - Demais parâmetros, respeitando aspas, etc.

18. Considerações
◦ Nem todas as WebViews terão a mesma renderização
◦ Versões diferentes de Android  WebKits sutilmente diferentes, etc.
◦ Performance
◦ Haverá um overhead de processamento em chamadas de interface
◦ Comportamento de Zoom e Scroll
◦ Podem conflitar entre o Zoom e Scroll nativos da aplicação VS do conteúdo Web.
◦ Complexidade
◦ Começa a misturar código Android com código Web
◦ Precisa ter infraestrutura online ou estrutura de projeto offline
◦ Segurança
◦ Cuidados com a exposição de códigos de interface Web - Android

19. Atividade
◦ Crie uma aplicação Android Nativa com conteúdo nativo e WebView.
◦ WebView deverá ocupar a metade inferior da tela
◦ Na aplicação Android Nativa, faça uma estrutura com campos para inserção de
nome e sobrenome, e um botão.
◦ Na página off-line em WebView, faça um form para inserção de nome e
sobrenome, e um botão que irá chamar uma rotina JavaScript.
◦ O botão Update Native deverá atualizar os campos da página Web com o
conteúdo digitado pelo usuário na aplicação Android nativa.
◦ O botão Update Web View deverá atualizar os campos da aplicação Android
com o conteúdo digitado pelo usuário na webview.

20. Observação
◦ Na chamada de interface JavaScript que fará a alteração de campos na
aplicação Android, é recomendável utilizar um método tal como
runOnUiThread para executar a operação.
◦ Caso contrário, não será possível alterar o conteúdo das Views desejadas.
◦ Exemplo: