Design patterns
MVC, MVVM, MVP

Uwagi

Kontroler widoku modelu (MVC)

1. Co to jest MVC?

Wzorzec kontrolera widoku modelu (MVC) jest wzorcem projektowym najczęściej używanym do tworzenia interfejsów użytkownika. Główną zaletą MVC jest to, że oddziela:

• wewnętrzna reprezentacja stanu aplikacji (Model),
• w jaki sposób informacje są prezentowane użytkownikowi (Widok), oraz
• logika kontrolująca sposób interakcji użytkownika ze stanem aplikacji (kontrolerem).

2. Przypadki użycia MVC

Podstawowym przypadkiem użycia MVC jest programowanie z graficznym interfejsem użytkownika (GUI). Komponent Widok nasłuchuje komponentu Model pod kątem zmian. Model działa jako nadawca; gdy istnieje tryb zmian w Modelu, rozgłasza on swoje zmiany do Widoku i Kontrolera. Kontroler służy do widoku do modyfikowania komponentu modelu.

3. Realizacja

Rozważ następującą implementację MVC, w której mamy klasę Model o nazwie Animals , klasę View o nazwie DisplayAnimals i klasę kontrolera o nazwie AnimalController . Poniższy przykład to zmodyfikowana wersja samouczka na temat MVC z Design Designs - 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. Wykorzystane źródła:

Wzory projektowe - wzór MVC

Projektowanie aplikacji Java SE za pomocą MVC

Model – widok – kontroler

Widok modelu ViewModel (MVVM)

1. Co to jest MVVM?

Wzorzec widoku Model ViewModel (MVVM) jest wzorcem projektowym najczęściej używanym do tworzenia interfejsów użytkownika. Wywodzi się z popularnego wzorca „Model View Controller” (MVC). Główną zaletą MVVM jest to, że oddziela:

• Wewnętrzna reprezentacja stanu aplikacji (Model).
• Sposób prezentacji informacji użytkownikowi (widok).
• „Logika konwertera wartości” odpowiedzialna za udostępnianie i konwertowanie danych z modelu, aby dane można było łatwo zarządzać i prezentować w widoku (ViewModel).

2. Przypadki użycia MVVM

Podstawowym przykładem zastosowania MVVM jest programowanie z graficznym interfejsem użytkownika (GUI). Służy do programowania sterowanego zdarzeniami interfejsów użytkownika poprzez oddzielenie warstwy widoku od logiki zaplecza zarządzającej danymi.

Na przykład w Windows Presentation Foundation (WPF) widok jest zaprojektowany przy użyciu języka znaczników ram XAML. Pliki XAML są powiązane z ViewModels za pomocą powiązania danych. W ten sposób widok jest odpowiedzialny tylko za prezentację, a model viewmodel jest odpowiedzialny tylko za zarządzanie stanem aplikacji poprzez pracę z danymi w modelu.

Jest również używany w bibliotece JavaScript KnockoutJS.

3. Realizacja

Rozważ następującą implementację MVVM przy użyciu C # .Net i WPF. Mamy klasę Model o nazwie Animals, klasę View zaimplementowaną w Xaml oraz ViewModel o nazwie AnimalViewModel. Poniższy przykład to zmodyfikowana wersja samouczka na temat MVC z Design Designs - MVC Pattern .

Zobacz, jak Model nic o niczym nie wie, ViewModel wie tylko o Modelu, a View tylko wie o ViewModel.

Zdarzenie OnNotifyPropertyChanged umożliwia aktualizację zarówno modelu, jak i widoku, dzięki czemu po wprowadzeniu czegoś w polu tekstowym w widoku model jest aktualizowany. A jeśli coś zaktualizuje model, widok zostanie zaktualizowany.

/*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. Wykorzystane źródła:

Model – widok – model

Prosty przykład MVVM

Najprostszy na świecie przykład C # WPF MVVM

Wzór MVVM