¿Qué son los Behaviors?

Los behaviors en Xamarin Forms son funcionalidades encapsuladas asociadas a controles de una vista, que nos ayudan a personalizar o completar dichos controles simplificando la arquitectura y minimizando el nivel de complejidad de una aplicación móvil. Se pueden utilizar para acciones muy variadas como realizar validaciones, cambiar el valor de una propiedad, lanzar eventos etc.

Tutorial

En este tutorial voy a explicar paso por paso la creación de dos aplicaciones móvil con Xamarin.Forms; una dónde utilizaremos un behavior personalizado para validar un email, y en la otra utilizaremos varios behaviors del NuGet XamarinFastEntry.Behaviors para verificar el ingreso de datos de una tarjeta de crédito.

En primer lugar, haremos el ejemplo de la validación del email.

Para empezar, creamos un nuevo proyecto Closs-Platform llamado Behaviors.

Seleccionamos un template Blank y marcamos las 3 plataformas para poder desarrollar en Android, iOS y UWP.

A continuación, sobre el proyecto compartido para las tres plataformas creamos la carpeta Behaviors, y dentro de ella creamos la clase EmailBehavior.

Esta clase va a heredar de Behavior<T> lo que permitirá a dicha clase personalizar el comportamiento del control que queramos. Como queremos personalizar el comportamiento de una caja de texto heredará de Behavior<Entry>.

Ahora sobrescribimos estos dos métodos:

  • OnAttachedTo nos permite enlazar el control a un evento dónde tendremos la lógica de comportamiento. En este caso nos suscribimos al evento TextChanged.
protected override void OnAttachedTo(Entry bindable)
        {          
            bindable.TextChanged += Bindable_TextChanged;
            base.OnAttachedTo(bindable);
        }
  • OnDetachingFrom realiza el efecto contrario, es decir, elimina la asociación del control con el evento una vez finalizado el comportamiento personalizado. En este caso eliminamos la suscripción del evento TextChanged.
protected override void OnDetachingFrom(Entry bindable)
        {
            bindable.TextChanged -= Bindable_TextChanged;
            base.OnDetachingFrom(bindable);
        }

Ahora al evento «Bidable_TextChanged» le añadimos el comportamiento que debe adoptar el Entry cuando su texto cambie.

La lógica para validar un correo electrónico será la siguiente:

  • Debe existir un @.
  • El @ no debe estar ni al principio ni al final.
  • No debe existir más de una @.
  • Debe existir un punto.
  • El punto debe estar escrito después del @ y no antes.
  • El dominio debe contener entre 2 y 4 caracteres.

Si el texto introducido en el Entry cumple todos estos requisitos aparecerá en verde, de lo contrario aparecerá en rojo.

Además, incluiremos la propiedad booleana “OK” en la misma clase para validar el email al clicar un botón, y de este modo comprobaremos si el behavior funciona correctamente.

Si el email está bien escrito “OK” será true de lo contrario será false.

private void Bindable_TextChanged(object sender, TextChangedEventArgs e)
        {
            Entry caja = sender as Entry;
            String mail = caja.Text;
            int ultimopunto = mail.LastIndexOf(".");
            String dominio = mail.Substring(ultimopunto + 1);
            if (caja != null)
            {
                try
                {
                    if (mail.Contains("@") == false)
                    {
                        caja.TextColor = Color.Red;
                        OK = false;
                    }
                    else if(mail.StartsWith("@")||mail.EndsWith("@"))
                    {
                        caja.TextColor = Color.Red;
                        OK = false;
                    }
                    else if (mail.IndexOf("@") != mail.LastIndexOf("@"))
                    {
                        caja.TextColor = Color.Red;
                        OK = false;
                    }
                    else if (mail.IndexOf(".") == -1)
                    {
                        caja.TextColor = Color.Red;
                        OK = false;
                    }
                    else if (mail.LastIndexOf(".") < mail.IndexOf("@"))
                    {
                        caja.TextColor = Color.Red;
                        OK = false;
                    }
                    else if (dominio.Length <= 2 || dominio.Length >= 4)
                    {
                        caja.TextColor = Color.Red;
                        OK = false;
                    }
                    else
                    {
                        caja.TextColor = Color.Green;
                        OK = true;
                    }
 
                }
                catch (Exception ex)
                {
 
                }
            }
        }

Ahora creamos el content page ValidateEmail e indicaremos que vamos a usar este behavior en la caja de texto que deseemos.

Para ello escribimos la referencia de la clase EmailBehavior en el espacio de nombres del xaml y añadimos el behavior al control Entry con la siguiente estructura.


