Design patterns
MVC, MVVM, MVP

Bemerkungen

Modellansicht-Controller (MVC)

1. Was ist MVC?

Das Model View Controller (MVC) -Muster ist ein Entwurfsmuster, das am häufigsten zum Erstellen von Benutzeroberflächen verwendet wird. Der Hauptvorteil von MVC ist, dass es sich unterscheidet:

• die interne Darstellung des Anwendungsstatus (das Modell),
• wie die Informationen dem Benutzer präsentiert werden (die Ansicht) und
• Die Logik, die steuert, wie der Benutzer mit dem Anwendungsstatus (Controller) interagiert.

2. Anwendungsfälle von MVC

Der Hauptanwendungsfall für MVC liegt in der grafischen Benutzeroberfläche (GUI). Die View-Komponente überwacht die Model-Komponente auf Änderungen. Das Modell fungiert als Sender. Wenn es einen Änderungsmodus für das Modell gibt, werden die Änderungen an die Ansicht und den Controller übertragen. Der Controller wird von der Ansicht zum Ändern der Modellkomponente verwendet.

3. Umsetzung

Betrachten Sie die folgende Implementierung von MVC, bei der wir eine Model-Klasse namens Animals , eine View-Klasse namens DisplayAnimals und eine Controller-Klasse namens AnimalController . Das folgende Beispiel zeigt eine modifizierte Version des Tutorials zu MVC von 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. Verwendete Quellen:

Design Patterns - MVC-Muster

Java SE-Anwendungsdesign mit MVC

Model View Controller

Modellansicht ViewModel (MVVM)

1. Was ist MVVM?

Das Model View ViewModel (MVVM) -Muster ist ein Entwurfsmuster, das am häufigsten zum Erstellen von Benutzeroberflächen verwendet wird. Es leitet sich vom populären "Model View Controller" (MVC) -Muster ab. Der Hauptvorteil von MVVM ist, dass es voneinander unterscheidet:

• Die interne Darstellung des Anwendungsstatus (das Modell).
• Wie die Informationen dem Benutzer präsentiert werden (die Ansicht).
• Die "Wertkonvertierungslogik", die für die Freigabe und Konvertierung der Daten aus dem Modell verantwortlich ist, sodass die Daten einfach verwaltet und in der Ansicht (ViewModel) dargestellt werden können.

2. Anwendungsfälle von MVVM

Der Hauptanwendungsfall von MVVM ist die Programmierung der grafischen Benutzeroberfläche (GUI). Es wird verwendet, um die ereignisgesteuerte Programmierung von Benutzeroberflächen zu vereinfachen, indem die Ansichtsebene von der Backend-Logik getrennt wird, die die Daten verwaltet.

In Windows Presentation Foundation (WPF) zum Beispiel wird die Ansicht mit der Framework-Auszeichnungssprache XAML erstellt. Die XAML-Dateien sind über Datenbindung an ViewModels gebunden. Auf diese Weise ist die Ansicht nur für die Darstellung verantwortlich, und das Ansichtsmodell ist nur für die Verwaltung des Anwendungsstatus verantwortlich, indem die Daten im Modell bearbeitet werden.

Es wird auch in der JavaScript-Bibliothek KnockoutJS verwendet.

3. Umsetzung

Betrachten Sie die folgende Implementierung von MVVM mit C # .Net und WPF. Wir haben eine Model-Klasse namens Animals, eine in Xaml implementierte View-Klasse und ein ViewModel namens AnimalViewModel. Das folgende Beispiel zeigt eine modifizierte Version des Tutorials zu MVC von Design Patterns - MVC Pattern .

Schauen Sie sich an, wie das Modell nichts weiß. Das ViewModel kennt nur das Modell und die Ansicht nur das ViewModel.

Das OnNotifyPropertyChanged-Ereignis ermöglicht die Aktualisierung sowohl des Modells als auch der Ansicht, so dass das Modell aktualisiert wird, wenn Sie etwas in das Textfeld in der Ansicht eingeben. Und wenn etwas das Modell aktualisiert, wird die Ansicht aktualisiert.

/*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. Verwendete Quellen:

Modell - Ansicht - Ansichtsmodell

Ein einfaches MVVM-Beispiel

Das einfachste C # WPF-MVVM-Beispiel der Welt

Das MVVM-Muster