Comment implémenter la validation des données avec Xamarin.Forms

Dans les logiciels, la validation des données est un processus qui garantit la validité et l’intégrité des entrées utilisateur et implique généralement de vérifier que les données sont dans le format correct et contiennent une valeur acceptable. Dans ce didacticiel Xamarin, vous apprendrez à l’implémenter avec Xamarin.Forms.

Cet article est un extrait du livre Maîtriser Xamarin.Forms, troisième édition par Ed Snider. Le livre vous guide tout au long de la création d’une application simple, expliquant à chaque étape pourquoi vous faites ce que vous faites, afin d’acquérir les compétences dont vous avez besoin pour utiliser Xamarin.Forms pour créer vos propres applications de haute qualité.

Types de validation de données dans le développement d’applications mobiles

Il existe généralement deux types de validation lors de la création d’applications: côté serveur et côté client. Les deux jouent un rôle important dans le cycle de vie des données d’une application. La validation côté serveur est essentielle en matière de sécurité, en veillant à ce que les données ou le code malveillant ne pénètrent pas dans le serveur ou l’infrastructure backend. La validation côté client concerne généralement davantage l’expérience utilisateur que la sécurité. Une application mobile doit toujours valider ses données avant de les envoyer à un backend (comme une API Web) pour plusieurs raisons, notamment les suivantes:

• Fournir des commentaires en temps réel à l’utilisateur sur tout problème au lieu d’attendre une réponse du backend.
• Pour prendre en charge l’enregistrement des données dans des scénarios hors ligne où le backend n’est pas disponible.
• Pour éviter les problèmes d’encodage lors de l’envoi des données au backend.

Tout comme un serveur backend ne doit jamais supposer que toutes les données entrantes ont été validées par le client avant d’être reçues, une application mobile ne doit jamais supposer que le backend effectuera sa propre validation côté serveur, même s’il s’agit d’une bonne pratique de sécurité. Pour cette raison, les applications mobiles doivent effectuer autant de validation côté client que possible.

Lors de l’ajout de la validation à une application mobile, la logique de validation réelle peut concerner quelques domaines de l’architecture de l’application. Cela pourrait aller directement dans le code de l’interface utilisateur (la couche View d’une architecture Model-View-ViewModel (MVVM)), cela pourrait aller dans la logique métier ou le code du contrôleur (la couche ViewModel d’une architecture MVVM), ou cela pourrait même aller dans le code HTTP. Dans la plupart des cas, lors de l’implémentation du modèle MVVM, il sera plus judicieux d’inclure la validation dans les ViewModels pour les raisons suivantes:

• Les règles de validation peuvent être vérifiées lorsque les propriétés individuelles du ViewModel sont modifiées.
• Les règles de validation font souvent partie ou dépendent d’une logique métier qui existe dans le ViewModel.
• Plus important encore, l’implémentation des règles de validation dans le ViewModel facilite leur test.

Ajout d’un ViewModel de validation de base dans Xamarin.Forms

La validation est la plus logique dans le ViewModel. Pour ce faire, nous commencerons par créer un nouveau ViewModel de base qui fournira des méthodes, des propriétés et des événements de niveau de base pour les ViewModels sous-classés à exploiter. Ce nouveau ViewModel de base s’appellera BaseValidationViewModel et sous-classera le BaseViewModel. Il implémentera également une interface appelée à partir de l’espace de noms System.ComponentModel. INotifyDataErrorInfo fonctionne beaucoup comme INotifyPropertyChanged – il spécifie certaines propriétés sur les erreurs qui se sont produites et ainsi qu’un événement pour le moment où l’état d’erreur d’une propriété particulière change.

1. Créez une nouvelle classe dans le nom de dossier ViewModels BaseValidationViewModel qui sous-classe BaseViewModel:

Create a new class in the ViewModels folder name BaseValidationViewModel that subclasses BaseViewModel: 
public class BaseValidationViewModel : BaseViewModel 
{ 
    public BaseValidationViewModel(INavService navService) 
        : base(navService) 
    { 
    } 
}

