Il pattern mvvm come strutturare al meglio il vostro progetto

ITALIAN WEBINAR #6

IL PATTERN MVVM
Matteo Pagani
Nokia Developer Champion
Microsoft MVP – Windows Phone Development
Software Engineer @ Funambol

AGENDA
• Il pattern MVVM
• Toolkit e framework
• Caliburn Micro

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

IL PATTERN
MVVM

CODE BEHIND
•
•

•
•

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


MODEL-VIEW-VIEWMODEL
•
•
•

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
•

•

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


VIEW
•
•

•
•

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 MODEL
•
•
•
•

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.


INOTIFYPROPERTYCHANGED
•
•
•

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; }

After
private 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 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;
Il codice da
public ICommand PinToStart
eseguire
{
get
{
return _pinToStart
?? (_pinToStart = new RelayCommand(
() => taskService.PinToStart(CurrentItem),
() => canPin));
Il comando è
}
abilitato?
}
XAML
<Button Content="Pin to start" Command="{Binding Path=PinToStart}" />

MVVM
Demo


TOOLKIT E
FRAMEWORK


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


MVVM LIGHT
•
•

•

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


LE GRANDI DOMANDE
•

•
•

Come gestisco la navigazione da una pagina
all’altra?
Come gestisco il tombstoning?
Come gestisco i deep link?

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 alla gestione di liste


CALIBURN MICRO
•

•

•

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
Demo


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 parametri


CALIBURN E IL
CICLO DI VITA
DELLA PAGINA
Demo


Grazie!
Blog:
http://www.qmatteoq.com
http://wp.qmatteoq.com
Twitter: @qmatteoq
Mail: info@qmatteoq.com
Materiale su http://sdrv.ms/197qTIa


Il pattern mvvm come strutturare al meglio il vostro progetto

More Related Content

Viewers also liked (11)

Similar to Il pattern mvvm come strutturare al meglio il vostro progetto (20)

More from Microsoft Mobile Developer (20)

Il pattern mvvm come strutturare al meglio il vostro progetto