<?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:behaviors="clr-namespace:BehaviorEmail.Behaviors"
             x:Class="BehaviorEmail.ValidateEmail">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Introduzce tu email"/>
            <Entry HorizontalOptions="FillAndExpand">
                <Entry.Behaviors>
                    <behaviors:EmailBehavior/>
                </Entry.Behaviors>
            </Entry>
            <Button Text="Validar email" Clicked="Button_Clicked"/>
            <Label FontSize="40" TextColor="Blue" x:Name="texto"
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Por último, nos vamos a la clase C# de la vista y dentro del evento “Button_Clicked” le indicamos que si la propiedad “OK” de EmailBehavior es true aparezca el texto «El email es válido» en el label con el name “texto” del xaml, en cambio si la propiedad es false aparezca «El email no es válido«.

private void Button_Clicked(object sender, EventArgs e)
        {
            if (EmailBehavior.OK == true)
            {
                this.texto.Text = «El email es válido»;
            }
            else
            {
                this.texto.Text = «El email no es válido»;
            }
        }

Ejecutamos y comprobamos si la aplicación funciona correctamente.

Primero lo escribimos mal y vemos que aparece el texto en rojo. Al darle al botón nos dice que el email no es válido.

Ahora lo escribimos bien y vemos que aparece el texto en verde. Al darle al botón nos dice que el email es válido.

De esta forma hemos personalizado la funcionalidad de una caja de texto para validar un email en una vista, pero si queremos podemos personalizar funcionalidades distintas para otras cajas de texto como por ejemplo validar un número de teléfono, permitir introducir solo caracteres numéricos o verificar los datos de una tarjeta de crédito para realizar una compra como en el ejemplo que vamos a realizar a continuación. Aunque estos ejemplos son con cajas de texto, los behaviors se puede utilizar para cualquier tipo de control como imágenes, labels, botones, etc.

Para el siguiente ejemplo instalamos el NuGet XamarinFastEntry.Behaviors sobre el proyecto compartido. Este NuGet nos permitirá usar behaviors con propiedades predefinidas para personalizar el comportamiento de los controles desde la misma vista xaml.

A continuación, creamos un content page llamado ValidateTarjeta y añadimos el espacio de nombre referente al NuGet instalado.

Realizamos el diseño del formulario y procedemos a agregar a cada caja de texto un behavior para darle la funcionalidad de longitud máxima (con el atributo MaxLength), una máscara (con el atributo Mask) y establecer que solo se puedan introducir valores numéricos (con el atributo IsNumeric).

  • Para el número de tarjeta
  • Para la fecha de caducidad
  • Para el CVC

Finalmente ejecutamos y comprobamos si todo funciona correctamente.

<?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:fastEntry="clr-namespace:XamarinFastEntrySample.FastEntry;assembly=XamarinFastEntry.Behaviors"
             x:Class="Behaviors.ValidateTarjeta">
    <ContentPage.Content>
        <StackLayout>
            <Grid Padding="5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
 
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
 
                <Label Text="Datos bancarios" FontAttributes="Bold" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"
               FontSize="Large"/>
                <Label Text="Introduce tu información bancaria" FontSize="Medium"
               Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"/>
 
                <Label Text="Número" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" VerticalOptions="Center"/>
                <Entry Keyboard="Numeric"
               Placeholder="Introduce tu número de tarjeta" Grid.Row="2" Grid.Column="1">
                    <Entry.Behaviors>
                        <fastEntry:XamarinFastEntryBehaviour Mask="#### #### #### ####" MaxLength="19" IsNumeric="True"/>
                    </Entry.Behaviors>
                </Entry>
 
                <Label Text="Caduca en" Grid.Row="3" Grid.Column="0" VerticalOptions="Center"/>
                <Entry Keyboard="Numeric"
               Placeholder="MM/YY  " Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2">
                    <Entry.Behaviors>
                        <fastEntry:XamarinFastEntryBehaviour Mask="##/##" MaxLength="5" IsNumeric="True"/>
                    </Entry.Behaviors>
                </Entry>
 
                <Label Text="CVC" Grid.Row="4" Grid.Column="0" VerticalOptions="Center"/>
                <Entry Placeholder="CVC" Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="2">
                    <Entry.Behaviors>
                        <fastEntry:XamarinFastEntryBehaviour Mask="###" MaxLength="3" IsNumeric="True"/>
                    </Entry.Behaviors>
                </Entry>
 
            </Grid>
 
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Conclusión

Los behaviors son recursos muy útiles a la hora de sobrescribir la funcionalidad de un control concreto en una vista de un proyecto dónde por ejemplo tenemos que realizar validaciones o verificaciones de un formulario antes de que la información sea enviada.

Autor: Carlos Busón Matutano

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin

Centro: Tajamar

Año académico: 2018-2019

GitHub:
https://github.com/cbumat/Behaviors

Fichero .rar:
http://www.mediafire.com/file/pbfu5pt73u6wgdt/Behaviors.rar/file

Linkedin: http://www.linkedin.com/carlosbuson

This Post Has One Comment

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.