WPF MVVM Toolkit

Alessandro AndreosèLaureando in Ingegneria Informatica

Agevolare lo sviluppo di applicazioni desktop◦ MVVM

◦ UI Composition

◦ Separazione ruoli

Designer

Developer

Separazione dei ruoli tra Designer e Developer nello sviluppo di applicazioni Desktop: uso di WPF e del pattern Model-View-ViewModel

Interfaccia utente ◦ Elevata user experience

WPF

◦ Modulare

UI Composition

◦ Testabile e manutenibile

MVVM

Applicazione Desktop

Ambiente Client e Server Microsoft◦ IIS 7.0

◦ Framework .NET 3.5 SP1

◦ SQL Server 2008

MVVM◦ MVVM Light Toolkit

di Laurent Bugnion

◦ Cinch

di Sasha Barber

◦ Goldlight

di Peter O'Hanlon

◦ ...

MVVM e UI Composition◦ Prism

del Team di Patterns and Practices di Microsoft

Tecnologia di «Presentazione»

Disponibile da Novembre 2006 (Fx 3.0)

Andrà a sostituire la tecnologia GDI/Winforms◦ GDI(circa 1985 Windows 3.0)

DirectX◦ Sfrutta l'hardware grafico

WF PDFWF

GDI+WMP

Direct 3D

WPF

Interfaccia grafica

X X

Lettura documentia video X X

Stampa di documenti X X

Immagini X X

Media X X

Grafica 2D X X

Grafica 3D X X

XAML◦ Linguaggio di Markup◦ 1 elemento, 1 oggetto .NET ◦ Il nome del tag è il nome della classe

Command◦ Associare un comando ad un evento◦ 1 evento, 1 comando◦ Tanti eventi, 1 comando

Data Binding ◦ Collegare un dato direttamente all'interfaccia utente◦ INotifyPropertyChanged

Designer

Expression Blend

…<Button Background=“Red”>

No

</Button>

…

XAML

Developer

Visual Studio

Separa interfaccia utente da implementazione◦ DataBinding◦ Command◦ Minimizzare (annullare) codice nel code behind

Variante di MVC◦ MVVM ideato nel ottobre 2005 da John Grossman◦ Utilizzato in Microsoft per sviluppare Expression

Blend

Non c'è contatto tra view e model◦ Il ViewModel è sempre in mezzo

Model – dominio applicativo View – UI ViewModel – Model of a View, astrazione della view

View◦ UI

XAML Poco (o nulla) Code Behind

ViewModel◦ Model of a View

Astrazione della View Specializzazione del Model 1 user story, 1 ViewModel

Model◦ Dominio Applicativo

Person

Svilippo di un Toolkit per agevolare la realizzazione di applicazioni desktop◦ Basato su MVVM

DataBinding

Command

Broker

◦ Basato su UI Composition

Module

Region

Shell

Sì MVVM

No MVVM

la finestra View1 ha un bottone, ◦ al clic bisogna scrivere in una TextBox "Bottone

premuto"

No MVVM

Sì MVVM

una finestra, View1 ha un bottone◦ Al clic si deve visualizzare un'altra finestra, View2

No MVVM

VM1 conosce VM2VM1 crea VM2 e non View2

Attore terzo

◦ In mezzo tra 2 attori (VM1, VM2)

◦ Rispecchia il pattern evento – sottoscrizione

Azioni

◦ Dispatch messaggio

◦ Sottoscrizione messaggio

◦ Cancellazione sottoscrizione

VM1 richiede View2

Il brokercrea VM2

VM2 visualizza View2

VM◦ Diaccoppia View e Model

Command◦ Disaccoppia Evento e Operazione da eseguire◦ Testabilità dell'operazione

DataBinding◦ Disaccoppia UI e Dati

Command + DataBinding◦ ViewModel indipendente dalla View

Broker◦ Disaccoppia ViewModel

Modulo◦ Parte di applicazione

◦ Generalmente visuale

Region◦ Contiene moduli

visuali

Shell◦ Finestra principale

◦ 1 sola shell

◦ contiene 1 o più region

SHELL

REGION 1 REGION 2

REGION 3

Modulo 5

Modulo 4

Modulo 3

Modulo 2

Modulo 1

Modulo 6

Modulo 7Modulo 8 Modulo 9

nella finestra principale (Shell)◦ si preme un bottone

◦ si deve inserire nella shell una view (View1)

creazione modulologica inserimento modulo

creazione modulologica inserimento modulo

Shell

View1

REGION

Container di IoC

…

View1

…

View1

Show View1

RegionManager

No UI Composition

Sì UI Composition

Broker◦ Punto di contatto tra MVVM e UI Composition

◦ Disaccoppia ViewModel

RegionManager◦ Disaccoppia Shell da Modulo

◦ Module = View + ViewModel

IoC◦ Disaccoppia creazione oggetti dal resto

dell'applicazione

Sviluppo di un Toolkit◦ Agevolare la realizzazione di applicazioni desktop

WPF + MVVM

User Experience

UI Composition

Applicazione modulare

La modifica di un modulo non influsce sul resto dell'applicazione

Gestione palestre◦ Assegnazione turni

Società

Palestra

Custode

◦ Pagamento utilizzo palestra

Società

Custode

DB Server DC Web Server

Client Client Client

Client

WPF è giovane (11/2006)◦ Pochi controlli di terze parti◦ Designer molto recente

Expression Blend 2 SP1 (08/2008)

MVVM è giovane (10/2005)◦ Molte soluzioni diverse agli stessi problemi

WPF, MVVM e UI Composition◦ I vantaggi sono superiori agli svantaggi

WPF vs WinForms◦ User Experience

DataBinding, Template, Style, Attached Behaviors Separazione dei ruoli Designer, Developer semplificata

◦ Microsoft non sviluppa più Windows Forms

Toolkit◦ Nuove region

◦ Sistema di validazione e focus

◦ Undo & Redo

Applicazione (core già in produzione)◦ Terminare il porting in produzione

◦ Bug Fixing

DB◦ 30 tabelle

Software◦ 18 progetti VisualStudio

◦ 500+ Unit Test

◦ 16.000+ righe di codice