• laurent@lioncoding.com

Activer ou Désactiver le bouton de validation d'un formulaire Xamarin.Forms


Il s’agira dans ce tout premier article de cette année, de voir, comment activer ou désactiver le bouton de validation d’un formulaire dans un contexte MVVM où plusieurs champs de saisie sont à contrôler.

Il est courant de voir le bouton de validation des formulaires d’applications mobile toujours actif même si celles-ci ne sont pas remplies ou mal renseignées. Le plus souvent, des boîtes de dialogue ou des Pop-ups sont à la manœuvre pour indiquer à l’utilisateur les saisies erronées. Cette pratique n’offre pas une expérience utilisateur agréable.

Il existe cependant, diverses solutions pour pallier ce problème et améliorer l’expérience utilisateur.

Nous découvrirons trois solutions possibles à travers cet article.

La solution du code Behind

C’est la plus simple des solutions car elle consiste à agir sur le bouton de validation à travers les évènements des champs à contrôler.

Exemple: Code de la vue

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MyProject.Views.FormsPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <StackLayout>           
            <Entry
                X:Name="Entry1"
                Text="{binding Entry1Property}"
                Placeholder="Entry 1"
                Unfocused="Entry1_Unfocused" />

            <Entry
                X:Name="Entry2"
                Text="{binding Entry2Property}"
                Placeholder="Entry 2"
                Unfocused="Entry2_Unfocused" />

            <Entry
                X:Name="EntryN"
                Text="{binding EntryNProperty}"
                Placeholder="Entry N"
                Unfocused="EntryN_Unfocused" />

            <!--  VALIDATION BUTTON : DISABLE BY DEFAULT -->
            <Button
                X:Name="Validation_Btn"
                BackgroundColor="#2196F3"
                Clicked="Validation_Bt_Clicked"
                IsEnabled="False"
                Text="Validate"
                TextColor="White">
            </Button>
    </StackLayout>
</ContentPage>

Exemple de code behind correspondant

using Xamarin.Forms;


namespace MyProject.Views
{
    public partial class FormsPage : ContentPage
    {
        private FormsPageViewModel viewModel;

        public FormsPage()
        {
            InitializeComponent();
            BindingContext = FormsPageViewModel = new FormsPageViewModel();
        }

        private void Entry1_Unfocused(object sender, FocusEventArgs e)
        {
            DoAction();
        }

        private void Entry2_Unfocused(object sender, FocusEventArgs e)
        {
            DoAction();
        }

        //...

        private void EntryN_Unfocused(object sender, FocusEventArgs e)
        {
            DoAction();
        }

        private vois DoAction(){
            if(IsCorrect(Entry1.Text) && IsCorrect(Entry2.Text) && IsCorrect(EntryN.Text))
                Validation_Btn.IsEnable = true;
            else
                Validation_Btn.IsEnable = false;
        }

        private bool IsCorrect(object entryValueToValidate)
        {
            // Checking ....
        }
    }
}

Dans un contexte MVVM, cette solution n’est pas adaptée car nos logiques de contrôle se retrouvent dans le Code Behind au lieu d’être dans le ViewModel.

L’utilisation des Triggers

Référez-vous à cet article que j’ai écris sur ce blog: Utiliser des Triggers et Converters pour valider un formulaire dans Xamarin.Forms.

Les Triggers sont une solution parfaite si les champs à contrôler ne sont pas nombreux.

La solution des ViewModels

Cette solution consiste à placer les logiques de contrôle de la première solution dans le ViewModel et à mettre un Binding sur l’état du bouton de validation.

Notre vue deviendra:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MyProject.Views.FormsPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <StackLayout>           
            <Entry
                Text="{binding Entry1Property}"
                Placeholder="Entry 1"
                Unfocused="Entry1_Unfocused" />

            <Entry
                Text="{binding Entry2Property}"
                Placeholder="Entry 2"
                Unfocused="Entry2_Unfocused" />

                <Entry
                Text="{binding EntryNProperty}"
                Placeholder="Entry N"
                Unfocused="EntryN_Unfocused" />

            <!--  VALIDATION BUTTON : DISABLE BY DEFAULT -->
            <Button
               X:Name="Validation_Btn"
                BackgroundColor="#2196F3"
                Clicked="Validation_Bt_Clicked"
                IsEnabled="{Binding IsButtonEnabled}"
                Text="Validate"
                TextColor="White">
            </Button>
    </StackLayout>
</ContentPage>

Le code Behind

using Xamarin.Forms;
using MyProject.ViewModels;

namespace MyProject.Views
{
    public partial class FormsPage : ContentPage
    {
        private FormsPageViewModel viewModel;

        public FormsPage()
        {
            InitializeComponent();
            BindingContext = FormsPageViewModel = new FormsPageViewModel();
        }

        private void Entry1_Unfocused(object sender, FocusEventArgs e)
        {
            viewModel.IsAllEntriesFilled();
        }

        private void Entry2_Unfocused(object sender, FocusEventArgs e)
        {
            viewModel.IsAllEntriesFilled();
        }

        //...

        private void EntryN_Unfocused(object sender, FocusEventArgs e)
        {
            viewModel.IsAllEntriesFilled();
        }

        // Validation button event
        private void Validation_Bt_Clicked(object sender, FocusEventArgs e)
        {
            viewModel.ValidationCommand.Execute(null);
        }
    }
}

Et enfin le ViewModel

namespace MyProject.ViewModels
{
    public class FormsPageViewModel : BaseViewModel
    {
        public ICommand ValidationCommand { get; private set; }

        public FormsPageViewModel()
        {
            ValidationCommand = new Command(Validate);
        }

        private void Validate(){
            // Validate ....
        }

        public void IsAllEntriesFilled()
        {
            if (IsCorrect(Entry1Property) && IsCorrect(Entry2Property)
            && IsCorrect(EntryNProperty))
            {
                IsButtonEnabled = true;
            }
            else
            {
                IsButtonEnabled = false;
            }
        }

        private bool IsCorrect(object entryValueToValidate)
        {
            // Checking ....
        }


        private bool _isButtonEnabled = false;
        public bool IsButtonEnabled
        {
            get { return _isButtonEnabled; }
            set { SetProperty(ref _isButtonEnabled, value); }
        }
    }
}

Il est aussi important de mettre des astérisques devant les champs obligatoires pour éviter que l’utiliser ne devine lui-même ceux-ci.

N’oublions pas qu’ils existent des plugins de validation de formulaires dans Xamarin.Forms.


Commentaires


Mes Badges


Categories

Nouveaux posts