• laurent@lioncoding.com

Les Champs calculĂ©s dans Xamarin.Forms: les bonnes pratiques 🎅


Dans cet article qui sera probablement la dernière de cette année 🎅2019🎅 😉, il sera question de voir la technique de calcul et d’affichage automatique des champs calculés en Xamarin.Forms.

Nous supposons un champ décimal sur un formulaire qui servira à calculer automatique la TVA(c’est à dire la valeur du champ de saisie multipliée par le taux de la TVA).

Comment y procéder dans un contexte MVVM?

  • [x] Savoir l’événement idéal susceptible de déclencher les calculs automatiques;

  • [x] Mettre en place un Behavior capable de convertir cet évènement en Command MVVM;

  • [x] Effectuer les calculs.

Sur quel évènement jouer dans XAML pour faire les calculs automatiques ?

Les Entry dans Xamarin.Forms disposent de l’évènement TextChanged se déclenchant lorsque la valeur de ceux-ci change.

L’inconvénient en utilisant cet événement est que lorsque le calcul à faire en arrière plan est lourd, votre application risque de se planter puisque à chaque appui sur un chiffre, la commande de calcul sera invoquée.

Certains penseront à l’inutilité d’utiliser un événement pour s’abriter derrière les atouts du Data Binding et mettre à jour l’attribut calculé comme suit:

private decimal _total;
public decimal Total
{
get { return _total; }
set { 
        SetProperty(ref _total, value); 
        // Call Calculation method
        DoCalculation(Total);
    }
}

Cette technique ressemble à la première car la méthode DoCalculation(double total) sera appelée à chaque fois que l’utilisateur appuiera sur son clavier pour faire une modification dans la champ de saisie(Total); ce qui risque de faire planter l’application.

La solution idéale serait de jouer sur l’événement UnFocus. Il permet d’éviter les calculs inutiles capables de faire planter l’application; ainsi ces derniers seront déclenchés au moment opportun c’est-à-dire après la saisie.

Le code de la vue

<Entry
    FontAttributes="Bold"
    HeightRequest="50"
    HorizontalOptions="FillAndExpand"
    Keyboard="Numeric"
    Text="{Binding Total}"
    TextColor="#525ABB">
    <Entry.Behaviors>
         <behaviors:EventToCommandBehavior Command="{Binding TotalValueChangedCommand}" EventName="Unfocused" />
</Entry.Behaviors>
<Entry
    BackgroundColor="White"
    FontAttributes="Bold"
    HeightRequest="50"
    HorizontalOptions="FillAndExpand"
    IsEnabled="False"
    Keyboard="Numeric"
    Text="{Binding TaxAmount}"
    TextColor="#525ABB">
</Entry>

Code du ViewModel

using System;
using System.Windows.Input;
using Xamarin.Forms;

namespace SampleProject.ViewModels
{
    public class AddSupplierOrderViewModel : BaseViewModel
    {

        public ICommand TotalValueChangedCommand { get; private set; }

        public AddSupplierOrderViewModel()
        {
            Title = "Nouvelle Commande";
            TotalValueChangedCommand = new Command(DoCalculation);
        }


        private void DoCalculation(){
            TaxAmount = (Total * 18)/100;
            // ...
        }

        private decimal _taxAmount;
        public decimal TaxAmount
        {
            get { return _taxAmount; }
            set { SetProperty(ref _taxAmount, value); OnPropertyChanged(nameof(TaxAmount)); }
        }
        private decimal _total;
        public decimal Total
        {
            get { return Total; }
            set { SetProperty(ref Total, value); OnPropertyChanged(nameof(Total)); }
        }

    }
}

Behavior capable de convertir cet évènement en Command MVVM

Vous découvrirez un gist que j’ai mis sur place pour vous sur Github.

Ressources

👉 https://github.com/egbakou

Je profite pour souhaiter une bonne fête de fin d’année à tout et chacun !🎅🎅🎅🎅🎅🎅


Commentaires