Matteo PaganiMicrosoft MVP | Nokia Developer ChampionSoftware Engineer @ Funambol

Mail: info@qmatteoq.comTwitter: @qmatteoqBlog: www.qmatteoq.com [IT] – wp.qmatteoq.com [EN]

MVVM e Caliburn Micro

Il pattern MVVM

Toolkit vs framework

Caliburn Micro

Agenda

Il pattern MVVM

Il code behind• Nell’approccio tradizionale, 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

Model-View-ViewModel• E’ un pattern specifico per il mondo XAML• Aiuta a separare logica e interfaccia utente,

aiutando a mantenere leggibilità, testabilità, manutenibilità e «blendability»

• Sfrutta le caratteristiche principali del linguaggio, come DataContext e binding

ModelServizi e entitàRecuperano i dati necessari all’applicazione in maniera “grezza”, senza avere dipendenze dalle modalità di presentazione

Alcuni esempi• La definizione delle entità base• Interazione con un database• Interazione con un servizio REST o WCF• Download di file dalla rete

ViewL’interfaccia grafica dell’applicazioneContiene tutti i controlli, le animazioni e gli effetti visuali che definiscono la UI dell’applicazione.

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

Code behindNon deve contenere logica, ma al massimo codice necessario per gestire elementi dell’interfaccia (ad esempio, animazioni).

View ModelE’ il punto di contatto tra View e ModelSi occupa di prendere i dati grezzi esposti dal Model e di elaborarli per essere presentati dalla View.

BindingConsente di creare un canale bidirezionale di comunicazione tra oggetti definiti nel codice e controlli presenti nello XAML.

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

Model-View-ViewModel

Vie

w

Vie

wM

odel

Model

UI events

Model change events

Property

changed

events

ViewModel data

Update

Read

INotifyPropertyChanged• E’ l’interfaccia che deve essere implementata

da qualsiasi classe che interagisce con la View• 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

INotifyPropertyChangedCodeprivate string name;public string Name{ get { return name; } set { name = value; NotifyOfPropertyChange(() => Name); }}

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

Command• I command sono funzioni che possono essere

associate alle azioni, 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

Codeprivate 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

Toolkit vs framework

Toolkit vs framework• MVVM è un pattern, di conseguenza le librerie

disponibili non rappresentano MVVM, ma aiutano a implementare MVVM

• I toolkit offrono gli strumenti base per implementare il pattern, indipendentemente dalla piattaforma

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

MVVM Light• Toolkit di Laurent Bugnion (

http://mvvmlight.codeplex.com/)• Compatibile con tutte le tecnologie XAML / C#• Feature:• Classe base per i ViewModel con supporto a INotifyPropertyChanged• Classe base per implementare i Command• Messenger per scambiare messaggi tra i ViewModel

Caliburn Micro• 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 alle collezioni• Sistema di dependency injection integrato

Naming convention• 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 = nome di una proprietà nel ViewModel per

il binding• x:Name di un controllo = nome di un metodo nel ViewModel per i

command

• E’ supportato comunque l’approccio tradizionale

Il primo progettoDemo

Alcune chicche

Ciclo di vita della pagina• 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 parametrinavigationService.UriFor<DetailPageViewModel>().WithParam(x => x.SelectedId, 5).Navigate();

Ciclo di vitaDemo

Tombstoning• Si crea una classe che eredita da

StorageHandler<T>, dove T è la tipologia di ViewModel

• Si implementa il metodo Configure(), specificando quale proprietà del ViewModel si vuole mantenere in caso di sospensione e dove (storage temporaneo o storage persistente).

TombstoningDemo

Azioni• Tramite la naming convention è possibile

associare un metodo all’evento di default di un controllo (ad esempio, Tap per i Button)

• Sintassi speciale per collegare un metodo a qualsiasi evento

<Button micro:Message.Attach="[Event DoubleTap] = [Action ShowMessage]" />

AzioniDemo

Per approfondire• Tutorial in inglese: http://

s.qmatteoq.com/CaliburnTutorial• Tutorial in italiano: http://

s.qmatteoq.com/CaliburnTutorialIT• Sito ufficiale con la documentazione:

http://caliburnmicro.codeplex.com

Matteo Pagani

http://www.qmatteoq.com [IT]

http://wp.qmatteoq.com [EN]

info@qmatteoq.com

Twitter: @qmatteoq

Grazie!