Mobiele apps programmeren met Xamarin – Behaviors

Deze handleiding maakt deel uit van het programmeertraject:

• Cross-platform programmeren van mobiele apps met Xamarin

Deze handleiding is een uitbreiding op de handleiding Mobiele apps programmeren met Xamarin – Conditionele weergave (converters en behaviors) maar om dit onder de aandacht van (ex-)cursisten te brengen plaats ik deze handleiding ook nog eens op zich.

---

Behaviors

Behaviors zou u kunnen omschrijven als het toevoegen van specifieke “gedragingen” aan bestaande elementen (Views).

Het voorbeeld dat we gaan uitwerken is dat we een Entry gaan uitbreiden met de Behavior dat de achtergrond rood moet zijn als er geen correct, qua vorm, e-mailadres is ingetypt. We breiden dus het “gedrag” van een gewone Entry uit met dit nieuwe “gedrag”.

Behaviors komen in twee vormen:

• Attached behaviors
• Xamarin.Forms behaviors

Ik geef hier een voorbeeld van Xamarin.Forms behaviors.

Xamarin.Forms behaviors

Een Xamarin.Forms behaviors wordt gebouwd in 4 stappen.

1. Maak een nieuwe klasse aan die erft van de klassse Xamarin.Forms.Behavior of Xamarin.Forms.Behavior waarbij T voor een specifiek element staat (bv. View of Entry).
2. Overschrijf de methode OnAttachedTo</code.
3. Overschrijf de methode OnDetachingFrom</code.
4. Implementeer de code die het “gedrag” bepaalt.

De basisstructuur van de code is dus als volgt:

public class CustomBehavior : Behavior<View>
{
    protected override void OnAttachedTo(View bindable)
    {
        base.OnAttachedTo(bindable);
        // Perform setup
    }

    protected override void OnDetachingFrom(View bindable)
    {
        base.OnDetachingFrom(bindable);
        // Perform clean up
    }

    // Behavior implementation
}

We gaan aan de slag om dit toe te passen op onze “E-mailinvoer”.

Maar eerst, hoe gaan we testen of een e-mailadres correct is (qua vorm)?

U kunt dit doen gebruikmakend van Regular Expressions. Dit is een cursus op zich en ik ga hier niet verder op in maar meer informatie vindt u hier, zelf experimenteren kunt u hier en hieronder vindt u een overzicht.

Ik baseer mijn voorbeeld op deze blog en gebruik de Regular Expression van deze blog.

const string emailRegex = @"^(?("")("".+?(?<!\\)""@)|(([0-9a-z]((\.(?!\.))|[-!#\$%&'\*\+/=\?\^`\{\}\|~\w])*)(?<=[0-9a-z])@))" +
@"(?(\[)(\[(\d{1,3}\.){3}\d{1,3}\])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-z0-9][\-a-z0-9]{0,22}[a-z0-9]))$";

Vergeet niet de using System.Text.RegularExpressions; toe te voegen.

• Maak een nieuwe Class aan en geef het een passende naam (bv. EmailValidatorBehavior).
• Pas de bovenstaande structuur toe op basis van een Entry. De uitvoering van de Behavior wordt gekoppeld aan de TextChanged-event.

using System.Text.RegularExpressions;
using Xamarin.Forms;

namespace Converteren
{
    public class EmailValidatorBehavior : Behavior<Entry>
    {
        const string emailRegex = @"^(?("")("".+?(?<!\\)""@)|(([0-9a-z]((\.(?!\.))|[-!#\$%&'\*\+/=\?\^`\{\}\|~\w])*)(?<=[0-9a-z])@))" +
        @"(?(\[)(\[(\d{1,3}\.){3}\d{1,3}\])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-z0-9][\-a-z0-9]{0,22}[a-z0-9]))$";

        protected override void OnAttachedTo(Entry bindable)
        {
            base.OnAttachedTo(bindable);
            bindable.TextChanged += HandleTextChanged;
        }

        protected override void OnDetachingFrom(Entry bindable)
        {
            base.OnDetachingFrom(bindable);
            bindable.TextChanged -= HandleTextChanged;
        }

        void HandleTextChanged(object sender, TextChangedEventArgs e)
        {
            //Hier komt de code voor de Behavior
        }

    }
}

De code die de Behavior behandelt is de onderstaande:

bool IsValid = (Regex.IsMatch(e.NewTextValue, emailRegex, RegexOptions.IgnoreCase));
((Entry)sender).BackgroundColor = IsValid ? Color.Default : Color.Red;

Er wordt gecontroleerd of de ingevoerde tekst overeenkomt met de Regex: bool IsValid = (Regex.IsMatch(e.NewTextValue, emailRegex, RegexOptions.IgnoreCase));.

Indien er een overeenkomst is, of niet, wordt de kleur bepaald IsValid ? Color.Default : Color.Red en deze kleur wordt als achtergrondkleur ingesteld van de aanroepende Entry: ((Entry)sender).BackgroundColor = IsValid ? Color.Default : Color.Red;
.

De volledige klasse is nu:

using System.Text.RegularExpressions;
using Xamarin.Forms;

namespace Converteren
{
    public class EmailValidatorBehavior : Behavior<Entry>
    {
        const string emailRegex = @"^(?("")("".+?(?<!\\)""@)|(([0-9a-z]((\.(?!\.))|[-!#\$%&'\*\+/=\?\^`\{\}\|~\w])*)(?<=[0-9a-z])@))" +
        @"(?(\[)(\[(\d{1,3}\.){3}\d{1,3}\])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-z0-9][\-a-z0-9]{0,22}[a-z0-9]))$";

        protected override void OnAttachedTo(Entry bindable)
        {
            base.OnAttachedTo(bindable);
            bindable.TextChanged += HandleTextChanged;
        }

        protected override void OnDetachingFrom(Entry bindable)
        {
            base.OnDetachingFrom(bindable);
            bindable.TextChanged -= HandleTextChanged;
        }

        void HandleTextChanged(object sender, TextChangedEventArgs e)
        {
            bool IsValid = (Regex.IsMatch(e.NewTextValue, emailRegex, RegexOptions.IgnoreCase));
            ((Entry)sender).BackgroundColor = IsValid ? Color.Default : Color.Red;
        }

    }
}

We moeten dit nu verbinden aan de XAML.

Indien dit nog niet het geval zou zijn, voeg een verwijzing naar het eigen project (hier Converteren) toe.

xmlns:local="clr-namespace:Converteren"

Ieder element, dus ook Entry kent een eigenschap Behaviors. Hierbinnen neemt u de naam op van de gewenste Behavior-klasse.

<Entry Placeholder="Email" >
    <Entry.Behaviors>
        <local:EmailValidatorBehavior x:Name="emailValidator"/>
    </Entry.Behaviors>
</Entry>

De achtergrond van de Entry kleurt rood zolang u geen correct e-mailadres hebt ingetypt.