Design patterns
MVC, MVVM, MVP

Anmärkningar

Model View Controller (MVC)

1. Vad är MVC?

MVC-mönstret (Model View Controller) är ett designmönster som oftast används för att skapa användargränssnitt. Den största fördelen med MVC är att den separerar:

• den interna representationen av applikationstillståndet (modellen),
• hur informationen presenteras för användaren (vyn) och
• logiken som styr hur användaren interagerar med applikationstillståndet (Controller).

2. Använd fall av MVC

Det primära användningsfallet för MVC är i grafisk användargränssnitt (GUI) -programmering. View-komponenten lyssnar på Model-komponenten för ändringar. Modellen fungerar som en programföretag; när det finns ett ändringsläge för modellen, sänder det sina ändringar till vyn och kontrollen. Styrenheten används av vyn för att modifiera modellkomponenten.

3. Genomförande

Tänk på följande implementering av MVC, där vi har en modellklass som heter Animals , en View-klass som heter DisplayAnimals och en controller-klass som heter AnimalController . Exemplet nedan är en modifierad version av handledning om MVC från 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. Använda källor:

Designmönster - MVC-mönster

Java SE-applikationsdesign med MVC

Model-view-controller

Model View ViewModel (MVVM)

1. Vad är MVVM?

Model View ViewModel (MVVM) -mönstret är ett designmönster som oftast används för att skapa användargränssnitt. Det härrör från det populära MVC-mönstret "Model View Controller". Den största fördelen med MVVM är att den separerar:

• Den interna representationen av applikationstillståndet (modellen).
• Hur informationen presenteras för användaren (vyn).
• Den "värdekonverteringslogik" som ansvarar för att exponera och konvertera data från modellen så att informationen enkelt kan hanteras och presenteras i vyn (ViewModel).

2. Använd fall av MVVM

Det primära användningsfallet för MVVM är programmering av grafiskt användargränssnitt (GUI). Det används för att helt enkelt händelsestyrd programmering av användargränssnitt genom att separera vylagret från backendlogiken som hanterar data.

I Windows Presentation Foundation (WPF), till exempel, är vyn utformad med hjälp av rammärkespråket XAML. XAML-filerna är bundna till ViewModels med databindning. På detta sätt är vyn endast ansvarig för presentation och visningsmodellen ansvarar endast för att hantera applikationstillstånd genom att arbeta med data i modellen.

Det används också i JavaScript-biblioteket KnockoutJS.

3. Genomförande

Överväg följande implementering av MVVM med C # .Net och WPF. Vi har en modellklass som heter Animals, en View-klass implementerad i Xaml och en ViewModel som heter AnimalViewModel. Exemplet nedan är en modifierad version av handledning om MVC från Design Patterns - MVC Pattern .

Titta hur modellen inte vet om någonting, ViewModel vet bara om modellen och Viewen vet bara om ViewModel.

Händelsen OnNotifyPropertyChanged möjliggör uppdatering av både modellen och vyn så att när du anger något i textrutan i vyn uppdateras modellen. Och om något uppdaterar modellen uppdateras vyn.

/*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. Använda källor:

Model-view-Viewmodel

Ett enkelt MVVM-exempel

Världens enklaste C # WPF MVVM-exempel

MVVM-mönstret