2. Mettez à jour BaseValidationViewModel pour implémenter INotifyDataErrorInfo comme suit:

public class BaseValidationViewModel : BaseViewModel, 
    INotifyDataErrorInfo 
{ 
    readonly IDictionary> _errors =  
        new Dictionary>(); 

    public BaseValidationViewModel(INavService navService) 
        : base(navService) 
    { 
    } 
 
    public event EventHandler ErrorsChanged; 

    public bool HasErrors =>  
        _errors?.Any(x => x.Value?.Any() == true) == true; 
    public IEnumerable GetErrors(string propertyName) 
    { 
        if (string.IsNullOrWhiteSpace(propertyName)) 
        { 
            return _errors.SelectMany(x => x.Value); 
        } 
 
        if (_errors.ContainsKey(propertyName)  
            && _errors[propertyName].Any()) 
        { 
            return _errors[propertyName]; 
        } 
 
        return new List(); 
    } 
}

3. En plus d’implémenter les membres requis de INotifyDataErrorInfo – ErrorChanged, HasErrors et GetErrors () – nous devons également ajouter une méthode qui gère réellement la validation des propriétés ViewModel. Cette méthode nécessite un paramètre de règle de validation sous la forme d’un Func et un message d’erreur à utiliser si la règle de validation échoue. Ajoutez une méthode protégée nommée Validate à BaseValidationViewModel comme suit:

public class BaseValidationViewModel : BaseViewModel,  
    INotifyDataErrorInfo 
{ 
    // ... 
 
    protected void Validate(Func rule, string error, 
        [CallerMemberName] string propertyName = "") 
    { 
        if (string.IsNullOrWhiteSpace(propertyName)) return; 
 
        if (_errors.ContainsKey(propertyName)) 
        { 
            _errors.Remove(propertyName); 
        } 
 
        if (rule() == false) 
        { 
            _errors.Add(propertyName, new List { error }); 
        } 
 
        OnPropertyChanged(nameof(HasErrors)); 
 
        ErrorsChanged?.Invoke(this,  
            new DataErrorsChangedEventArgs(propertyName)); 
    } 
}

Si la règle de validation Func renvoie false, le message d’erreur fourni est ajouté à une liste privée d’erreurs – utilisée par HasErrors et GetErrors () – mappée à la propriété spécifique qui a appelé cette méthode Validate (). Enfin, la méthode Validate () appelle l’événement ErrorsChanged avec le nom de la propriété de l’appelant inclus dans les arguments de l’événement.

Désormais, tout ViewModel qui doit effectuer une validation peut sous-classer BaseValidationViewModel et appeler la méthode Validate () pour vérifier si les propriétés individuelles sont valides.

Dans la section suivante, nous utiliserons BaseValidationViewModel pour ajouter une validation à la nouvelle page d’entrée et à son ViewModel pris en charge.

Ajout de la validation à la nouvelle page d’entrée dans Xamarin.Forms

Dans cette section, nous ajouterons une simple validation côté client à quelques champs de saisie sur la nouvelle page d’entrée.

1. Tout d’abord, mettez à jour NewEntryViewModel en sous-classe BaseValidationViewModel au lieu de BaseViewModel.

public class NewEntryViewModel : BaseValidationViewModel 
{ 
    // ... 
}

Étant donné que BaseValidationViewModel sous-classe BaseViewModel, NewEntryViewModel est également en mesure de tirer parti de tout dans BaseViewModel.

2. Ensuite, ajoutez un appel à Validate () dans le setter de propriété Title qui inclut une règle de validation spécifiant que le champ ne peut pas être laissé vide:

