il pattern mvvm come strutturare al meglio il vostro progetto
DESCRIPTION
Quando ci si trova nella necessità di sviluppare applicazioni per Microsoft Windows Phone più complesse, l'approccio tradizionale mostra qualche limite: non c'è una separazione tra i vari strati dell'applicazione e il codice è più difficile da testare e da mantenere. Questo webinar vi mostrerà le basi del pattern Model-View-ViewModel (MVVM), che offre un approccio più strutturato, in grado di separare la parte di logica dall'interfaccia grafica. / When you need to develop complex applications for Microsoft Windows Phone, the traditional approach shows some limitations. This webinar will show you the basics of Model-View-ViewModel (MVVM), which offers a more structured approach.TRANSCRIPT
![Page 1: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/1.jpg)
IL PATTERN MVVM
Matteo Pagani
Nokia Developer Champion
Microsoft MVP – Windows Phone Development
Software Engineer @ Funambol
ITALIAN WEBINAR #6
![Page 2: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/2.jpg)
AGENDA
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
• Il pattern MVVM • Toolkit e framework • Caliburn Micro
![Page 3: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/3.jpg)
IL PATTERN MVVM
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 4: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/4.jpg)
• 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
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 5: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/5.jpg)
• 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
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 6: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/6.jpg)
• 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
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 7: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/7.jpg)
• 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
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 8: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/8.jpg)
• 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
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 9: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/9.jpg)
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 10: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/10.jpg)
• 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
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 11: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/11.jpg)
Before
public string Name { get; set; }
INOTIFYPROPERTYCHANGED
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
After
private string name;
public string Name
{
get { return name; }
set
{
name = value;
NotifyOfPropertyChange(() => Name);
}
}
XAML
<TextBlock Text="{Binding Path=Name}" />
![Page 12: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/12.jpg)
• 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
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 13: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/13.jpg)
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
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
Il codice da eseguire
Il comando è abilitato?
![Page 14: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/14.jpg)
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 15: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/15.jpg)
MVVM Demo
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 16: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/16.jpg)
TOOLKIT E FRAMEWORK
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 17: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/17.jpg)
• 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
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 18: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/18.jpg)
• 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
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 19: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/19.jpg)
• Come gestisco la navigazione da una pagina all’altra?
• Come gestisco il tombstoning?
• Come gestisco i deep link?
LE GRANDI DOMANDE
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 20: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/20.jpg)
• 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
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 21: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/21.jpg)
• 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
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 22: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/22.jpg)
CALIBURN MICRO Demo
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 23: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/23.jpg)
• 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
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 24: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/24.jpg)
CALIBURN E IL CICLO DI VITA DELLA PAGINA Demo
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
![Page 25: Il pattern mvvm come strutturare al meglio il vostro progetto](https://reader034.vdocuments.us/reader034/viewer/2022042510/554e0495b4c90518298b4c03/html5/thumbnails/25.jpg)
© 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved.
Grazie!
Blog:
http://www.qmatteoq.com
http://wp.qmatteoq.com
Twitter: @qmatteoq
Mail: [email protected]
Materiale su http://sdrv.ms/197qTIa