Embed Size (px)
Citation preview
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
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.
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.
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.
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
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
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!
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.
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!
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.
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!
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
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 doobjeto WebView:
◦ Exemplo:
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.
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 seguinteestrutura:
◦ 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.
Considerações◦ Nem todas as WebViews terão a mesma renderização
◦ Versões diferentes de AndroidWebKits 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
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 denome e sobrenome, e um botão.
◦ Na página off-line em WebView, faça um form para inserção de nome esobrenome, e um botão que irá chamar uma rotina JavaScript.
◦ O botão Update Native deverá atualizar os campos da página Web com oconteúdo digitado pelo usuário na aplicação Android nativa.
◦ O botão Update Web View deverá atualizar os campos da aplicação Androidcom o conteúdo digitado pelo usuário na webview.
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 comorunOnUiThread para executar a operação.
◦ Caso contrário, não será possível alterar o conteúdo das Views desejadas.
◦ Exemplo:
