Mobiele apps programmeren met Xamarin – Websites en HTML integreren

print

Inhoud


Wat vooraf ging


Een website integreren

We hebben reeds gezien dat u kunt gebruik maken van de ingebouwde browser van uw toestel om naar een specifieke website te gaan met OpenUri.

Device.OpenUri(new Uri("https://ictopleidingen.azurewebsites.net/"));

Hier maken we echter gebruik van de ingebouwde webbrowser en integreren we niet echt de website in onze eigen app. Om dit te doen gebruikt u WebView. U geeft de gewenste website als Source="http://www.pcvodenderenschelde.be/" mee aan de WebView.

XAML

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

    <WebView Source="http://www.pcvodenderenschelde.be/" />

</ContentPage>

C#

using Xamarin.Forms;

namespace WebsiteIntegreren
{
    public class TestWebview : ContentPage
    {
        public TestWebview()
        {
            var browser = new WebView
            {
                Source = "http://www.pcvodenderenschelde.be"
            };

            Content = browser;
        }
    }
}

Opmerking
Wilt u een WebView gebruiken binnen een StackLayout of een RelativeLayout dan moet u een hoogte en breedte meegeven of de WebView wordt niet gerenderd.

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

  <StackLayout>
    <Label Text="test" />
    <WebView Source="http://www.pcvodenderenschelde.be/" HeightRequest="1000" WidthRequest="1000" />
  </StackLayout

</ContentPage>

HTML integreren

Stel dat u toch liever zou werken met HTML dan met XAML (stel u voor) dan kunt u dat via een WebView en de HtmlWebViewSource-klasse.

U doet dit als volgt (enkel in C#):

using Xamarin.Forms;

namespace WebsiteIntegreren
{
    public class TestWebview : ContentPage
    {
        public TestWebview()
        {
            var browser = new WebView();
            var htmlSource = new HtmlWebViewSource();
            htmlSource.Html =
                @"<html>
                    <body>
                    <h1>PCVO Dender en Schelde</h1>                        
                    <p>Welkom aan het PCVO Dender en Schelde.</p>
                    </body>
                </html>";
            browser.Source = htmlSource;

            Content = browser;
        }
    }
}

Zo kunt u ook iFrames toevoegen, vergeet wel niet alle ” te vervangen door ‘!

using Xamarin.Forms;

namespace WebsiteIntegreren
{
    public class TestWebview : ContentPage
    {
        public TestWebview()
        {
            var browser = new WebView();
            var htmlSource = new HtmlWebViewSource();
            htmlSource.Html =
                @"<html>
                    <body>
                    <h1>PCVO Dender en Schelde</h1>                        
                    <p>Welkom aan het PCVO Dender en Schelde.</p>
                        <iframe src='https://onedrive.live.com/embed?cid=F18D901095763867&resid=F18D901095763867%2123081&authkey=AJKSpluvaDiFM6w&em=2' width='1000' height='600' frameborder='0' scrolling='no'></iframe>
                        <iframe width='1280' height='720' src='https://www.youtube.com/embed/93ZU6j59wL4' frameborder='0' allowfullscreen></iframe>
                    </body>
                </html>";

            browser.Source = htmlSource;

            Content = browser;
        }
    }
}

Een eigen webbrowser

Ik herneem hier nog even de code van een vorige oefening waarin een eigen webbrowser werd aangemaakt.

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

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.


Behandelde Basiscompetenties uit de module ICT Programmeren – Integratie externe functionaliteiten

  • IC BC254 – kan externe content integreren en structureren
  • IC BC258 – houdt rekening met regelgeving m.b.t. licenties voor het gebruik en de publicatie van broncode

Geef een reactie

  • Abonneer je op deze website d.m.v. e-mail

    Voer je e-mailadres in om je in te schrijven op deze website en e-mailmeldingen te ontvangen van nieuwe berichten.