Upload
others
View
20
Download
0
Embed Size (px)
Citation preview
1
Model-View-ViewModel (MVVM)Grundlagen und Einsatz des GUI-Architekturmusters
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, [email protected]
Besuchen Sie unsere Akademie!http://Akademie.W3L.de