Design patterns
MVC, MVVM, MVP

Osservazioni

Model View Controller (MVC)

1. Che cos'è MVC?

Il modello Model View Controller (MVC) è un modello di progettazione più comunemente utilizzato per la creazione di interfacce utente. Il principale vantaggio di MVC è che si separa:

• la rappresentazione interna dello stato dell'applicazione (il modello),
• come vengono presentate le informazioni all'utente (la vista), e
• la logica che controlla il modo in cui l'utente interagisce con lo stato dell'applicazione (il Controller).

2. Utilizzare i casi di MVC

Il caso d'uso principale per MVC è nella programmazione della GUI (Graphical User Interface). Il componente Visualizza ascolta il componente Modello per le modifiche. Il modello funge da emittente; quando c'è una modalità di modifica al modello, trasmette le sue modifiche alla vista e al controller. Il controller viene utilizzato dalla vista per modificare il componente del modello.

3. Implementazione

Considera la seguente implementazione di MVC, in cui abbiamo una classe Model chiamata Animals , una classe View denominata DisplayAnimals e una classe controller chiamata AnimalController . L'esempio sotto è una versione modificata del tutorial su MVC da 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. Fonti utilizzate:

Design Patterns - Pattern MVC

Java SE Application Design con MVC

Model-View-Controller

Model View ViewModel (MVVM)

1. Che cos'è MVVM?

Il modello Model View ViewModel (MVVM) è un modello di progettazione più comunemente utilizzato per la creazione di interfacce utente. È derivato dal popolare modello "Model View Controller" (MVC). Il principale vantaggio di MVVM è che si separa:

• La rappresentazione interna dello stato dell'applicazione (il modello).
• Come vengono presentate le informazioni all'utente (la vista).
• La "logica del convertitore di valore" è responsabile dell'esposizione e della conversione dei dati dal modello in modo che i dati possano essere facilmente gestiti e presentati nella vista (ViewModel).

2. Utilizzare i casi di MVVM

Il caso d'uso principale di MVVM è la programmazione della GUI (Graphical User Interface). Viene utilizzato per la semplice programmazione basata sugli eventi delle interfacce utente, separando il livello di visualizzazione dalla logica di backend che gestisce i dati.

Ad esempio, in Windows Presentation Foundation (WPF), la vista è progettata utilizzando il linguaggio di markup framework XAML. I file XAML sono associati a ViewModels utilizzando l'associazione dati. In questo modo la vista è responsabile solo della presentazione e il viewmodel è responsabile solo della gestione dello stato dell'applicazione lavorando sui dati nel modello.

Viene anche utilizzato nella libreria JavaScript KnockoutJS.

3. Implementazione

Considerare la seguente implementazione di MVVM utilizzando C # .Net e WPF. Abbiamo una classe Model chiamata Animals, una classe View implementata in Xaml e un ViewModel chiamato AnimalViewModel. L'esempio sotto è una versione modificata del tutorial su MVC da Design Patterns - MVC Pattern .

Guarda come il Modello non sa nulla, il ViewModel conosce solo il Modello e la Vista conosce solo il ViewModel.

L'evento OnNotifyPropertyChanged consente di aggiornare sia il modello che la vista in modo tale che quando si inserisce qualcosa nella casella di testo nella vista il modello viene aggiornato. E se qualcosa aggiorna il modello, la vista viene aggiornata.

/*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. Fonti utilizzate:

Model-View-ViewModel

Un semplice esempio MVVM

L'esempio MVVM C # WPF più semplice al mondo

Il pattern MVVM