Xamarin Forms - Apresentando e usando WebView (revisitado)

 Neste artigo eu vou apresentar e mostrar como usar os recursos básicos da view WebView em aplicações Xamarin Forms.

O componente WebView é uma view usada para a exibição de conteúdos web e HTML em seu aplicativo. O WebView é muito versátil e possui os seguintes recursos:

Neste primeiro contato com o controle WebView vamos nos ater a exibir conteúdo HTML.

Neste caso o controle vem com suporte para os seguintes tipos de conteúdo:

Para exibir um site da web basta definir a propriedade Source do WebView para a string URL do site:

 
var browser = new WebView {   Source = "http://macoratti.net" };

Para apresentar uma cadeia de caracteres HTML definidos no código basta criar uma instância de HtmlWebViewSource :

 
var browser = new WebView();
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = @"<html><body>
                                 <h1>Xamarin.Forms</h1>
                                 <p>Welcome to WebView.</p>
                                 </body></html>";
browser.Source = htmlSource;
 

Podemos ainda exibir conteúdo HTML, CSS e javascript inserido na aplicação. Considere que as fontes definidas no arquivo de estilo devem ser personalizadas para cada plataforma.

Para exibição de conteúdo local usando um WebView, você precisará abrir o arquivo HTML como qualquer outro e, em seguida, carregar o conteúdo como uma cadeia de caracteres na propriedade Html de um HtmlWebViewSource. (Como o WebView não sabe de onde veio o HTML pode haver problemas com páginas que fazem referências a recursos locais. Isso deve ser tratado em cada plataforma via DependencyService)

Com relação a navegação, o WebView oferece os seguintes métodos e propriedades:

A WebView gera dois eventos para ajudá-lo a responder a alterações no estado:

Até o momento não existe suporte para toque.

Recursos Usados

Criando o projeto Xamarin Forms

Abra o  VS 2017 Community e clique em New Project e a seguir escolha Cross Platform -> Cross Platform App (Xamarin.Forms) e informe o nome XF_WebView1.

Ao criar um projeto Xamarin Forms em uma versão anterior à atualização 15.5, você tinha duas opções para compartilhar o código entre as plataformas:

  1. Shared Project
  2. Portable Class Library (PCL)

Pois a partir da versão 15.5 do Visual Studio(lançada em dezembro/2017) a opção Portable Class Library (PCL) foi substituida pela .NET Standard:

Marque as opções Android e/ou iOS, marque Xamarin Forms e a seguir marque .NET Standard e clique no botão OK.

Pronto nosso projeto já esta criado. (Verifique a necessidade de atualizar a versão do Xamarin Forms no seu projeto. Atualmente(06/2018) a versão mais atual é a 3.0.0)

Definindo o código da MainPage.xaml

Abra o arquivo MainPage.xaml e inclua no código abaixo:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_WebView1"
             x:Class="XF_WebView1.MainPage">
    <StackLayout>
      <Label Text="Abrindo uma página da web com WebView" VerticalOptions="Center" HorizontalOptions="Center" />
      <WebView x:Name="mwbv1" Source="http://www.macoratti.net" VerticalOptions="FillAndExpand"/>
    </StackLayout>
</ContentPage>
 

Neste código temos:

Um controle StackLayout que esta empilhando os controles :

- 1 Label onde temos o texto que sreá exibido no topo da página;
- 1 WebView onde definimos a propriedade Source para a página 'http://www.macoratti.net'

Executando o projeto no emulador Android- GenyMotion teremos como resultado:

Podemos usar também as propriedades WidthRequest e HeightRequest para definir a altura e largura da exibição da página.

Usando os eventos de navegação

Vamos alterar o código do arquivo MainPage.xaml para usar os eventos Navigating e Navigated do componente WebView e exibir o estado da página na view Label.
 
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_WebView1"
             x:Class="XF_WebView1.MainPage">
   <StackLayout>
       <Label x:Name="lblStatus" VerticalOptions="Center" HorizontalOptions="Center" />
       <WebView x:Name="navegador"   VerticalOptions="FillAndExpand"
                                      Navigating="PagOnNavigating"
                                      Navigated="PagOnNavigated" />
    </StackLayout>
</ContentPage>

No arquivo MainPage.xaml.cs inclua o código abaixo onde definimos os eventos PagOnNavigating e PagOnNavigated:
 
using Xamarin.Forms;
namespace XF_WebView1
{
    public partial class MainPage : ContentPage
    {
          public MainPage()
          {
	    InitializeComponent();
               navegador.Source = "http://www.macoratti.net";
          }
        private void PagOnNavigating(object sender, WebNavigatingEventArgs e)
        {
            lblStatus.Text = "Carregando página...";
        }
        private void PagOnNavigated(object sender, WebNavigatedEventArgs e)
        {
            lblStatus.Text = "Página carregada...";
        }
    }
}

Vemos ao lado o resultado da execução.

Navegando na WebView

Vamos agora usar os recursos de navegação em nossa aplicação.

Altere o código do arquivo MainPage.xaml conforme a seguir, onde criamos dois botões de comando:
 
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_WebView1"
             x:Class="XF_WebView1.MainPage"
             Title="Navegador Web">
    <StackLayout>
        <Label x:Name="lblStatus" VerticalOptions="Center" HorizontalOptions="Center" />
        <StackLayout Orientation="Horizontal" Padding="10,10">
          <Button Text="Retorna" HorizontalOptions="StartAndExpand" Clicked="btnRetornaClicked" />
          <Button Text="Avança" HorizontalOptions="End" Clicked="btnAvancaClicked" />
        </StackLayout>
        <WebView x:Name="navegador" 
               VerticalOptions="FillAndExpand"
               Navigating="PagOnNavigating"
               Navigated="PagOnNavigated"/>
    </StackLayout>
</ContentPage>

A seguir no arquivo MainPage.xaml.cs inclua o código para tratar os eventos dos botões que implementam a navegação:

using System;
using Xamarin.Forms;
namespace XF_WebView1
{
    public partial class MainPage : ContentPage
   {
	public MainPage()
	{
     	      InitializeComponent();
                 navegador.Source = "http://www.uol.com.br";
          }
        private void PagOnNavigating(object sender, WebNavigatingEventArgs e)
        {
            lblStatus.Text = "Carregando página...";
        }
        private void PagOnNavigated(object sender, WebNavigatedEventArgs e)
        {
            lblStatus.Text = "Página carregada...";
        }
        private void btnRetornaClicked(object sender, EventArgs e)
        {
            // Verifica se exite uma página para retornar
            if (navegador.CanGoBack)
            {
                navegador.GoBack();
            }
            else
            { // Se não existir, sai
                Navigation.PopAsync();
            }
        }
        private void btnAvancaClicked(object sender, EventArgs e)
        {
            //navega para frente
            if (navegador.CanGoForward)
            {
                navegador.GoForward();
            }
        }
    }
}

Executando o projeto no emulador GenyMotion teremos o resultado abaixo:

Vemos assim que o componente WebView é bem simples e fácil de usar.

Nota: Leia a documentação para restrições de acesso a web site no iOS.

Pegue o código do projeto compartilhado aqui :  XF_WebView1.zip (sem as referências)

"Vinde a mim, todos os que estais cansados e oprimidos, e eu vos aliviarei."(disse Jesus)
Mateus 11:28

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:


José Carlos Macoratti