Mobiele apps programmeren met Xamarin – Kennismaking met XAML

Inhoud

Wat vooraf ging

U hebt Visual Studio geïnstalleerd en u hebt reeds een eerste Xamarin-project opgestart. Ook hebt u al enig inzicht in de anatomie van een Xamarin-project.

U weet dus dat een pagina in Xamarin bestaat uit 2 delen:

  • De opmaak in XAML.
  • De programmeercode in C# (code-behind).

We gaan nu kennismaken met XAML.

Dit project heeft reeds een XAML-pagina met de naam MainPage.xaml. De reeds aangemaakte XAML-code is:

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

	<Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />

</ContentPage>

De bijhorende programmeercode (de code-behind) vindt u in het bestand MainPage.xaml.cs. De reeds aangemaakte C#-code is:

using Xamarin.Forms;

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

Als u het project uitvoert krijgt u onderstaand resultaat.

We gaan hierop verder bouwen om kennis te maken met XAML.

Wat is XAML?

XAML (uitgesproken als “zammel”) staat voor Extensible Application Markup Language en is een opmaaktaal (Markup Language) van Microsoft gebaseerd op XML (te vergelijken met HTML). XAML wordt uitgebreid gebruikt vanaf het .NET Framework 3.0, in het bijzonder in Windows Presentation Foundation (WPF) en in Xamarin. Daarin dient het als markup-taal voor de opmaak van de gebruikersinterface.

Hoewel u alles wat u aanmaakt met XAML ook via programmeercode kunt programmeren, biedt XAML een eenvoudigere en overzichtelijker werkwijze om de gebruikersinterface te ontwerpen.

XAML is echter geen programmeertaal en dit heeft een aantal gevolgen:

  • XAML kan geen programmeercode (C#) bevatten. Al het eigenlijke programmeren gebeurt in de code-behind die kan aangeroepen worden via events (event handlers).
  • XAML kent geen klassieke lussen (herhalingen). XAML kent wel een aantal objecten zoals een ListView die meerdere items in een lijst kunnen weergeven.
  • XAML kent geen conditionele processen (selecties). XAML kent wel data-binding en kan via converters condities opleggen (maar dit zien we pas in de module “complexe functionaliteiten”).

Kortom, XAML is geen programmeertaal maar een opmaaktaal!

Programmers new to XAML might want to frequently build and run their applications, particularly after anything that might not be obviously correct. Even developers with lots of experience in XAML know that experimentation is rewarding.

XAML Toolbox en Previewer

Vanaf Visual Studio 2017 15.8 is een XAML Toolbox en XAML Previewer opgenomen.

  • De XAML Toolbox kunt u in beeld brengen via View – Toolbox.
  • De XAML Previewer is standaard beschikbaar en kunt u aanklikken (met de knopjes rechtsboven uw werkscherm).

Mogelijke problemen

Toen ik de Previewer een eerste keer wou installeren kreeg ik de melding dat ik Java SE Development Kit 8 moest installeren. Vervolgens moest ik de map aangeven waar deze Java SE Development Kit geïnstalleerd is. Dit moet u doen via Tools – Options – Xamarin – Android Settings.

De syntax van een XAML-object

Objecten

XAML bestaat in essentie uit een aantal objecten (elementen). Onderstaande grafiek toont alle elementen en hun onderlinge afhankelijkheid (de pijltjes).

XAML is dus object georiënteerd wat betekent dat een XAML-objecten eigenschappen (properties/attributes) en methoden (events) bevatten.

XAML gebruikt de volgende syntax voor objecten:

  • Een openingstag met de eigenschappen.
  • De content van het object.
  • De sluitingstag van het object.
  • XAML-code is hoofdlettergevoelig! Dit betekent dat u hoofdletters correct dient in te typen.
<Object eigenschappen >
content
</ Object >

Wanneer een object geen content heeft dan kan het openen en sluiten van het object op 1 lijn geschreven worden.

<Object eigenschappen />

IntelliSense

IntelliSense is een hulpmiddel van Visual Studio om u te helpen bij het schrijven van code.

Gebruik IntelliSense om het gewenste object te vinden. Begin te typen en Visual Studio zal meteen helpen het juiste object te vinden op basis van de tekst die u intypt. Klik het gewenste object aan of druk op de Tab-toets.

Eigenschappen

Een object heeft eigenschappen (ook wel properties of attributes (attributen)) genoemd.

Bv. Het object Label zal een eigenschap Text hebben die de tekst bevat dat in het label moet getoond worden.

Een eigenschap bestaat uit

  • de naam van de eigenschap
  • het =-teken (dat moet gelezen worden als “krijgt de waarde”)
  • en de waarde die wordt toegekend aan de eigenschap altijd tussen “” (quotes).
<Object Eigenschap = "Waarde">
content
</ Object >

Bijvoorbeeld, onderstaande XAML toont een Label met de eigenschappen:

  • Text=”Welcome to Xamarin Forms!”
  • VerticalOptions=”Center”
  • HorizontalOptions=”Center”
<Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />

De centrering van het Label gebeurt zowel horizontaal (HorizontalOptions=”Center”) als verticaal (VerticalOptions=”Center”) binnen het object waartoe dit Label behoort. Dit kan bv. in het midden van de pagina zijn als het Label het enige element is binnen de ContentPage (zie verder).

Gebruik eveneens IntelliSense om de gewenste eigenschap te vinden.

IntelliSense

IntelliSense kan eveneens gebruikt worden om de gewenste waarde te vinden. Typ na de eigenschap het =-teken in en IntelliSense schiet in actie.

Alternatieve notatie

Eigenschappen kunnen ook nog op een alternatieve manier toegevoegd worden maar daar ga ik momenteel niet op in (wilt u het echter toch weten, klik dan op deze link).

Events

Events (methoden) zijn acties die de gebruiker kan doen met een object, of dat een object zelf kan doen.

Bijvoorbeeld, op een knop kan de gebruiker klikken.

<Button Text="OK" Clicked="Button_Clicked" />

IntelliSense

Gebruik ook hier IntelliSense om de Event Handler door Visual Studio te laten aanmaken. Type eerst de methode Clicked, typ vervolgens het =-teken en kies voor het aanmaken van de <New Event handler>. Visual Studio maakt dan ook automatisch de code-behind aan.

De XAML-code is te vergelijken met het instellen van een eigenschap. Er is echter een heel belangrijk verschil! In de code-behind is een Event handler aangemaakt waar u de code kunt programmeren die moet uitgevoerd worden als u op de knop klikt (in een latere post wordt dit meer in detail behandelt).

using System;
using Xamarin.Forms;

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

        private void Button_Clicked(object sender, EventArgs e)
        {

        }
    }
}

