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?
Savoir l’événement idéal susceptible de déclencher les calculs automatiques;
Mettre en place un Behavior capable de convertir cet évènement en Command MVVM;
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
Je profite pour souhaiter une bonne fête de fin d’année à tout et chacun !🎅🎅🎅🎅🎅🎅
Commentaires