Design patterns
MVC, MVVM, MVP

Opmerkingen

Model View Controller (MVC)

1. Wat is MVC?

Het Model View Controller (MVC) -patroon is een ontwerppatroon dat het meest wordt gebruikt voor het maken van gebruikersinterfaces. Het grote voordeel van MVC is dat het scheidt:

• de interne weergave van de applicatiestatus (het model),
• hoe de informatie wordt gepresenteerd aan de gebruiker (de weergave), en
• de logica die bepaalt hoe de gebruiker omgaat met de applicatiestatus (de controller).

2. Gebruik gevallen van MVC

De primaire use case voor MVC zit in de grafische gebruikersinterface (GUI) -programmering. De component View luistert naar de component Model voor wijzigingen. Het model fungeert als een uitzender; wanneer er een wijzigingsmodus is voor het model, verzendt het zijn wijzigingen naar de weergave en de controller. De controller wordt door de weergave gebruikt om de modelcomponent te wijzigen.

3. Implementatie

Overweeg de volgende implementatie van MVC, waarbij we een Model-klasse met de naam Animals , een View-klasse met de naam DisplayAnimals en een controller-klasse met de naam AnimalController . Het onderstaande voorbeeld is een aangepaste versie van de zelfstudie over MVC van 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. Gebruikte bronnen:

Ontwerppatronen - MVC-patroon

Java SE-applicatieontwerp met MVC

-Model view controller

Model View ViewModel (MVVM)

1. Wat is MVVM?

Het Model View ViewModel (MVVM) -patroon is een ontwerppatroon dat het meest wordt gebruikt voor het maken van gebruikersinterfaces. Het is afgeleid van het populaire "Model View Controller" (MVC) -patroon. Het grote voordeel van MVVM is dat het scheidt:

• De interne weergave van de applicatiestatus (het model).
• Hoe de informatie wordt gepresenteerd aan de gebruiker (de weergave).
• De "value converter logic" die verantwoordelijk is voor het weergeven en converteren van de gegevens van het model, zodat de gegevens eenvoudig kunnen worden beheerd en gepresenteerd in de weergave (het ViewModel).

2. Gebruik gevallen van MVVM

Het primaire gebruik van MVVM is programmeren met grafische gebruikersinterface (GUI). Het wordt gebruikt om eenvoudig gebeurtenisgestuurde programmering van gebruikersinterfaces te maken door de beeldlaag te scheiden van de backend-logica die de gegevens beheert.

In Windows Presentation Foundation (WPF) is de weergave bijvoorbeeld ontworpen met behulp van de kader-opmaaktaal XAML. De XAML-bestanden zijn gebonden aan ViewModels met behulp van gegevensbinding. Op deze manier is de weergave alleen verantwoordelijk voor de presentatie en is het viewmodel alleen verantwoordelijk voor het beheren van de applicatiestatus door te werken aan de gegevens in het model.

Het wordt ook gebruikt in de JavaScript-bibliotheek KnockoutJS.

3. Implementatie

Overweeg de volgende implementatie van MVVM met C # .Net en WPF. We hebben een Model-klasse genaamd Animals, een View-klasse geïmplementeerd in Xaml en een ViewModel met de naam AnimalViewModel. Het onderstaande voorbeeld is een aangepaste versie van de zelfstudie over MVC van Design Patterns - MVC Pattern .

Kijk hoe het model niets weet, het ViewModel weet alleen het Model en de View weet alleen het ViewModel.

Met de gebeurtenis OnNotifyPropertyChanged kunnen zowel het model als de weergave worden bijgewerkt, zodat het model wordt bijgewerkt wanneer u iets in het tekstvak in de weergave invoert. En als iets het model bijwerkt, wordt de weergave bijgewerkt.

/*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. Gebruikte bronnen:

Model-View-ViewModel

Een eenvoudig MVVM-voorbeeld

Het eenvoudigste voorbeeld van C # WPF MVVM ter wereld

Het MVVM-patroon