Merk ook op dat er een nieuwe Namespace is toegevoegd, nodig voor de event handler:

using System;

Commentaar

Commentaar wordt als volgt weergegeven:

<!-- Dit is commentaar -->

De anatomie van een XAML-pagina

Onderstaande is de XAML-code van MainPage.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:App1" x:Class="App1.MainPage">

	<Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />

</ContentPage>

De XML-versie

De eerste regel verwijst naar de gebruikte XML-versie en de gebruikte encodering utf-8.

<?xml version="1.0" encoding="utf-8" ?>

De pagina (Pages)

Xamarin kent verschillende Pages (paginatypes).

Standaard wordt de ContentPage aangemaakt.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage >
<!--Hier komt de content/inhoud van de ContentPage -->
</ContentPage>

Verder in de opleiding worden deze verschillende pagina’s besproken, voorlopig houden we het bij de ContentPage.

Namespaces

Namespaces zijn verzamelingen (bibliotheken) met objecten die samen horen.

De namespaces die het programma gebruikt moeten worden toegevoegd aan de pagina (hier de ContentPage) als een waarde van de eigenschap xmlns (dit staat voor XMLNameSpace). De pagina moet weten waar deze namespaces zich bevinden zodat de objecten die tot de namespace behoren kunnen worden gebruikt.

  • Om Xamarin.Forms te kunnen gebruiken moet u de bibliotheek (namespace) “http://xamarin.com/schemas/2014/forms” opnemen. Namespaces zien eruit als url’s maar zijn dit niet. Het zijn bibliotheken met programmeercode die zich schijnbaar op een website bevinden maar die eigenlijk op uw eigen harde schijf staan, als onderdeel van het .NET Framework.

