Teknologi for et bedre samfunn 1

Sirar Salih og Aslak Eide

Hvordan strukturere en WPF applikasjon ved hjelp av Model-View-ViewModel (MVVM)

Teknologi for et bedre samfunn

1. Litt om oss og hva vi jobber med2. Model-View-ViewModel patternet3. DataBinding og Commands4. MVVM Light Toolkit rammeverket5. EventToCommand, RelayCommand, Messaging6. Demo

2

Innhold

Teknologi for et bedre samfunn 3

SINTEF

Teknologi for et bedre samfunn

• BRIDGE - Bridging resources and agencies in large-scale emergency management

• Nye løsninger for samhandling under ulykker

• 14 partnere fra 7 land. Tidsramme på 4 år

• Finansiert av EU 7th Framework Programme

4

BRIDGE prosjektet

Teknologi for et bedre samfunn 5

Hva vi jobber med for tiden • Utvikler et kartbasert system som understøtter felles

situasjonsforståelse på tvers av nødetatene ved å gi en oppdatert oversikt over hendelsen.

Teknologi for et bedre samfunn

• UI rammeverk for å utvikle "rich, interactive client applications"

• Extensible Application Markup Language (XAML)

6

Windows Presentation Foundation (WPF)

Teknologi for et bedre samfunn

• Utbredt pattern for å understøtte: • Maintainability• Testability• Blendability

• Basert på Model-View-Controller (MVC)

7

Model-View-ViewModel (MVVM)

Teknologi for et bedre samfunn 8

View

ViewModel

Model

User interface

The model of the view

Domain model

Teknologi for et bedre samfunn

• For å etablere forbindelse mellom UI og business logic.• Gjør det mulig for Viewet å binde til properties i ViewModel.• Kontekst for binding settes i DataContext• Forbindelsen kan gå begge veier.

9

DataBinding

Teknologi for et bedre samfunn

• Gjør det mulig å kalle en metode i ViewModel fra Viewet • Eksponerer en metode i ViewModel i form av en property • Kan være "DataBound" fordi den er en property• Implementasjon av ICommand interfacet

10

Commands

Teknologi for et bedre samfunn 11

View

ViewModel

DataBinding

Model

Commands

Teknologi for et bedre samfunn 12

MVVM rammeverk

Carbon MVVM

Cocktail

MVVM foundationCinch

MVVM Cross

Ocean

Core MVVM

Onyx

GoldlightReactive UI Catel

Jounce

Caliburn

Xomega

Prism

MVVM Light

Teknologi for et bedre samfunn 13

MVVM Light Toolkit

• Breaking the monotony• Small and simple• Essentials library• Extras library • Project templates• Code snippets

Teknologi for et bedre samfunn

• Interaction triggers gjør det mulig å definere en trigger for hvilken som helst event og binde denne til en Command

• EventToCommand er ekstrafunksjonalitet fra MVVM Light Toolkit som lar deg sende med EventArgs til ViewModel:

14

EventToCommand

Teknologi for et bedre samfunn

• Alternativ til Command og RoutedCommand• Implementer ICommand interfacet• RelayCommand relayer Execute til en egendefinert metode • Man slipper å lage en egen klasse for hver custom Command

15

RelayCommand

Teknologi for et bedre samfunn 16

Messaging

View

ViewModelView

ViewModel

View

ViewModelMessages

Messages

Teknologi for et bedre samfunn 17

Messaging

Teknologi for et bedre samfunn

• Utility klasse som alle ViewModels arver fra. • Minsker mengden kode man må skrive om igjen.• RaisePropertyChanged metode +++

18

ViewModelBase

Teknologi for et bedre samfunn

• Nyttig når man jobber på multi-threaded WPF applikasjoner. • Gjør det mulig å kalle en metode på UI tråden fra en annen tråd.

19

DispatcherHelper

Teknologi for et bedre samfunn 20

Demo