1

Model-View-ViewModel (MVVM)Grundlagen und Einsatz des GUI-Architekturmusters

W3L AGinfo@W3L.de

2011

2

AgendaMotivation

Architekturmuster

MVVM-PatternAufbau & KomponentenTechnische Grundlagen

DatabindingICommand

Entwicklung und FrameworksPraxisbeispiel (WP7)EinsatzgebieteAnti-Pattern

Fazit

3

ArchitekturmusterWas sind Architekturmuster?

Ein Architekturmuster beschreibt die grundlegende Struktur und Organisation einer AnwendungArchitekturmuster werden in unterschiedliche Kategorien eingeteilt Interaktive Systeme: Umgang mit Benutzereingaben

Model-View-Controller (MVC)Model-View-Presenter (MVP)Model-View-ViewModel (MVVM)

4

Architekturmuster – Schwerpunkt GUIModel-View-Controller Vorteile

Aufteilung von ZuständigkeitenFeste Kommunikationswege

ProblemeDie View kennt das ModelController sind schwer austauschbarUnit-Tests sind kritisch[~] Schwergewichtig

Controller

ViewModel

*

1

5

Architekturmuster – Schwerpunkt GUIModel-View-Presenter Verbesserung

Views sind passiv,keinerlei steuernde LogikBessere TestbarkeitPräsentationslogik im Presenter

ProblemeVeränderungen in der View haben i.d.R. Auswirkungen auf den Presenter (enge Kopplung)Schwergewichtige Presenter

View

Presenter

Model

1

1

6

MODEL-VIEW-VIEWMODELMögliche Lösung der Probleme von MVC & MVP

7

Model-View-ViewModelModel-View-ViewModel Vorteile gegenüber MVC & MVP

Schwache Kopplung zwischen View und View-ModelCommand-basierte InteraktionTestbarkeitAustauschbare Views und View-Models

ProblemeSpeziell für Silverlight & WPFSchwierigkeiten mit Databinding

View

ViewModel

Model

*

1

8

Model-View-ViewModelMVVM-Triade

Model – die DatenhaltungRepräsentiert die DatenAbstrahiert von der Datenquelle (WCF-Dienst; RIA-Dienst, REST/JSON-Quelle,…)Kann Validierungsmechanismen beinhalten

View – das UserinterfaceRealisiert das Look & FeelStellt die Informationen darKommuniziert mit dem ViewModel bei VeränderungenUmsetzung mit XAML und Code-Behind

ViewModel – die Brücke zwischen View und ModelBeinhaltet die PräsentationslogikInformiert die View über Veränderung der Daten (INotifyPropertyChanged)Reagiert auf Benutzeraktionen (ICommand)

9

Model-View-ViewModelSeparation of Concerns

Verhalten der Eingabe-Elemente

DarstellungAktionen

Aufbereitung der Daten

Steuerung der GUI

Validierung

Repräsentiert die Daten

View ViewModel Model<<data-binding>> <<data-access>>

10

MVVM - GrundlagenGrundlagen von MVVM: Databinding

Verbindung zwischen View und ViewModelDie View referenziert das ViewModelDies erfolgt über die DataContext-Eigenschaft von der View

this.DataContext = new MainViewModel();Variante 1

<phone:PhoneApplicationPage.DataContext><viewModels:MainViewModel />

</phone:PhoneApplicationPage.DataContext>

Variante 2

this.DataContext = ViewModelLocator.Find("MainViewModel");Variante 3

11

MVVM - GrundlagenGrundlagen von MVVM: Databinding

In Silverlight und WPF wird ein Databinding-Konzept angebotenDurch Databinding können Objekte an GUI-Elemente gebunden werden

BindingPath

Gibt den Namen der zu bindenden Property anMode

OneWay: View Objekt-PropertyTwoWay: View Objekt-Property

<TextBox Text="{Binding Path=UserName, Mode=TwoWay}"

Height="25" TextWrapping="NoWrap" Margin="1" />

12

MVVM - GrundlagenGrundlagen von MVVM: Änderungsbenachrichtigung

Einsatz des Observer-MustersDas ViewModel stellt dabei das „Subject“ darIn .NET wird hierfür das INotifyPropertyChanged-Interface implementiert

