Design patterns
MVC, MVVM et MVP

Remarques

Model View Controller (MVC)

1. Qu'est-ce que MVC?

Le modèle MVC (Model View Controller) est un modèle de conception le plus couramment utilisé pour créer des interfaces utilisateur. L'avantage majeur de MVC est qu'il sépare:

• la représentation interne de l'état de l'application (le modèle),
• comment l'information est présentée à l'utilisateur (la vue), et
• la logique qui contrôle la manière dont l'utilisateur interagit avec l'état de l'application (le contrôleur).

2. Cas d'utilisation de MVC

Le principal cas d'utilisation de MVC réside dans la programmation de l'interface utilisateur graphique (GUI). Le composant View écoute le composant Model pour les modifications. Le modèle agit en tant que diffuseur; lorsqu'il existe un mode de modification du modèle, il diffuse ses modifications dans la vue et le contrôleur. Le contrôleur est utilisé par la vue pour modifier le composant de modèle.

3. Mise en œuvre

Considérons l'implémentation suivante de MVC, où nous avons une classe Model appelée Animals , une classe View appelée DisplayAnimals , et une classe de contrôleur appelée AnimalController . L'exemple ci-dessous est une version modifiée du didacticiel sur MVC de Design Patterns - MVC Pattern .

/* Model class */
public class Animals {
    private String name;
    private String gender;

    public String getName() {
        return name;
    }

    public String getGender() {
        return gender;
    }

    public void setName(String name) {
         this.name = name;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }
}

/* View class */
public class DisplayAnimals {
    public void printAnimals(String tag, String gender) {
        System.out.println("My Tag name for Animal:" + tag);
        System.out.println("My gender: " + gender);
    }
}

/* Controller class */
public class AnimalController {
     private Animal model;
     private DisplayAnimals view;

   public AnimalController(Animal model, DisplayAnimals view) {
      this.model = model;
      this.view = view;
   }

   public void setAnimalName(String name) {
      model.setName(name);        
   }

   public String getAnimalName() {
      return model.getName();        
   }

   public void setAnimalGender(String animalGender) {
      model.setGender(animalGender);        
   }

   public String getGender() {
      return model.getGender();        
   }

   public void updateView() {                
      view.printAnimals(model.getName(), model.getGender());
   }    
}

4. Sources utilisées:

Modèles de conception - Modèle MVC

Java SE Application Design avec MVC

Modèle Vue Contrôleur

Modèle View ViewModel (MVVM)

1. Qu'est-ce que MVVM?

Le modèle ViewModel (MVVM) de vue modèle est un modèle de conception le plus couramment utilisé pour créer des interfaces utilisateur. Il est dérivé du modèle populaire "Model View Controller" (MVC). L'avantage majeur de MVVM est qu'il sépare:

• La représentation interne de l'état de l'application (le modèle).
• Comment l'information est présentée à l'utilisateur (la vue).
• La "logique de conversion de valeur" responsable de l'exposition et de la conversion des données du modèle afin que les données puissent être facilement gérées et présentées dans la vue (le ViewModel).

2. Cas d'utilisation de MVVM

Le principal cas d'utilisation de MVVM est la programmation de l'interface utilisateur graphique (GUI). Il est utilisé pour programmer simplement les interfaces utilisateur en fonction des événements en séparant la couche de vue de la logique de gestion gérant les données.

Dans Windows Presentation Foundation (WPF), par exemple, la vue est conçue à l'aide du langage de balisage de structure XAML. Les fichiers XAML sont liés à ViewModels à l'aide de la liaison de données. De cette façon, la vue est uniquement responsable de la présentation et la vue est uniquement responsable de la gestion de l'état de l'application en travaillant sur les données du modèle.

Il est également utilisé dans la bibliothèque JavaScript KnockoutJS.

3. Mise en œuvre

Considérez l'implémentation suivante de MVVM en utilisant C # .Net et WPF. Nous avons une classe Model appelée Animals, une classe View implémentée dans Xaml et un ViewModel appelé AnimalViewModel. L'exemple ci-dessous est une version modifiée du didacticiel sur MVC de Design Patterns - MVC Pattern .

Regardez comment le modèle ne sait rien, le ViewModel ne connaît que le modèle et la vue ne connaît que le ViewModel.

L'événement OnNotifyPropertyChanged permet de mettre à jour le modèle et la vue afin que, lorsque vous entrez quelque chose dans la zone de texte de la vue, le modèle soit mis à jour. Et si quelque chose met à jour le modèle, la vue est mise à jour.

/*Model class*/
public class Animal 
{
    public string Name { get; set; }

    public string Gender { get; set; }
}

/*ViewModel class*/
public class AnimalViewModel : INotifyPropertyChanged
{
    private Animal _model;

    public AnimalViewModel()
    {
        _model = new Animal {Name = "Cat", Gender = "Male"};
    }

    public string AnimalName
    {
        get { return _model.Name; }
        set
        {
            _model.Name = value;
            OnPropertyChanged("AnimalName");
        }
    }

    public string AnimalGender
    {
        get { return _model.Gender; }
        set
        {
            _model.Gender = value;
            OnPropertyChanged("AnimalGender");
        }
    }

    //Event binds view to ViewModel.
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            var e = new PropertyChangedEventArgs(propertyName);
            this.PropertyChanged(this, e);
        }
    }
}


<!-- Xaml View -->
<Window x:Class="WpfApplication6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:viewModel="clr-namespace:WpfApplication6">
    
    <Window.DataContext>
        <viewModel:AnimalViewModel/>
    </Window.DataContext>
    
    <StackPanel>
        <TextBox Text="{Binding AnimalName}" Width="120" />
        <TextBox Text="{Binding AnimalGender}" Width="120" />
    </StackPanel>
</Window>

4. Sources utilisées:

Model – view – viewmodel

Un exemple simple de MVVM

L'exemple MVVM C # WPF le plus simple au monde

Le pattern MVVM