Informazioni su MVVM

Completato

Le app Xamarin.Forms che non usano MVVM contengono in genere una maggiore quantità di codice nei file code-behind. I file code-behind sono quelli che seguono questo schema: {something}.xaml.cs. La maggior parte del codice incluso nel file code-behind generalmente controlla il comportamento dell'interfaccia utente. Il comportamento dell'interfaccia utente può includere ciò che accade all'interfaccia utente, ad esempio la modifica di un colore o del testo. E può includere ciò che accade a causa dell'interfaccia utente, inclusi i gestori dei clic sui pulsanti.

Uno dei problemi di questo approccio è costituito dal fatto che la scrittura di unit test per i file code-behind è difficoltosa. I file code-behind in un'app Xamarin.Forms derivano da un tipo di framework Xamarin.Forms. Spesso presuppongono uno stato dell'applicazione creato tramite l'analisi XAML oppure creato da altre pagine. La gestione di queste condizioni è difficile in uno strumento di esecuzione di unit test che potrebbe anche non essere eseguito in un dispositivo mobile ed è tanto più difficile con un'interfaccia utente. Gli unit test sono quindi raramente in grado di testare i comportamenti dell'interfaccia utente in questi file.

Se usato correttamente, lo schema MVVM risolve questi problemi spostando la maggior parte della logica di comportamento dell'interfaccia utente in classi che supportano gli unit test denominate modelli di visualizzazione. Lo schema MVVM viene usato principalmente con i framework che supportano il data binding. Infatti in Xamarin.Forms è possibile associare i dati di ogni elemento dell'interfaccia utente a un modello di visualizzazione ed eliminare del tutto o quasi il codice in una visualizzazione o un code-behind.

Quali sono le parti di un'applicazione MVVM?

Anche se il modello di visualizzazione è la parte più peculiare dello schema MVVM, esso definisce anche una parte denominata "modello" e una denominata "visualizzazione". Le definizioni di queste parti sono coerenti con altri schemi comuni, ad esempio Model-View-Controller (MVC).

Che cos'è un modello?

In un'applicazione MVVM il modello si riferisce ai dati business e alla logica di business. Il modello non riguarda il modo in cui le app vengono presentate all'utente.

Per definire il codice da inserire nel modello può essere utile trasferire l'applicazione dall'app per dispositivi mobili al Web o a un programma della riga di comando e usare lo stesso modello in tutti e tre i casi poiché non ha nulla a che vedere con la presentazione all'utente.

Nell'applicazione per le Risorse umane dello scenario illustrato, il modello può includere una classe Employee e una classe Department che contengono i dati e la logica relativi a queste entità. Il modello può includere anche elementi come una classe EmployeeRepository che contiene la logica di persistenza. Altri schemi progettuali del software prenderanno in considerazioni elementi come i repository come elementi separati dal modello. Nel contesto del modello MVVM, tuttavia, spesso si fa riferimento a qualsiasi logica di business o dati business come parte del modello.

Di seguito sono riportati due esempi di un modello in C#:

public class Employee
{
    public int Id { get; }
    public string Name { get; set; }
    public Employee Supervisor { get; set; }
    public DateTime HireDate { get; set; }
    public void ClockIn() { ... }
}

public class EmployeeRepository
{
    public IList<Employee> QueryEmployees() { ... }
    ...
}

Che cos'è una visualizzazione?

Il codice della visualizzazione controlla gli elementi che interagiscono direttamente con l'utente. In genere ciò include la modifica dei pixel sullo schermo e la ricezione di clic e tocchi. Gli elementi della visualizzazione includono controlli quali pulsanti e campi di immissione, nonché qualsiasi altro elemento puramente visivo, ad esempio temi, stili e tipi di carattere.

Esempi di visualizzazioni che includono controlli (un pulsante), colori/temi (una griglia di quadrati colorati) e tipi di carattere (uno carattere calligrafico con il testo

In molte app Xamarin.Forms non è necessario scrivere manualmente il codice C# per le visualizzazioni. Al contrario, le visualizzazioni vengono spesso definite da file con estensione xaml. Esistono, naturalmente, situazioni in cui è richiesto un controllo utente personalizzato. In questi casi è possibile creare un codice di visualizzazione personalizzato. Vedere il modulo sul renderer di Xamarin.Forms per creare controlli Xamarin.Forms personalizzati.

Che cos'è un modello di visualizzazione?

Il modello di visualizzazione è l'intermediario tra la logica di business e le visualizzazioni.

Diagramma che mostra un elemento ViewModel come intermediario tra un oggetto Model e un oggetto View.

Prima di approfondire l'argomento, si prenda in esame l'utilità di un modello di visualizzazione. Si consideri nell'applicazione per le Risorse umane una pagina modale che visualizza i giorni di ferie disponibili di un dipendente. Si vuole che sullo schermo venga visualizzato il saldo delle vacanze come stringa nel formato: "2 settimane, 3 giorni, 4 ore". La logica di business calcola tuttavia lo stesso valore come 13,5 giorni. La struttura avrà un aspetto simile al seguente:

  • Modello: la classe Employee, che include un metodo:

    public decimal GetVacationBalanceInDays()
    {
        //Some math that calculates current vacation balance.
        ...
    }
    
  • Modello di visualizzazione: una classe EmployeeViewModel con una proprietà come la seguente:

    public class EmployeeViewModel
    {
        private Employee _model;
        ...
        public string FormattedVacationBalance
        {
            get
            {
                decimal vacationBalance = _model.GetVacationBalanceInDays();
                ... // Some logic to format and return the string
            }
        }
    }
    
  • Visualizzazione: una pagina XAML contenente una singola etichetta e un pulsante di chiusura. L'etichetta ha un'associazione alla proprietà del modello di visualizzazione:

    <Label Text="{Binding FormattedVacationBalance}" />
    

    Sarà quindi sufficiente che l'elemento BindingContext per la pagina sia impostato su un'istanza di EmployeeViewModel.

In questo esempio il modello crea la logica di business. La logica non è associata a Xamarin.Forms o dispositivi mobili, né alla visualizzazione di oggetti visivi. La stessa logica potrebbe essere usata per un'applicazione di telefonia. La visualizzazione è totalmente indipendente dalla logica di business. Le etichette dispongono i pixel sullo schermo, ma non importa se si visualizza il saldo delle ferie o una stringa casuale. Il modello di visualizzazione dispone di poche informazioni su entrambi in modo da poter fungere da intermediario.

L'aspetto interessante del modello di visualizzazione è il modo in cui riesce a essere un intermediario: espone le proprietà a cui può essere associata una visualizzazione. Le proprietà pubbliche sono l'unico modo in cui un modello di visualizzazione mette a disposizione i dati. Ciò spiega quindi perché viene definito "modello di visualizzazione". Il "modello" in MVVM rappresenta la struttura, i dati e la logica dei processi aziendali e il "modello di visualizzazione" rappresenta la struttura, i dati e la logica richiesti dalla visualizzazione.