Le MVVM, pour une application réussie

Dans ce chapitre, nous découvrirons un patron de conception majeur pour le développement d’application mobile, le Model-View-ViewModel ! (plus couramment appelé “le MVVM”)

Le Model-View-ViewModel

Le MVVM est un patron de conception qui propose au développeur une séparation logique de son code en 3 couches :

• La View, qui correspond à l’interface utilisateur, c’est-à-dire tout ce que l’on va afficher à l’écran (e.g. la page HomeView),

• Le Model, qui fait référence au type de données affichées dans cette View,

• Et enfin le ViewModel, qui fait le lien entre la View et le Model. Par exemple, pour récupérer des données depuis le Cloud ou répondre aux interactions de l’utilisateur.

L’un des principaux avantages du MVVM est de pouvoir isoler la vue (i.e. l’interface utilisateur) de la logique “métier”. Dans le cadre de notre première page, on obtient finalement deux fichiers :

1. HomeView.cs qui définit précisément comment notre page s’affichera (i.e. une couleur de fond, une image en haut, un bouton en bas),

2. Et HomeViewModel.cs qui regroupe toute la logique pour faire fonctionner notre page (ici, le comportement du bouton quand l’utilisateur appuie dessus).

En suivant ce principe, le découpage de ton code est clair et tu limites le nombre de lignes de code par fichier. Tu ne voudrais pas d’un fichier de plus de 10 000 lignes ! 😄 En plus, il n’y a aucun risque d’affecter la logique de ton app en changeant seulement la couleur d’un bouton.

Bonne remarque ! En effet, certaines pages sont tellement simples qu’elles ne nécessitent pas de Model. Dans ces cas-là, seuls les View et ViewModel seront donc requis.

Le Data Binding

On sait désormais bien découper notre code en plusieurs couches. Par exemple, définir un bouton dans une View et déclarer son action dans un ViewModel. Mais est-ce que tu saurais dire comment elles vont fonctionner ensemble ?

En effet, c’est quasiment ça ! Cela se déroule en deux temps :

1. On associe d’abord un ViewModel à sa View (généralement via le BindingContext de la View),

2. Puis on définit le comportement de chaque élément de la View dans le ViewModel, en recourant au principe du Data Binding.

Le Data Binding est une technique permettant de lier deux objets de sorte que, lorsque l’un des deux est modifié, l’autre le sera également. Ça peut paraître un peu flou comme ça, mais tu comprendras mieux son rôle dans la section d’après. Pour le moment, on continue !

Appliquer le MVVM

Maintenant que tu connais les bases du MVVM, je vais pouvoir t’apprendre à l’appliquer concrètement dans l’application.

Commençons par créer un fichier qui servira de ViewModel pour notre HomeView. Pour cela, crée d’abord un nouveau dossier ViewModels dans le projet, puis ajoutes-y un nouveau fichier.

Ce sera une nouvelle classe vide appelée HomeViewModel.cs :

Ensuite, remplace son contenu par le suivant:

Nom du fichier :HomeViewModel.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

using System;

namespace NightClub.ViewModels;

public class HomeViewModel
{
	public HomeViewModel()
	{
	}

	async Task Enter()
	{
		await Application.Current.MainPage.DisplayAlert(
			"Well Done !",
			"You have successfully reached the end of this chapter.",
			"Next !");
	}
}

Bon, il n’y a vraiment rien de spécial ici. C’est juste une classe d’objet C# avec une méthode Enter() qui affiche du texte à l’écran après un clic de l’utilisateur sur le bouton “ENTER”.

Eh oui tu as raison, mais en l’état, il reste inutilisable ! Souviens-toi, il n’y a toujours aucun lien entre la HomeView et le HomeViewModel.

Heureusement, il existe une librairie mise à disposition par Microsoft qui va grandement nous simplifier la vie: le MVVM Toolkit.