xmlns="http://xamarin.com/schemas/2014/forms"

  • Tevens wordt de namespace van XAML opgenomen via “http://schemas.microsoft.com/winfx/2009/xaml”. Omdat dit niet de standaard namespace is krijgt deze een prefix als duiding, in dit geval een x. Deze prefix wordt gebruikt om objecten uit deze namespace aan te spreken.

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

  • Een derde en laatste namespace is het eigenlijke project (hier App1) zelf “clr-namespace:App1” (clr staat voor Common Language Runtime). Standaard krijgt deze namespace de prefix local.

xmlns:local="clr-namespace:App1"

  • Tenslotte wordt ook nog de huidige klasse “App1.MainPage” gedeclareerd. Dit gebeurt via:

x:Class="App1.MainPage"

Merk de prefix x op. Deze is nodig omdat class een object is van de namespace http://schemas.microsoft.com/winfx/2009/xaml die wordt aangeduid met de prefix x.

De volledige XAML-code is dus:

<?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:App1" x:Class="App1.MainPage">
<!--Hier komt de content/inhoud van de ContentPage -->
</ContentPage>

Content

De content is de View Label dat de tekst “Welcome to Xamarin Forms!” verticaal en horizontaal centreert in het midden van de ContentPage.

<Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />

De volledige XAML-code is dus:

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

	<Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />

</ContentPage>

Sommige van de begrippen besproken in onderstaande video komen pas later aan bod maar het kan geen kwaad ze als eens gehoord te hebben.

Voorbeeld

We gaan het onderstaande appje aanmaken.

  • Bovenaan komt de titel “PCVO Dender en Schelde” gecentreerd, groot lettertype en in het rood. U gebruikt hiervoor een Label-element.
  • Vervolgens komt een invulvak met de standaardtekst “Hier komt uw naam!” als “placeholder”. Gebruik hier Entry-element
  • Vervolgens komt een knop, een Button-element.
  • Dan opnieuw een Label-element waar, na het klikken op de knop, de ingevulde tekst uit het invulvak moet komen. Dit Label heeft een grijze achtergrond en de tekst komt in het geel.
  • Tenslotte komt het logo van de school, een Image-element.
  • Al deze elementen moeten onder mekaar gestapeld worden en moeten een beetje van de rand blijven. Dit doet u met een StackLayout waar u de kantlijn kunt instellen.

Als u het invulvak (Entry-element) aanklikt hebt u meteen alle functionaliteiten van het toestel waar de app op draait. Het onderstaande voorbeeld toont Android en u ziet het toetsenbord en de spellingcontrole actief.

Onderstaande voorbeeld toont dan de app na de klik op de Button. De tekst die ingevuld werd in het Entry-element is nu ook weergegeven in de onderste Label.

De XAML


De XAML-code om dit aan te maken is de volgende. Bekijk die eens en ik denk dat het meeste duidelijk zal zijn.

<?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:App1" x:Class="App1.MainPage">
    <StackLayout Margin="10">
        <Label Text="PCVO Dender en Schelde" VerticalOptions="Center" HorizontalOptions="Center" FontSize="Large" TextColor="Red"/>
        <Entry x:Name="lblInvoer" Placeholder="Hier komt uw naam!"></Entry>
        <Button Text="OK" Clicked="Button_Clicked" />
        <Label x:Name="lblUitvoer" FontSize="Large" BackgroundColor="Gray" TextColor="Yellow"/>
        <Image Source="https://ictopleidingen.azurewebsites.net/wp-content/uploads/2016/12/LogoPCVOGroot.png" />
    </StackLayout>

</ContentPage>

Ik denk dat de code vrij leesbaar is, maar toch een paar aandachtspuntjes onderlijnen.

  • De ContentPage bevat een StackLayout die dienst doet als een “container”. Alle andere elementen bevinden zich binnen deze StackLayout. Een StackLayout is standaard verticaal gestapeld. wilt u horizontaal stapelen dan moet u de eigenschap Orientation=”Horizontal” toevoegen aan de StackLayout.
  • De StackLayout heeft een Margin=”10″ pixels rondom. U kunt specifieke afmetingen meegeven in de respectievelijke volgorde links, boven, rechts onder. Bv. Margin=”5, 10, 5, 10″ zal links en rechts een marge voorzien van 5 en boven en onder een marge van 5 pixels.
  • Naast Margin bestaat er ook Padding. Margin duidt een buitenrand, terwijl Padding de binnenrand duidt. Verder werken beiden identiek.

  • De FontSize wordt niet ingesteld als een exact aantal pixels maar als een formaat. Door te kiezen voor een formaat wordt de exacte fontsize bepaalt door de device zelf.

  • Bij het klikken op de knop moet de tekst die ingevoerd wordt in het invulvak weergegeven worden in de onderste label. We moeten dus elementen kunnen aanspreken via programmeercode. Om iets (of iemand) te kunnen aanspreken moet het een naam hebben. Daarom hebben we een naam gegeven aan deze twee elementen namelijk x:Name="lblInvoer" en x:Name="lblUitvoer". Merk de x: voor de Name op! Die staat er omdat het attribuut Name uit de namespace “xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml” komt die een x als prefix heeft.
  • De Button heeft een event gekoppeld Clicked="Button_Clicked", die via code-behind zal geprogrammeerd worden.
  • De Image heeft een attribute Source="https://ictopleidingen.azurewebsites.net/wp-content/uploads/2016/12/LogoPCVOGroot.png" die de URL van een afbeelding als bron (Source) voor de afbeelding instelt.

De Code-behind


De code-behind bevat de programmeercode die hoort bij het formulier. In dit voorbeeld moet bij het klikken op de knop de tekst van lblInvoer toegewezen worden aan lblUitvoer. Of anders gezegd, de eigenschap Text van het label lblUitvoer krijgt als waarde de Text van het invulvak lblInvoer.

Om een eigenschap van een object aan te spreken gebruikt u de syntax:

object.eigenschap

De programmeercode die de eigenschap Text van het label lblUitvoer de waarde de Text van het invulvak lblInvoer toekennt is dus:

lblUitvoer.Text = lblInvoer.Text;

Deze code komt bij de Click-event van de knop te staan:

private void Button_Clicked(object sender, EventArgs e)
{
}

De volledige code-behind wordt dus:

using System;
using Xamarin.Forms;

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

        private void Button_Clicked(object sender, EventArgs e)
        {
            lblUitvoer.Text = lblInvoer.Text;
        }
    }
}

Nog even de rest van de code bespreken.

U maakt gebruik van de bibliotheken/namespaces Systems en Xamarin.Forms.

using System;
using Xamarin.Forms;

Vervolgens komt de namespace van ons eigenlijke project App1.

namespace App1
{
}

Deze bevat de publieke gedeelde klasse (public partial class) MainPage van het type (meer correct: overgeërfd van de klasse) ContentPage.

public partial class MainPage : ContentPage
{
}

De constructor van de Mainpage initialiseert de bijhorende XAML-component.

public MainPage()
{
InitializeComponent();
}

Design guides

Na de algemene bespreking via Xamarin zal ik ook vaak verwijzen naar de officiële design guides van zowel Android, iOS als UWP. Zij moeten gezien worden als informatieve uitbreidingen bij de besproken onderwerpen en zijn zeer nuttig voor al wie een professionele app wenst te ontwerpen.

Onderstaande design guides sluiten aan bij wat besproken is in deze post. Ik raad aan deze zeker eens te bekijken.

Android

iOS

UWP

Hoor het eens van iemand anders

Onderstaande video is een kennismaking met XAML zoals die tijdens Xamarin Evolve 2014 gegeven werd. De tweede helft van de video toont een aantal gevorderde concepten die later in de cursus aan bod komen.

Behandelde Basiscompetenties uit de module ICT Programmeren – Specifieke ontwikkelomgeving: eenvoudige functionaliteiten

  • IC BC236 – kan eenvoudige wijzigingen aan een programma aanbrengen
  • IC BC241 – kan een programma in een specifieke ontwikkelomgeving maken
  • IC BC244 – kan specifieke hardware of software programmeren
  • IC BC245 – kan in een specifieke ontwikkelomgeving ontwerpen
  • IC BC247 – kan de bouwstenen van een specifieke ontwikkelomgeving gebruiken
  • IC BC257 – heeft aandacht voor de gebruiksvriendelijkheid van de toepassing

Geef een reactie

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

  • 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.