Design patterns
MVC, MVVM, MVP

Observaciones

Controlador de vista de modelo (MVC)

1. ¿Qué es MVC?

El patrón del controlador de vista de modelo (MVC) es un patrón de diseño más comúnmente utilizado para crear interfaces de usuario. La principal ventaja de MVC es que separa:

• la representación interna del estado de la aplicación (el Modelo),
• cómo se presenta la información al usuario (la Vista), y
• la lógica que controla cómo el usuario interactúa con el estado de la aplicación (el Controlador).

2. Casos de uso de MVC.

El caso de uso principal de MVC está en la programación de la interfaz gráfica de usuario (GUI). El componente Ver escucha el componente del Modelo en busca de cambios. El modelo actúa como una emisora; cuando hay un modo de cambio en el Modelo, transmite sus cambios a la Vista y al Controlador. El controlador es utilizado por la vista para modificar el componente del modelo.

3. Implementación

Considere la siguiente implementación de MVC, donde tenemos una clase de modelo llamada Animals , una clase de vista llamada DisplayAnimals y una clase de controlador llamada AnimalController . El siguiente ejemplo es una versión modificada del tutorial en MVC de 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. Fuentes utilizadas:

Patrones de diseño - Patrón MVC

Diseño de aplicaciones Java SE con MVC

Modelo – vista – controlador

Modelo View ViewModel (MVVM)

1. ¿Qué es MVVM?

El patrón Model View ViewModel (MVVM) es un patrón de diseño más comúnmente utilizado para crear interfaces de usuario. Se deriva del popular patrón "Model View Controller" (MVC). La principal ventaja de MVVM es que separa:

• La representación interna del estado de la aplicación (el Modelo).
• Cómo se presenta la información al usuario (la Vista).
• La "lógica del convertidor de valores" responsable de exponer y convertir los datos del modelo para que los datos se puedan administrar y presentar fácilmente en la vista (el ViewModel).

2. Casos de uso de MVVM.

El caso de uso principal de MVVM es la programación de la interfaz gráfica de usuario (GUI). Se utiliza simplemente para programar eventos de interfaz de usuario mediante la separación de la capa de vista de la lógica de back-end que administra los datos.

En Windows Presentation Foundation (WPF), por ejemplo, la vista se diseña utilizando el lenguaje de marcado de marco XAML. Los archivos XAML están vinculados a ViewModels mediante el enlace de datos. De esta manera, la vista solo es responsable de la presentación y el modelo de vista solo es responsable de administrar el estado de la aplicación trabajando en los datos del modelo.

También se utiliza en la biblioteca de JavaScript KnockoutJS.

3. Implementación

Considere la siguiente implementación de MVVM usando C # .Net y WPF. Tenemos una clase de modelo llamada Animales, una clase de vista implementada en Xaml y un modelo de vista llamado AnimalViewModel. El siguiente ejemplo es una versión modificada del tutorial en MVC de Design Patterns - MVC Pattern .

Mira cómo el modelo no sabe nada, el ViewModel solo sabe sobre el modelo y la vista solo conoce el ViewModel.

El evento OnNotifyPropertyChanged permite actualizar tanto el modelo como la vista para que cuando ingrese algo en el cuadro de texto en la vista, se actualice el modelo. Y si algo actualiza el modelo, la vista se actualiza.

/*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. Fuentes utilizadas:

Model – view – viewmodel

Un ejemplo simple de MVVM

El ejemplo MVVM de C # WPF más simple del mundo

El patrón MVVM