Il pattern mvvm come strutturare al meglio il vostro progetto

IL PATTERN MVVM

Matteo Pagani

Nokia Developer Champion

Microsoft MVP – Windows Phone Development

Software Engineer @ Funambol

ITALIAN WEBINAR #6

AGENDA

© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.

• Il pattern MVVM • Toolkit e framework • Caliburn Micro

IL PATTERN MVVM


• Nell’approccio abituale, la logica viene scritta nel code behind, insieme al codice per gestire le interazioni con l’interfaccia grafica

• E’ difficile separare i due contesti e identificare i problemi

• E’ difficile scrivere test, perché richiederebbe la simulazione delle interazioni con l’interfaccia grafica

• E’ difficile per un designer lavorare sulla grafica senza conoscere i dettagli implementativi

CODE BEHIND


• Aiuta a separare logica e interfaccia utente, aiutando a mantenere leggibilità, testabilità, manutenibilità e «blendability»

• Prevede la separazione del codice in tre strati differenti

• Sfrutta le caratteristiche principali del linguaggio XAML, come DataContext e binding, per collegare i vari strati tra di loro

MODEL-VIEW-VIEWMODEL


• Rappresenta le entità e i servizi che recuperano i dati necessari all’applicazione in maniera “grezza”, senza avere dipendenze da come devono essere presentati

• Alcuni esempi:

• La definizione delle entità base

• Interazione con un database

• Interazione con un servizio REST o WCF

• Download di file dalla rete

MODEL


• Rappresenta l’interfaccia grafica dell’applicazione

• Contiene tutti i controlli, le animazioni e gli effetti visuali che definiscono la UI dell’applicazione.

• Il linguaggio di riferimento per le tecnologie Windows 8 e Windows Phone è lo XAML.

• Il code behind non deve contenere logica, ma al massimo codice necessario per gestire elementi dell’interfaccia (ad esempio, animazioni).

VIEW


• E’ il punto di contatto tra View e Model

• Si occupa di prendere i dati grezzi esposti dal Model e di elaborarli per essere presentati dalla View.

• Il ViewModel viene assegnato come DataContext della pagina: di conseguenza, tutti i controlli possono accedere alle proprietà del ViewModel

• Sfrutta il concetto di binding, per creare un canale bidirezionale di comunicazione tra le proprietà del ViewModel i e controlli presenti nello XAML.

VIEW MODEL



• E’ l’interfaccia che deve essere implementata da qualsiasi classe che interagisce con la View (nello specifico del pattern, dai ViewModel)

• Consente di propagare le modifiche fatte alle proprietà di un oggetto ai controlli nella View collegati

• ObservableCollection<T> è un tipo particolare di collezione che implementa INotifyPropertyChanged

INOTIFYPROPERTYCHANGED


Before

public string Name { get; set; }

INOTIFYPROPERTYCHANGED


After

private string name;

public string Name

{

get { return name; }

set

{

name = value;

NotifyOfPropertyChange(() => Name);

}

}

XAML

<TextBlock Text="{Binding Path=Name}" />

• I command sono funzioni che possono essere associate ad una azione su un controllo, grazie alla proprietà Command

• A differenza degli event handler, possono essere associati ad un controllo tramite binding

• Supportano la gestione dello stato del comando (abilitato o disabilitato), che si riflette in automatico sullo stato del controllo

COMMAND


Code

private ICommand _pinToStart;

public ICommand PinToStart

{

get

{

return _pinToStart

?? (_pinToStart = new RelayCommand(

() => taskService.PinToStart(CurrentItem),

() => canPin));

}

}

XAML

<Button Content="Pin to start" Command="{Binding Path=PinToStart}" />

COMMAND


Il codice da eseguire

Il comando è abilitato?


MVVM Demo


TOOLKIT E FRAMEWORK


• MVVM è un pattern, non una libreria

• Le librerie disponibili non rappresentano MVVM, ma aiutano a implementare MVVM

• I toolkit offrono gli strumenti base per implementare il pattern e tendono ad essere indipendenti dalla piattaforma

• I framework offrono strumenti per gestire con il pattern MVVM i casi d’uso più comuni della piattaforma

TOOLKIT E FRAMEWORK


• Toolkit di Laurent Bugnion (http://mvvmlight.codeplex.com/)

• Compatibile con tutte le tecnologie XAML / C# (Silverlight, WPF, Windows Phone, Windows Store app)

• Alcune caratteristiche:

• Classe base per i ViewModel con supporto a INotifyPropertyChanged

• Classe base per implementare i Command

• Messenger per scambiare messaggi tra i ViewModel

MVVM LIGHT


http://mvvmlight.codeplex.com/

http://mvvmlight.codeplex.com/

• Come gestisco la navigazione da una pagina all’altra?

• Come gestisco il tombstoning?

• Come gestisco i deep link?

LE GRANDI DOMANDE


• Framework ideato da Rob Eisenberg (http://caliburnmicro.codeplex.com)

• Compatibile con tutte le tecnologie XAML / C#

• Feature specifiche per Windows Phone:

• Supporto alla navigazione e al ciclo di vita delle pagine

• Supporto al tombstoning

• Supporto ai launcher & chooser

• Supporto alla gestione di liste

CALIBURN MICRO


http://caliburnmicro.codeplex.com/

http://caliburnmicro.codeplex.com/

• Supporta le naming convention: non è necessario effettuare il binding manualmente, è sufficiente seguire alcune convenzioni sui nomi delle proprietà o dei metodi

• Esempi:

• MainView -> MainViewModel per avere il binding tra View e ViewModel

• x:Name di un controllo TextBlock = nome di una proprietà nel ViewModel per il binding

• x:Name di un controllo Button = nome di un metodo nel ViewModel per il command da eseguire

• E’ supportato comunque l’approccio tradizionale

CALIBURN MICRO


CALIBURN MICRO Demo


• E’ sufficiente ereditare il ViewModel dalla classe Screen per avere accesso agli eventi:

• OnInitialize(), quando la pagina viene inizializzata la prima volta

• OnActivate(), quando la pagina viene visualizzata (OnNavigatedTo)

• OnDeactivate(), quando l’utente lascia la pagina corrente (OnNavigatedFrom)

• Approccio ViewModel first con supporto ai parametri

CICLO DI VITA DELLA PAGINA


CALIBURN E IL CICLO DI VITA DELLA PAGINA Demo



Grazie!

Blog:

http://www.qmatteoq.com

http://wp.qmatteoq.com

Twitter: @qmatteoq

Mail: [email protected]

Materiale su http://sdrv.ms/197qTIa

http://www.qmatteoq.com/

http://wp.qmatteoq.com/

mailto:[email protected]

http://sdrv.ms/197qTIa

http://sdrv.ms/197qTIa

Technology

Il pattern mvvm come strutturare al meglio il vostro progetto