Utilisation du patron de conception MVVM

MVVM (Model-View-ViewModel) est un patron de conception qui a pour but de donner une meilleure architecture aux applications en séparant clairement les rôles des composants. MVVM a trois composants conceptuels:

  • La « Vue » (View) qui représente l’interface utilisateur et présente les données pour l’utilisateur final;
  • Le « Modèle » (Model) qui contient les données, mais ne les manipule pas;
  • Le « Modèle de la Vue » (ViewModel) qui est un adaptateur entre la View et le Model. Le ViewModel obtient des données brutes du Model et les transforme en des données « moins brutes ».

Durant le passage des données suivant le schéma Model>ViewModel>View, le ViewModel connait uniquement le Model et la View uniquement le ViewModel.

Quelques avantages qu’offre le patron de conception MVVM:

  • Le développement de la View peut être séparé de celui du Model et du ViewModel.
  • Le Model peut facilement être testé puisqu’il est complètement indépendant des deux autres composants. Le ViewModel peut être testé beaucoup plus facilement parce qu’il n’a pas d’interface utilisateur.
  • Les développeurs peuvent collaborer sur un projet et travailler sans conflit chacun sur sa partie.
  • La maintenance s’en trouve facilitée car l’interface utilisateur d’une application par exemple peut être modifiée sans que les autres composants le soient.

IMPLÉMENTATION

Au cours des étapes suivantes, nous allons implémenter le patron de conception MVVM dans une application qui présente une liste de films Camerounais avec chacun un titre et une description et affiche le titre à l’écran.

  • Créez une nouvelle application Windows Phone. Nommez le projet « View » et la solution « MVVM ». Assurez-vous également que l’option Créer un répertoire pour la solution est sélectionnée.
  • Ajoutez un nouveau projet à la solution. Sélectionnez le « template » Windows Phone Class Library et nommez le projet « Model ».
  • Ajoutez un troisième projet à la solution. Sélectionnez le « template » Windows Phone Class Library et nommez le projet « ViewModel ».
  • Dans l’Explorateur de Solution, faites un clic droit sur l’élément References du projet ViewModel, puis sélectionnez Ajouter>Références…. Allez sur l’onglet Solution|Projet, sélectionnez le projet Model et validez sur OK.
  • Dans l’Explorateur de Solution, faites un clic droit sur l’élément References du projet View, puis sélectionnez Ajouter>Références…. Allez sur l’onglet Solution|Projet, sélectionnez le projet ViewModel et validez sur OK.
  • Retrouvez le projet Model dans l’Explorateur de Solution et renommez le fichier par défaut Class1.cs en Film.cs.
  • Ouvrez le fichier Film.cs et remplacez son code par le code ci-dessous après avoir rajouté la directive using System.Collections.Generic;.

public class Film
{
public int ID { get; set; }
public string Titre { get; set; }
public string Description { get; set; }
}

public class Films : List<Film>
{
public Films()
{
this.Add(new Film()
{
ID = 1,
Titre = "Foyer Polygamique",
Description = "Film tourné par Les Déballeurs qui était présenté sur les antennes    de la chaîne Canal 2 les samedis soirs"
}
);

this.Add(new Film()
{
ID = 2,
Titre = "Au-delà de tout soupçon",
Description = "Comédie dramatique présentée sur les antennes de la chaîne Canal 2"
}
);
this.Add(new Film()
{
ID = 3,
Titre = "Nyanga",
Description = "Film Camerounais récent"
}

);
this.Add(new Film()
{
ID = 4,
Titre = "Erreur Fatale",
Description = "Film Camerounais pas très récent"
}
);
this.Add(new Film()
{
ID = 5,
Titre = "Faut pas rêver",
Description = "Film Camerounais un peu moins récent"
}
);
}
}

  • Retrouvez le projet ViewModel dans l’Explorateur de Solution et renommez le fichier par défaut Class1.cs en FilmViewModel.cs.
  • Ouvrez le fichier FilmViewModel.cs et remplacez son code par le code ci-dessous après avoir rajouté les directives using System.Collections.ObjectModel;, using System.ComponentModel;, using Model;. Ici, la classe FilmViewModel implémente l’interface INotifyPropertyChanged.

public class FilmViewModel
{
public class FilmViewModel : INotifyPropertyChanged
{
public FilmViewModel() { }
public void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
}

  • Rajoutez les propriétés suivantes à la classe FilmViewModel.

private string titre;
public string TitreFilm
{
get { return this.titre; }
set
{
this.titre = value; NotifyPropertyChanged("Titre");
}
}
private string description; public string DescriptionFilm
{
get { return this.description; }
set
{
this.description = value; NotifyPropertyChanged("Description");
}
}
public ObservableCollection<Film> CollectionFilm { get; set; }

  • Dans la définition de la classe FilmViewModel, remplacez le constructeur par le code ci-dessous:

public FilmViewModel()
{
this.CollectionFilms = new ObservableCollection<Film>(new Films());
this.TitreFilm = "films";
this.DescriptionFilm = "films camerounais";
}

  • Ouvrez le fichier App.xaml depuis le projet View. Ajoutez une référence d’espace de noms XML au ViewModel comme ci-dessous:

<Application ...
xmlns:vm="clr-namespace:ViewModel;assembly=ViewModel">

  • Ajoutez une ressource qui pointe sur l’objet FilmViewModel.

<Application.Resources>
 <vm:FilmViewModel x:Key="FilmViewModel"/>
</Application.Resources>

  • Ouvrez la page MainPage.xaml du projet View et effectuez le Binding de la ressource FilmViewModel à la propriété DataContext de la page. Ceci permet de rendre le ViewModel accessible à tous les éléments de la page.

<phone:PhoneApplicationPage ...
DataContext="{StaticResource FilmViewModel}">

  • Retrouvez l’élément StackPanel nommé « TitlePanel » et remplacez-le par le code ci-dessous:

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="{Binding Path=DescriptionFilm}" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="{Binding Path=TitreFilm}" Style="{StaticResource PhoneTextTitle1Style}" Margin="9,-7,0,0" />
</StackPanel>

  • Retrouvez le Grid nommé « ContentPanel » et remplacez-le par le code ci-dessous:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector x:Name="ListeFilm" ItemsSource="{Binding Path=CollectionFilms}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Titre}"/>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>

  • Exécutez l’application, la View affiche les données du ViewModel. Le résultat devrait ressembler à ceci:

films

 

Les applications du patron de conception Model-View-ViewModel vont beaucoup plus loin que ceci mais j’espère que cet exercice vous a permis d’avoir une idée du MVVM et de ce qu’on peut en faire.

2 commentaires

Ajouter un Commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *