Développez une application .NET MAUI avec MVVM : Un exemple simple
.NET MAUI (Multi-platform App UI) est un framework puissant pour créer des applications multiplateformes avec un seul codebase. La conception de l'architecture de votre application est cruciale pour sa maintenabilité et son évolutivité. Le modèle MVVM (Model-View-ViewModel) est un choix populaire pour les applications .NET MAUI car il favorise une séparation claire des responsabilités et une meilleure testabilité.
Qu'est-ce que MVVM ?
Le modèle MVVM sépare l'application en trois composants distincts :
- Modèle : Contient les données et la logique métier de l'application.
- Vue : Représente l'interface utilisateur de l'application et affiche les données du modèle.
- Modèle de vue (ViewModel) : Agit comme un intermédiaire entre le modèle et la vue, gérant la logique de présentation et les interactions avec l'utilisateur.
Un exemple simple de .NET MAUI avec MVVM
Pour illustrer l'utilisation de MVVM avec .NET MAUI, nous allons créer une application simple qui affiche une liste de produits.
1. Créer un projet .NET MAUI
Utilisez Visual Studio pour créer un nouveau projet .NET MAUI. Choisissez le modèle "App vide".
2. Créer le modèle (Model)
Créez une classe nommée Product dans le dossier Models :
namespace MauiMVVMExample.Models
{
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
}
}
3. Créer le modèle de vue (ViewModel)
Créez une classe nommée ProductViewModel dans le dossier ViewModels :
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using MauiMVVMExample.Models;
using System.Collections.ObjectModel;
namespace MauiMVVMExample.ViewModels
{
public partial class ProductViewModel : ObservableObject
{
[ObservableProperty]
private ObservableCollection _products;
public ProductViewModel()
{
_products = new ObservableCollection
{
new Product { Id = 1, Name = "Produit 1", Price = 10.99m },
new Product { Id = 2, Name = "Produit 2", Price = 25.50m },
new Product { Id = 3, Name = "Produit 3", Price = 15.75m }
};
}
}
}
4. Créer la vue (View)
Créez un fichier XAML nommé ProductListPage.xaml dans le dossier Views :
5. Définir la page d'accueil de l'application
Dans App.xaml.cs, définissez ProductListPage comme page d'accueil :
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new ProductListPage();
}
}
6. Exécuter l'application
Lancez l'application pour voir la liste des produits affichée.
Conclusion
Cet exemple simple démontre comment implémenter MVVM dans une application .NET MAUI. La séparation des responsabilités et l'utilisation de bindings permettent de créer une application plus maintenable et plus facile à tester.
Astuce : Pour une meilleure gestion des dépendances, vous pouvez utiliser un conteneur d'injection de dépendances comme Microsoft.Extensions.DependencyInjection.
N'oubliez pas que cet exemple est simple. Vous pouvez l'étendre pour inclure des fonctionnalités plus complexes, telles que la navigation entre les pages, la gestion des erreurs et les interactions avec des API externes.