Design patterns
MVC, MVVM, MVP

замечания

Контроллер представления модели (MVC)

1. Что такое MVC?

Шаблон контроллера модели (MVC) - это шаблон проектирования, наиболее часто используемый для создания пользовательских интерфейсов. Основным преимуществом MVC является то, что он разделяет:

• внутреннее представление состояния приложения (Модель),
• как информация предоставляется пользователю (вид), и
• логика, которая контролирует взаимодействие пользователя с состоянием приложения (Контроллер).

2. Используйте случаи MVC

Основной пример использования MVC - это программирование графического пользовательского интерфейса (GUI). Компонент «Вид» прослушивает компонент «Модель» для изменений. Модель действует как вещатель; когда в Модели есть режим изменения, он передает свои изменения в представление и контроллер. Контроллер используется View для изменения компонента модели.

3. Реализация

Рассмотрим следующую реализацию MVC, где у нас есть класс Model под названием Animals , класс View, называемый DisplayAnimals , и класс контроллера под названием AnimalController . Пример ниже - это модифицированная версия учебника по MVC из шаблонов проектирования - шаблон MVC .

/* 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. Используемые источники:

Шаблоны проектирования - шаблон MVC

Разработка приложений Java SE с MVC

Модель-представление-контроллер

Model View ViewModel (MVVM)

1. Что такое MVVM?

Шаблон модели View ViewModel (MVVM) - это шаблон проектирования, наиболее часто используемый для создания пользовательских интерфейсов. Он получен из популярного шаблона «Model View Controller» (MVC). Основным преимуществом MVVM является то, что он разделяет:

• Внутреннее представление состояния приложения (Модель).
• Как информация предоставляется пользователю (вид).
• «Логика преобразователя значений», ответственная за публикацию и преобразование данных из модели, чтобы данные могли легко управляться и отображаться в представлении (ViewModel).

2. Использовать случаи MVVM

Первичным примером использования MVVM является программирование графического пользовательского интерфейса (GUI). Он используется для простого программирования пользовательских интерфейсов, управляемых событиями, путем разделения уровня представления из логики бэкэнда, управляющей данными.

Например, в Windows Presentation Foundation (WPF) представление создается с использованием языка разметки структуры XAML. Файлы XAML привязаны к ViewModels, используя привязку данных. Таким образом, представление отвечает только за презентацию, а viewmodel отвечает только за управление состоянием приложения, работая с данными в модели.

Он также используется в библиотеке JavaScript KnockoutJS.

3. Реализация

Рассмотрим следующую реализацию MVVM с использованием C # .Net и WPF. У нас есть класс Model под названием «Животные», класс «Вид», реализованный в Xaml и ViewModel под названием AnimalViewModel. Пример ниже - это модифицированная версия учебника по MVC из шаблонов проектирования - шаблон MVC .

Посмотрите, как модель ничего не знает, ViewModel знает только о модели, и View только знает о ViewModel.

Событие OnNotifyPropertyChanged позволяет обновлять как модель, так и представление так, чтобы при вводе чего-либо в текстовое поле в представлении обновлялась модель. И если что-то обновляет модель, представление обновляется.

/*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. Используемые источники:

Model-View-ViewModel

Простой пример MVVM

Пример простейшего C # WPF MVVM в мире

Шаблон MVVM