public class LoginViewModel : INotifyPropertyChanged{

public ObservableCollection<UserViewModel> Users;

public event PropertyChangedEventHandler PropertyChanged;private void NotifyPropertyChanged(string propertyName) {

if (PropertyChanged != null)PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

}

private String _Username; public String Username {

get { return _Username; }set {

_Username = value;NotifyPropertyChanged("Username");

}}

}

13

MVVM - GrundlagenGrundlagen von MVVM: Command-Binding

Über die ICommand-Schnittstelle ist es möglich, Aktion zu bindenMögliche Implementierung:

public class Command : ICommand /* vereinfacht */{

private readonly Action _handler; private bool _isEnabled;public event EventHandler CanExecuteChanged;

public Command(Action handler){

_handler = handler;_isEnabled = true;

}

public bool CanExecute(object parameter) {return _isEnabled;

}

public void Execute(object parameter) {_handler();

} }

14

MVVM - GrundlagenGrundlagen von MVVM: Command-Binding

Einsatzmöglichkeiten von ICommand

public ICommand LoginButton { get; set; }public LoginViewModel(){

LoginButton = new Command(OnClickLoginButton);}

private void OnClickLoginButton(){

//Do Something}

<Button Command="{Binding LoginCommand}" Content="Login"/>

//Eine Alternative mit Code-Behind (WP7)<Button Content="Login" Click="Button_Click"/>

private void Button_Click(object sender, RoutedEventArgs e){

_viewModel.LoginButton.Execute(null);}

Command-Bindingin der View

Ereignis-Senkeim ViewModel

15

Model-View-ViewModelEntwicklung von MVVM

UrsprungPresentation-Model Design-Pattern von Martin Fowler (2004)

Einsatz in WPF und SilverlightJohn Gossman spricht erstmals vom MVVM-Pattern (2005)

Erste Anleitung für eine MVVM-basierte ArchitekturPrism: Patterns for Building Composite Applications (2008)

MVVM-FrameworksMVVM Light Toolkit (Laurent Bugnion)

Caliburn Micro (Rob Eisenberg)

MVVM Foundation (J. Smith)

16

Model-View-ViewModel

DEMO

17

MVVM - EinsatzgebieteEinsatz von MVVM

Speziell für WPF-basierten TechnikenSilverlight; Silverlight for Windows Phone; Window Presentation Foundation

Abhängig vom Databinding-KonzeptDataContext (Property-Binding)Command-Binding (DelegateCommand)Event-basierten Benachrichtigung

Model-View-ViewModel mit anderen Technologien?Presentation-Model-Pattern + Observer-PatternDie Caliburn-Gruppe diskutiert zur Zeit über eine Implementierung des MVVM-Musters mit Java-Script und HTML5

18

FazitStärken von MVVM

Trennung von ZuständigkeitenPräsentation und Präsentations-Logik sind strikter getrennt

Die Darstellung kann unabhängig von der Geschäftslogik ausgetauscht werdenEinfache Unit Tests gegen das ViewModel möglichBessere Arbeitsaufteilung zwischen Entwickler und Designer möglich

Probleme von MVVMDatabinding stellt eine Blackbox darHöherer KommunikationsaufwandHöherer Entwicklungsaufwand

19

Literaturhttp://msdn.microsoft.com/en-us/magazine/dd419663.aspxhttp://martinfowler.com/eaaDev/PresentationModel.htmlhttp://msdn.microsoft.com/en-us/magazine/ff798279.aspxhttp://www.wpftutorial.net/MVVM.html

Vielen Dank!

In Zusammenarbeit mit der Fachhochschule Dortmund bieten wir

zwei Online-Studiengänge B.Sc. Web- und MedieninformatikB.Sc. Wirtschaftsinformatik

und 7 Weiterbildungen im IT-Bereich an.

W3L-AkademieInhouse-Schulungen

Wir bieten Inhouse-Schulungen und Beratung durch unsere IT-Experten und –Berater.

SchulungsthemenSoftwarearchitektur (OOD)

Requirements Engineering (OOA)

Nebenläufige & verteilte

Programmierung

Gerne konzipieren wir auch eine individuelle Schulung zu Ihren Fragestellungen.

Flexibel online lernen und studieren!

Sprechen Sie uns an!Tel. 0231/61 804-0, info@W3L.de

Besuchen Sie unsere Akademie!http://Akademie.W3L.de