public string Title 
{ 
    get => _title; 
    set 
    { 
        _title = value; 
        Validate(() => !string.IsNullOrWhiteSpace(_title),  
            "Title must be provided."); 
        OnPropertyChanged(); 
        SaveCommand.ChangeCanExecute(); 
}

3. Ensuite, ajoutez un appel à Validate () dans le setter de propriétés Rating qui inclut une règle de validation spécifiant que la valeur du champ doit être comprise entre 1 et 5:

public int Rating 
{ 
    get => _rating; 
    set 
    { 
        _rating = value; 
        Validate(() => _rating >= 1 && _rating 

Notez que nous avons également ajouté SaveCommand.ChangeCanExecute () au setter. En effet, nous voulons mettre à jour la valeur canExecute de SaveCommand lorsque cette valeur est modifiée, car elle aura désormais un impact sur la valeur de retour de CanSave (), que nous mettrons à jour à l’étape suivante.

4. Ensuite, mettez à jour CanSave () – la méthode utilisée pour la fonction canExecute de SaveCommand – pour empêcher l’enregistrement si le ViewModel contient des erreurs:

bool CanSave() => !string.IsNullOrWhitespace(Title) && !HasErrors;

5. Enfin, mettez à jour la nouvelle page d’entrée pour refléter les éventuelles erreurs en mettant en surbrillance la couleur du texte du champ en rouge:

// NewEntryPage.xaml: 
 
 
// ... 
 
 
// NewEntryPage.xaml.cs: 
 
using System; 
using System.Collections.Generic; 
using System.ComponentModel; 
using System.Linq; 
using Xamarin.Forms; 
using TripLog.ViewModels;  
 
public partial class NewEntryPage : ContentPage 
{ 
    NewEntryViewModel ViewModel =>  
        BindingContext as NewEntryViewModel; 
 
    public NewEntryPage() 
    { 
        InitializeComponent(); 
 
        BindingContextChanged += Page_BindingContextChanged; 
 
        BindingContext = new NewEntryViewModel(); 
    } 
 
    void Page_BindingContextChanged(object sender, EventArgs e) 
    { 
        ViewModel.ErrorsChanged += ViewModel_ErrorsChanged; 
    } 
 
    void ViewModel_ErrorsChanged(object sender, 
        DataErrorsChangedEventArgs e) 
    { 
        var propHasErrors = (ViewModel.GetErrors(e.PropertyName) 
            as List)?.Any() == true; 
 
        switch (e.PropertyName) 
        { 
            case nameof(ViewModel.Title): 
                title.LabelColor = propHasErrors  
                    ? Color.Red : Color.Black; 
                break; 
            case nameof(ViewModel.Rating): 
                rating.LabelColor = propHasErrors 
                    ? Color.Red : Color.Black; 
                break; 
            Default: 
                break; 
        } 
    } 
}

Maintenant, lorsque nous exécuterons l’application, nous verrons les captures d’écran suivantes:

Accédez à la nouvelle page d’entrée et entrez une valeur non valide dans le champ Titre ou Note, nous verrons l’étiquette du champ devenir rouge et le bouton Enregistrer sera désactivé. Une fois l’erreur corrigée, la couleur de l’étiquette de champ redevient noire et le bouton Enregistrer est réactivé.

Apprendre encore plus développement d’applications mobiles avec Xamarin et la boîte à outils open source Xamarin.Forms avec la troisième édition Maîtriser Xamarin.Forms.

À propos d’Ed Snider

Ed Snider est un développeur de logiciels senior, conférencier, auteur et MVP Microsoft basé dans la région de Washington DC / Virginie du Nord. Il a une passion pour la conception et le développement mobiles et parle régulièrement de Xamarin et Windows développement d’applications dans la communauté. Ed travaille chez InfernoRed Technology, où son rôle principal est de travailler avec des clients et des partenaires pour créer des produits mobiles et médiatiques sur iOS, Androidet Windows. Il a commencé à travailler avec.NET en 2005 lorsque .NET 2.0 est sorti et a créé des applications mobiles avec .NET depuis 2011. Ed a été reconnu comme MVP Xamarin en 2015 et comme MVP Microsoft en 2017.

Retrouvez-le sur Twitter: @edsnider