Mobiele apps programmeren met Xamarin – Praktische voorbeelden – Een eigen webbrowser

Deze tip maakt deel uit van het programmeertraject:

• Cross-platform programmeren van mobiele apps met Xamarin

---

Een eigen webbrowser

Met Binding is het heel eenvoudig om een eigen webbrowser aan te maken.

• Start een nieuw Xamarin-project en geef het een passende naam (bv. MijnWebbrowser).

Xamarin komt met een WebView-element.

Een WebView heeft volgende eigenschappen:

• Source – de url van de website.
• CanGoBack – een boolean (waar of niet waar) die aangeeft of er kan teruggegaan worden naar een vorige webpagina.
• CanGoForward – een boolean (waar of niet waar) die aangeeft of er kan gegaan worden naar een volgende webpagina.

Een WebView heeft volgende methoden:

• GoBack – indien de eigenschap CanGoBack waar is.
• GoForward – indien de eigenschap CanGoForward waar is.

De eigenschappen CanGoBack en CanGoForward worden verbonden met de IsEnabled-eigenschap van 2 Buttons.

XAML

• Pas de XAML van MainPage.xaml aan zoals hieronder:

<?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:MijnWebbrowser" x:Class="MijnWebbrowser.MainPage">

    <StackLayout Margin="10">
        <Entry Keyboard="Url" Placeholder="Url" Completed="OnEntryCompleted" />

        <StackLayout Orientation="Horizontal" BindingContext="{x:Reference webView}">
            <Button Text="&#x21D0;" FontSize="Large" IsEnabled="{Binding CanGoBack}" Clicked="OnGoBackClicked" HorizontalOptions="FillAndExpand"/>
            <Button Text="&#x21D2;" FontSize="Large" IsEnabled="{Binding CanGoForward}" Clicked="OnGoForwardClicked" HorizontalOptions="FillAndExpand"/>
        </StackLayout>

        <WebView x:Name="webView" Source="https://pcvodenderenschelde.be" VerticalOptions="FillAndExpand" />
    </StackLayout>

</ContentPage>

Merk op dat er ook reeds de nodige events zijn toegevoegd en dat de BindingContext="{x:Reference webView}" toegekend is aan de StackLayout en wordt overgeërfd door de beide Buttons. De eigenlijke binding gebeurt dan via IsEnabled="{Binding CanGoBack}" en IsEnabled="{Binding CanGoForward}" van de respectievelijke Buttons, die ook de wat eigenaarde tekst meekrijgen Text="⇐" en Text="⇒" om de “pijltjes” weer te geven.

Code-behind

Doordat er events zijn toegevoegd kunt u al raden dat er ook enige code-behind nodig is.

using System;
using Xamarin.Forms;

namespace MijnWebbrowser
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnEntryCompleted(object sender, EventArgs e)
        {
            webView.Source = ((Entry)sender).Text;
        }

        private void OnGoBackClicked(object sender, EventArgs e)
        {
            webView.GoBack();
        }

        private void OnGoForwardClicked(object sender, EventArgs e)
        {
            webView.GoForward();
        }
    }
}

De ingetypte tekst van de Entry wordt toegekend aan de WebView.

webView.Source = ((Entry)sender).Text;

Uiteindelijk moet er ook vooruit

webView.GoForward();

en achteruit

webView.GoBack();

kunnen genavigeerd worden.

Zo, meer is er niet nodig voor een eenvoudige, eigen, webbrowser.