Cette librairie a déjà été ajoutée au projet et tu peux le vérifier facilement en ouvrant la gestion des paquets NuGet. Fais donc un clic droit sur les dépendances du projet:

Et voilà la librairie en question ! Elle s’appelle CommunityToolkit.Mvvm :

Voyons désormais comment préparer notre classe HomeViewModel pour être un véritable ViewModel :

1. Premièrement, fais-le hériter de la classe ObservableObject,

2. puis, définis-le comme une classe partielle avec le mot-clé partial.

Tu devrais avoir la configuration suivante:

Nom du fichier :HomeViewModel.cs

1
2
3
4
5
6
7

using System;
using CommunityToolkit.Mvvm.ComponentModel;

namespace NightClub.ViewModels;

public partial class HomeViewModel : ObservableObject
...

Ces deux étapes sont nécessaires pour permettre au MVVM Toolkit de générer du code source à la simple mention de mots-clés spécifiques. Concrètement, on écrit un seul mot et hop, ça génère tout seul des dizaines de lignes de code, c’est génial, non ?! 🤘

Par exemple ici, on va définir notre méthode Enter() comme étant une commande en lui rajoutant un simple attribut [RelayCommand] , voilà comment :

Nom du fichier :HomeViewModel.cs

1
2
3
4
5
6
7
8

[RelayCommand]
async Task Enter()
{
    await Application.Current.MainPage.DisplayAlert(
        "Well Done !",
        "You have successfully reached the end of this chapter.",
        "Next !");
}

Avec seulement un mot, on a désormais une commande Enter() qui supporte la technique du Data Binding ! Et ce uniquement grâce à la librairie MVVM Toolkit qui s’occupe de générer tout le code source nécessaire.

Bientôt la démo !

On y est presque ! Il ne reste plus qu’à actionner la commande Enter() au clic du bouton “ENTER”.

Tout d’abord, retourne dans le fichier HomeView.cs pour lier la vue au HomeViewModel via le **BindingContext **:

Nom du fichier :HomeView.cs

1
2
3
4
5
6
7
8

public HomeView()
{
	BindingContext = new HomeViewModel();
	
	BackgroundColor = Colors.Black;
	
	Content = ...
}

Puis définissons l’action du bouton EnterButton avec BindCommand pour déclencher la commande Enter() spécifiée dans le HomeViewModel:

Nom du fichier :HomeView.cs

1
2
3
4
5
6
7
8

Button EnterButton => new Button
{
	Text = "ENTER",
	TextColor = Colors.White,
	BackgroundColor = Colors.Magenta,
	CornerRadius = 10
} .Bold() .Paddings(50, 2, 50, 2) .CenterHorizontal()
	.BindCommand("EnterCommand"); // Note: on doit ajouter "Command" après "Enter"

Et voilà le travail !

Eh bien oui en théorie ! Mais il manque tout de même plusieurs fonctionnalités clés d’une application : un système d’authentification, une base de données, etc…

Tiens par exemple, une fois qu’on aura créé la page principale de l’application, il faudra bien pouvoir s’y rendre depuis la page d’accueil ! C’est ce qu’on verra dans le prochain chapitre.

Plus d’articles dans la même série:

Ma toute première app en .NET MAUI
Installation du projet .NET MAUI
Première exécution de l’app .NET MAUI
Le MVVM, pour une application réussie
Naviguer vers une nouvelle page en .NET MAUI
Agencer les éléments d'une page .NET MAUI
Affichage du lecteur MP3 - Durée d'écoute
Affichage du lecteur MP3 - Contrôles de lecture
Affichage du lecteur MP3 - Volume
Écouter de la musique en .NET MAUI avec MediaElement
Contrôler la tête de lecture avec MediaElement
Contrôler le volume avec MediaElement
Télécharger un fichier audio en .NET MAUI
Écouter une playlist avec MediaElement
Créer des animations avec .NET MAUI pour une ambiance disco