12. Mär 2018
Lesedauer 14 Min.
MVVM mal ganz einfach
MVVM-Framework im Selbstbau
Warum man manchmal einfach von vorn anfangen muss.
Das Entwurfsmuster Model-View-ViewModel, besser bekannt unter seinem Kürzel MVVM, ist inzwischen auch außerhalb der .NET-Welt sehr beliebt. Besonders im Bereich der Cross-Plattform-Entwicklung, aber auch bei vielen JavaScript-Frameworks für Single-Page-Anwendungen, wie zum Beispiel Knockout.js, kann MVVM bei der Entwicklung einer guten Architektur helfen. Selbst für Android und Angular stehen nützliche Implementierungen für das MVVM-Pattern zur Verfügung.Warum fällt die Wahl ausgerechnet auf das MVVM-Pattern? Mit der Implementierung lässt sich der Code deutlich vereinheitlichen und kompakter gestalten. Dadurch lassen sich die Abhängigkeiten zwischen Benutzeroberfläche und Geschäftslogik verringern. MVVM erlaubt eine viel bessere Trennung von User-Interface-Design und User-Interface-Logik.
Frameworks
Neben dem eigentlichen Architekturmuster MVVM erfreuen sich auch etliche MVVM-Frameworks einer steigenden Beliebtheit bei den Entwicklern. Mithilfe eines MVVM-Frameworks lassen sich die typischen Fälle einer MVVM-Applikation wesentlich leichter und effektiver umsetzen als ohne ein solches Framework.Es gibt inzwischen eine Vielzahl von MVVM-Frameworks, die aber auch einen gewissen Overhead an Funktionalität und Umfang mit sich bringen, sodass Sie als Entwickler gezwungen sind, eventuell nicht nur das Entwurfsmuster MVVM zu erlernen, sondern auch noch die Besonderheiten des gewählten Frameworks erforschen müssen.So nützlich, praktisch und zeitsparend MVVM-Frameworks auch sind, so schwierig und ineffektiv können sie für Neueinsteiger sein. Das liegt in der Natur der Sache, denn Frameworks bringen eine Vielzahl von Funktionen mit, von denen niemand, wirklich niemand alle benötigt.Daher wird bisweilen durchaus der Anschein erweckt beziehungsweise vielfach beklagt, dass durch die verfügbaren Frameworks die Programmierung unnötig kompliziert würde. Der Umgang mit einem MVVM-Framework ist ohne eine entsprechende Lernkurve nicht zu bewältigen. Vielleicht inspiriert gerade dieser Umstand dazu, ein eigenes, übersichtliches MVVM-Framework zu programmieren und dabei die Zusammenhänge im Detail zu verstehen.Dieser Workshop versteht sich als reines Lernprojekt. Vorgestellt wird die Umsetzung von MVVM unabhängig von der UI-Technologie, die für WPF, UWP und Xamarin, aber auch Windows Forms gleichermaßen geeignet ist. Beeinflusst wurde das Lernprojekt von diversen anderen Frameworks wie etwa Caliburn, Cinch, MVVM Light Toolkit und Prism.Das MVVM-Pattern
In der Praxis geht es darum, Abhängigkeiten zwischen Benutzeroberfläche und Geschäftslogik zu verringern. MVVM reiht sich in die bekannten Architekturmuster MVC (Model-View-Controller), MVP (Model-View-Presenter) und Presentation Model ein. Diese dienen Entwicklern als Vorlage, um grafische Oberflächen standardisiert und strukturiert zu implementieren.Das Grundprinzip besteht darin, die drei Schichten Model, View und ViewModel zu trennen. Da im Gegensatz zu MVC die Referenzierung nicht innerhalb des Controllers zur View, sondern innerhalb der View zum ViewModel erfolgt, kann MVVM als eine Weiterentwicklung bewährter Architekturmuster betrachtet werden. Das MVVM-Pattern erlaubt einfach eine noch viel bessere Trennung von User-Interface-Design und der benötigten User-Interface-Logik.MVVM ermöglicht also eine besonders gute lose Kopplung zwischen View und View-Model. Um diesen Vorteil auch nutzen zu können, benötigt man eine gewisse Infrastruktur für die Umsetzung. Das Pattern besteht aus den folgenden drei Hauptkomponenten:- Model: das Datenmodell,
- View: die Sicht, also die Programmoberfläche (das UI-Design),
- ViewModel: das Schichtmodell, das die Logik für die Benutzeroberfläche enthält.
Das heißt, dass nur die übergeordnete Komponente die untergeordnete kennt. Somit kennt das Model weder das ViewModel noch die View.Die View ist für die Darstellung der Informationen zuständig und enthält die entsprechenden grafischen Elemente. Jeder View wird eine ViewModel-Klasse zugeordnet, welche die darzustellenden Daten und die Logik enthält. Somit werden praktisch alle Benutzereingaben mittels Binding an das ViewModel weitergeleitet und dort weiterverarbeitet.Im Model werden die Klassen zusammengefasst, die sich um das Laden und Speichern der Daten kümmern. Es enthält somit auch die Geschäftslogik. Insgesamt ergibt sich über das MVVM-Pattern eine strikte Trennung von Oberfläche und UI-Logik.Die grundsätzliche Struktur einer MVVM-Applikation sollte immer folgende Ansätze besitzen:
- Pro View wird ein Interface angelegt, in dem die Funktion definiert wird, die das ViewModel benötigt, um die View steuern zu können.
- Das ViewModel erhält zur Laufzeit ein Objekt, das dieses Interface implementiert.
- Jede View erhält zur Laufzeit eine Instanz seines ViewModels, um so auf die Daten zugreifen zu können.
Aufgabenstellung
Laut Lehrmeinung setzt sich ein Framework typischerweise aus einem Skelett beziehungsweise Rumpf und einer Bibliothek für verschiedene Lösungen eines bestimmten Lösungsbereichs zusammen.Grundsätzlich erfordert es bei der Entwicklung eines Frameworks, die benötigte Schnittmenge verschiedener Lösungen eines Bereichs zu ermitteln und separat zu modellieren. Für das Design eines Frameworks sind Verwendbarkeit, Stabilität und Erweiterbarkeit die maßgebenden Kriterien. Auch erfordert die benötigte Struktur einen gewissen Aufwand, da das ganze Framework später auf dieser Struktur basiert, daher sollte diese auf jeden Fall in der Entwicklungsphase eine sehr hohe Priorität haben. Änderungen und Anpassungen an der Struktur eines Frameworks sind im Nachhinein sehr schwierig und zeitaufwendig.Ein Framework ist immer eine Abstraktion dessen, wie Code organisiert ist und wie das gesamte Programm im Allgemeinen funktionieren sollte.Hierbei ist es unbedingt notwendig, sich mit den Abhängigkeiten innerhalb des Frameworks zu beschäftigen. Diese Abhängigkeiten entstehen, sobald ein Code-Bestandteil einen anderen verwendet. Die Bestandteile bezeichnen Methoden, Klassen und Namensräume, aber auch allgemein benutzte und benötigte Assemblies. Daher ist eine saubere Struktur beim Aufbau eines Frameworks unverzichtbar.Die Aufgabenstellung beziehungsweise das Grundkonzept eines MVVM-Frameworks besteht zunächst auf der Abgrenzung der Komponenten und deren Abhängigkeiten von MVVM. Bild 2 zeigt einmal klar die Verteilung der abgegrenzten Komponenten.
Dementsprechend können bei MVVM die Verarbeitungsprozesse getrennt betrachtet werden. Die View präsentiert das User Interface, realisiert das Look-and-feel, stellt Informationen dar und kommuniziert mit dem ViewModel bei Veränderungen.Das ViewModel ist die Brücke zwischen View und Model. Es enthält die Präsentationslogik, informiert die View über Veränderung der Daten und reagiert auf Benutzeraktionen.Das Model wiederum steht für die Datenhaltung. Es repräsentiert die Daten, abstrahiert von der Datenquelle und kann auch Validierungsmechanismen beinhalten.Dies sind also die ersten Grundgedanken zu den drei Teilen Model, View und ViewModel für das Framework. Da es sich um ein Lernprojekt handelt, wird das MVVM-Framework erst einmal nur auf das Wesentliche beschränkt. Es beinhaltet somit auch:
- keinen Code-behind,
- keine Event-Übertragungen,
- keine Data Templates,
- keine asynchrone Programmierung,
- keine Custom Controls und
- keine Libraries von Drittanbietern.
Damit ist das Prinzip der Modularisierung als Kriterium erfüllt und es werden die verschiedenen Zuständigkeiten voneinander getrennt. Daher können sich diese auch unabhängig voneinander ändern, was die Entwicklung eines Frameworks einfacher gestaltet.Somit ist also die genaue Aufgabenstellung für das Framework gegeben. Es soll eine kompakte und einfache, aber dennoch leistungsfähige Implementierung des MVVM-Patterns entstehen.Bild 4 zeigt eine grobe Strukturübersicht über die Elemente des Frameworks. Hieraus wiederum lässt sich ableiten, dass ein grundlegendes MVVM-Framework im Wesentlichen aus den folgenden zentralen Dingen besteht:
- Eine Klasse, die entweder ein Dependency Object ist oder INotifyPropertyChanged implementiert, um Data Binding vollständig zu unterstützen.
- Klassen und Methoden für die Funktionsunterstützung des zu realisierenden Frameworks.
- Das ViewModel kann wiederverwendet werden.
- Das ViewModel ist unabhängig vom User Interface.
- Die Code-behind-Datei für die Datenbindung stellt kein ViewModel dar.
- Sie implementieren INotifyPropertyChanged.
- Gegebenenfalls werden sie von Dependency Object abgeleitet.
- Sie implementieren eventuell Dependency Properties.
- Sie verwenden Observable Collections.
- Sie lösen im Setter PropertyChanged-Events aus.
- Sie laufen ausschließlich im User-Interface-Thread.
- Sie verarbeiten Events und ermöglichen das Validieren des User Interface.
- Sie lesen und schreiben im Model.
- Modellieren der Funktionalität der Anwendung unabhängig von einem konkreten User Interface.
- Sie verwenden keine User-Interface-Funktionalität.
- Die Model-Klassen lesen und schreiben Daten anhand eines Data Providers.
- Die Model-Klassen laufen je nach Aufgabenstellung eventuell asynchron.
- Sie können automatisiert getestet werden.
- Sie validieren die Daten im Gesamtkontext.
Inversion of Control (IoC)
Da das hier vorgestellte MVVM-Framework in einzelne Module aufgeteilt ist, lässt sich das Konzept von Inversion of Control, kurz IoC, für das Erstellen einer losen gekoppelten Architektur einsetzen.IoC bezeichnet ein Muster in der objektorientierten Programmierung, bei dem mehrfach verwendete Klassen einer Anwendung eine spezifische Klasse aufrufen. Durch dieses Konzept ergibt sich eine Umkehrung des Befehlsflusses. Das heißt, beim MVVM-Framework wartet der Code des Entwicklers darauf, aktiv zu werden.Inversion of Control stellt nur das Konzept bereit. Um die lose Kopplung zu erreichen, kann man auf Dependency Injection (DI) zurückgreifen. Dependency Injection (DI) ist eine Methode, um Abhängigkeiten, die ein Objekt besitzt, erst zur Laufzeit bereitzustellen. Dependency Injection bezieht sich auf das Übergeben der Abhängigkeiten einer Klasse oder Methode als Parameter, anstatt diese Beziehungen über Aufrufe von new oder static hart zu codieren. Demzufolge nutzt das MVVM-Framework folgende Entwurfsmuster:- MVVM,
- Command,
- Dependency Injection (DI),
- Inversion of Control (IoC),
- Separation of Concerns (SoC).
Die Anwendung
Neben dem Aufbau der Framework-Struktur soll die Anwendung unter WPF auch die Ansicht einer einfachen Datenstruktur ermöglichen. Um die Komplexität des Beispiels gering zu halten, bestehen die Daten aus einer Fahrzeugliste mit Marke, Typ und einer Kilowatt-Angabe. Des Weiteren soll die Ansicht folgende Bedingungen erfüllen.- Das Beispiel besteht aus einer Hauptansicht.
- In der Ansicht sollen die Daten in einer Tabelle (DataGrid) angezeigt werden.
- Des Weiteren sollen die Marke in einer ListBox und einer Combobox auswählbar beziehungsweise darstellbar sein. Der Eintrag beziehungsweise die Auswahl soll dann jeweils markiert werden.
- Über eine einfache Textbox und einen Button kann neuer Text hinzugefügt werden.
MVVM-Implementierung
Doch wie erstellt man überhaupt ein Framework für MVVM mit Visual Studio? Auch hierfür gibt es mehrere richtige Lösungen. Sie können mit einer komplett leeren Solution (Blank Solution) beginnen und alles von Hand erstellen, oder – hier habe ich mich ein wenig an MVVM Light orientiert – miteiner ersten einfachen Projektvorlage für die entsprechende UI-Technologie beginnen.Daher wird für das Lernprojekt als Erstes eine WPF-Vorlage erstellt, in der Sie das MVVM-Muster implementieren.Erstellen Sie deshalb eine neue Solution (Grundlage WPF-App) mit der in Bild 5 gezeigten Projektstruktur. Somit besteht die Solution aus einem Projekt MVVMFramework.Core, das die gemeinsame Codebasis für alle späteren Projekte enthält. Als Vereinfachung bei der Erstellung wird es als ausführbare WPF-App erstellt und enthält somit auch schon die Angabe der View auf Basis der Windows Presentation Foundation (WPF).
Als Erstes erstellen Sie das benötigte MVVM-Model. Das Model ist für das Laden und Speichern der Daten zuständig. Es enthält die Entitätsklasse PocoVehicle.cs aus Listing 1. Dieses einfache Plain Old CLR Object (POCO) dient dabei als Datenklasse.
Listing 1: Die Klasse PocoVehicle
<span class="hljs-keyword">namespace</span> <span class="hljs-title">MvvMFramework.Model</span> <br/>{ <br/> <span class="hljs-keyword">class</span> <span class="hljs-title">PocoVehicle</span> <br/> { <br/> <span class="hljs-keyword">public</span> <span class="hljs-keyword">string</span> Marke { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; } <br/> <span class="hljs-keyword">public</span> <span class="hljs-keyword">string</span> Typ { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; } <br/> <span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> Kilowatt { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; } <br/> } <br/>}
Da die Klassen- und Eigenschaftsbezeichnungen denen der Entitäten und Eigenschaften entsprechen, ist die Klasse auf das Interagieren mit der simulierten Datenbankschicht ausgelegt.Weiterhin verfügt das Model über die Klasse Vehicle.cs. Diese implementiert das Interface INotifyPropertyChanged sowie die Getter- und Setter-Methoden für Marke, Typ und Kilowatt. Listing 2 zeigt die vollständige Implementierung der Klasse Vehicle.
Listing 2: Die Klasse Vehicle
<span class="hljs-keyword">using</span> System.ComponentModel; <br/><br/><span class="hljs-keyword">namespace</span> <span class="hljs-title">MvvMFramework.Model</span> <br/>{ <br/> <span class="hljs-keyword">class</span> <span class="hljs-title">Vehicle</span> : <span class="hljs-title">INotifyPropertyChanged</span> <br/> { <br/> <span class="hljs-keyword">public</span> <span class="hljs-keyword">event</span> PropertyChangedEventHandler <br/> PropertyChanged; <br/><br/> <span class="hljs-keyword">string</span> _Marke; <br/> <span class="hljs-keyword">public</span> <span class="hljs-keyword">string</span> Marke <br/> { <br/> <span class="hljs-keyword">get</span> <br/> { <br/> <span class="hljs-keyword">return</span> _Marke; <br/> } <br/> <span class="hljs-keyword">set</span> <br/> { <br/> <span class="hljs-keyword">if</span> (_Marke != <span class="hljs-keyword">value</span>) <br/> { <br/> _Marke = <span class="hljs-keyword">value</span>; <br/> RaisePropertyChanged(<span class="hljs-string">"Marke"</span>); <br/> } <br/> } <br/> } <br/><br/> <span class="hljs-keyword">string</span> _Typ; <br/> <span class="hljs-keyword">public</span> <span class="hljs-keyword">string</span> Typ <br/> { <br/> <span class="hljs-keyword">get</span> <br/> { <br/> <span class="hljs-keyword">return</span> _Typ; <br/> } <br/> <span class="hljs-keyword">set</span> <br/> { <br/> <span class="hljs-keyword">if</span> (_Typ != <span class="hljs-keyword">value</span>) <br/> { <br/> _Typ = <span class="hljs-keyword">value</span>; <br/> RaisePropertyChanged(<span class="hljs-string">"Typ"</span>); <br/> } <br/> } <br/> } <br/><br/> <span class="hljs-keyword">int</span> _Kilowatt; <br/> <span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> Kilowatt <br/> { <br/> <span class="hljs-keyword">get</span> <br/> { <br/> <span class="hljs-keyword">return</span> _Kilowatt; <br/> } <br/> <span class="hljs-keyword">set</span> <br/> { <br/> <span class="hljs-keyword">if</span> (_Kilowatt != <span class="hljs-keyword">value</span>) <br/> { <br/> _Kilowatt = <span class="hljs-keyword">value</span>; <br/> RaisePropertyChanged(<span class="hljs-string">"Kilowatt"</span>); <br/> } <br/> } <br/> } <br/><br/> <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">RaisePropertyChanged</span>(<span class="hljs-params"><span class="hljs-keyword">string</span> prop</span>) </span><br/><span class="hljs-function"> </span>{ <br/> PropertyChanged?.Invoke(<span class="hljs-keyword">this</span>, <br/> <span class="hljs-keyword">new</span> PropertyChangedEventArgs(prop)); <br/> } <br/> } <br/>}
Als nächsten Zwischenschritt können Sie im Ordner DataAccess die Datenbankzugriffe für das Framework implementieren. In diesem Bereich modellieren Sie beispielsweise die benötigten Datenbank-Entitäten sowie den Datenzugriff auf eventuelle OR-Mapper. Bild 6 zeigt den grundsätzlichen Aufbau der Datenbankschicht.
Für das Beispiel wird eine simulierte Auflistung erstellt, die von der Klasse ObservableCollection<T> abgeleitet wird.Es handelt sich in diesem Fall um eine einfache Datenauflistung. Des Weiteren erstellen Sie eine stark typisierte Liste von Objekten, in diesem Fall PocoVehicle, auf die über einen Index zugegriffen werden kann. So erhalten Sie Methoden zum Durchsuchen, Sortieren und Bearbeiten der Liste.Listing 3 zeigt die Implementierung von ObservableCollection <Vehicle> und List<PocoVehicle> in der Klasse DatabaseLayer. Über diese Klasse wird im Fallbeispiel der Datenbankzugriff simuliert.
Listing 3: Die Klasse DatabaseLayer
<span class="hljs-keyword">using</span> System.Collections.ObjectModel; <br/><span class="hljs-keyword">using</span> MvvMFramework.Model; <br/><br/><span class="hljs-keyword">namespace</span> <span class="hljs-title">MvvMFramework.DataAccess</span> <br/>{ <br/> class DatabaseLayer <br/> { <br/> public static ObservableCollection&lt;Vehicle&gt; <br/> GetVehicleFromDatabase() <br/> { <br/> return new ObservableCollection&lt;Vehicle&gt; <br/> { <br/> new Vehicle { Marke="Audi", Typ="A 5", <br/> Kilowatt=140 }, <br/> new Vehicle { Marke="BMW", Typ="M 240i", <br/> Kilowatt=294 }, <br/> new Vehicle { Marke="Mercedes", Typ="C 350e", <br/> Kilowatt=155 }, <br/> }; <br/> } <br/><br/> public static List&lt;PocoVehicle&gt; <br/> GetPocoVehicleFromDatabase() <br/> { <br/> return new List&lt;PocoVehicle&gt; <br/> { <br/> new PocoVehicle { Marke="Audi", Typ="A 5",<br/> Kilowatt=140 }, <br/> new PocoVehicle { Marke="BMW", Typ="M 240i", <br/> Kilowatt=294 }, <br/> new PocoVehicle { Marke="Mercedes", <br/> Typ="C 350e", Kilowatt=155}, <br/> }; <br/> } <br/> } <br/>} Helpers
Im Ordner Helpers werden die für die Umsetzung von MVVM erforderlichen Hilfsprogramme zusammengefasst. Im ersten Schritt benötigen Sie nur die Klasse RelayCommand. Diese kapselt die für ein Command-Objekt erforderlichen Informationen und stellt die Verbindung zwischen der Command-Eigenschaft eines Steuerelements und einer auszuführenden Methode her. Listing 4 zeigt die Implementierung der Klasse RelayCommand.Listing 4: Die Klasse RelayCommand
using System; <br/>using System.Windows.Input; <br/><br/>namespace MvvMFramework.Helpers <br/>{ <br/> public class RelayCommand : ICommand <br/> { <br/> #region Fields <br/> readonly Action&lt;object&gt; _execute; <br/> readonly Predicate&lt;object&gt; _canExecute; <br/> #endregion <br/><br/> #region Constructors <br/> public RelayCommand(Action&lt;object&gt; execute) <br/> : this(execute, null) <br/> { <br/> } <br/><br/> public RelayCommand(Action&lt;object&gt; execute, <br/> Predicate&lt;object&gt; canExecute) <br/> { <br/> if (execute == null) <br/> throw new ArgumentNullException(„execute"); <br/><br/> _execute = execute; <br/> _canExecute = canExecute; <br/> } <br/> #endregion <br/><br/> #region ICommand Members <br/> public bool CanExecute(object parameter) <br/> { <br/> return _canExecute == null ? true : <br/> _canExecute(parameter); <br/> } <br/><br/> public event EventHandler CanExecuteChanged <br/> { <br/> add { CommandManager.RequerySuggested += value; } <br/> remove { CommandManager.RequerySuggested -= <br/> value; } <br/> } <br/><br/> public void Execute(object parameter) <br/> { <br/> _execute(parameter); <br/> } <br/> #endregion <br/> } <br/>}
Das heißt, Commands können an diverse Steuerelemente gebunden werden, im Beispiel an die Controls Button, Combobox, ListBox und DataGrid, die bei bestimmten Ereignissen ein Command auslösen. Dafür müssen alle Command-Klassen das Interface ICommand implementieren.Das Interface definiert eine Execute- und eine CanExecute-Methode. Zusätzlich wird noch ein CanExecuteChanged-Event definiert. Der Übergabeparameter vom Typ Object kann dann über das Binding definiert werden.Im Beispiel nutzen Sie den CommandManager von WPF, an den der CanExecuteChanged-Event delegiert wird. Bitte beachten Sie, dass der hier aufgezeigte Delegierungsbefehl WPF-spezifisch ist. Für andere UI-Technologien muss die Klasse entsprechend erweitert werden, oder Sie erstellen eine DelegateCommandBase-Klasse, die unterschiedliche User Interfaces unterstützt. Dazu lohnt sich auch ein Blick auf das MVVM-Framework Prism [2] und die dort enthaltenen Command-Klassen.
ViewModel
Das MVVM-ViewModel ist das Bindeglied zwischen View und Model. Es enthält eine Basisklasse ViewModelBase, die das Interface INotifyPropertyChanged implementiert und so die Verbindung für das .NET Data Binding schafft.In dieser Klasse lassen sich die Gemeinsamkeiten der verschiedenen ViewModels zusammenfassen. Die konkreten ViewModels, wie im Beispiel die Hauptansicht, erben von dieser Klasse. Listing 5 zeigt den für die Klasse ViewModelBase notwendigen Code.Listing 5: Die Klasse ViewModelBase
using System; <br/>using System.ComponentModel; <br/>using System.Windows; <br/>using System.Windows.Threading; <br/><br/>namespace MvvMFramework.ViewModel <br/>{ <br/> class ViewModelBase : INotifyPropertyChanged <br/> { <br/> public event PropertyChangedEventHandler <br/> PropertyChanged; <br/> internal void RaisePropertyChanged(string prop) <br/> { <br/> PropertyChanged?.Invoke(this, <br/> new PropertyChangedEventArgs(prop)); <br/> } <br/><br/> bool? _CloseWindowFlag; <br/> public bool? CloseWindowFlag <br/> { <br/> get { return _CloseWindowFlag; } <br/> set <br/> { <br/> _CloseWindowFlag = value; <br/> RaisePropertyChanged("CloseWindowFlag"); <br/> } <br/> } <br/><br/> public virtual void CloseWindow(<br/> bool? result = true) <br/> { <br/> Application.Current.Dispatcher.BeginInvoke(<br/> DispatcherPriority.Background, <br/> new Action(() =&gt; <br/> { <br/> CloseWindowFlag = CloseWindowFlag == null <br/> ? true <br/> : !CloseWindowFlag; <br/> })); <br/> } <br/> } <br/>}
Wie Sie im Listing erkennen können, nutzt der PropertyChanged-Event den Null-conditional-Operator. Der Event lässt sich auf diese Weise ganz einfach auf not null prüfen, indem ein Fragezeichen an den Event gehängt wird. Die Invoke-Methode wird somit nur dann ausgeführt, wenn der Event nicht null ist.Das verwendete CloseWindowFlag ist als Option implementiert und ermöglicht das Reagieren auf das Schließen einer View.Die Klasse MainViewModel führt eine Liste der aktiven ViewModels und Methoden und Properties, die zur Laufzeit an die Controls gebunden werden. Listing 6 zeigt den benötigten Code der Klasse für das Anwendungsbeispiel. Alle Informationen, der in der View angezeigt werden sollen, werden in der Klasse MainViewModel über öffentliche Eigenschaften bereitgestellt.
Listing 6: Die Klasse MainViewModel
using System; <br/>using System.Collections.ObjectModel; <br/>using MvvMFramework.Model; <br/>using MvvMFramework.Helpers; <br/>using MvvMFramework.DataAccess; <br/><br/>namespace MvvMFramework.ViewModel <br/>{ <br/> class ViewModelMain : ViewModelBase <br/> { <br/> public ObservableCollection&lt;Vehicle&gt; <br/> Fahrzeug { get; set; } <br/> public RelayCommand <br/> AddVehicleCommand { get; set; } <br/><br/> object _SelectedFahrzeug; <br/> public object SelectedFahrzeug <br/> { <br/> get <br/> { <br/> return _SelectedFahrzeug; <br/> } <br/> set <br/> { <br/> if (_SelectedFahrzeug != value) <br/> { <br/> _SelectedFahrzeug = value; <br/> RaisePropertyChanged("SelectedFahrzeug"); <br/> } <br/> } <br/> } <br/><br/> string _TextProperty1; <br/> public string TextProperty1 <br/> { <br/> get <br/> { <br/> return _TextProperty1; <br/> } <br/> set <br/> { <br/> if (_TextProperty1 != value) <br/> { <br/> _TextProperty1 = value; <br/> RaisePropertyChanged("TextProperty1"); <br/> } <br/> } <br/> } <br/><br/> public ViewModelMain() <br/> { <br/> Fahrzeug = <br/> DatabaseLayer.GetVehicleFromDatabase(); <br/> AddVehicleCommand = <br/> new RelayCommand(AddVehicle); <br/> } <br/><br/> void AddVehicle(object parameter) <br/> { <br/> if (parameter == null) return; <br/> Random kw = new Random(); <br/> Fahrzeug.Add(new Vehicle { <br/> Marke = parameter.ToString(), <br/> Typ = parameter.ToString(), <br/> Kilowatt = kw.Next(40,600) }); <br/> } <br/> } <br/>}
Die Properties sind in der Klasse MainViewModel so aufgebaut, dass sie bei jeder Änderung den Event PropertyChanged auslösen.
View
Zum Schluss benötigen Sie nur noch eine passende View für die gewünschte Ansicht der Steuerelemente. Dazu erstellen Sie im Ordner View die Datei MainWindow.xaml (Listing 7). Da für das Beispiel eine WPF-Vorlage verwendet wurde, können Sie die Beispielanwendung auch über [F5] starten. Die App sollte dann so aussehen wie in Bild 7 dargestellt.Listing 7: Die Datei MainWindow.xaml
&lt;Window x:Class="MvvMFramework.View.MainWindow" <br/> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/<br/> presentation" <br/> ...<br/> xmlns:local="clr-namespace:MvvMFramework.View" <br/> xmlns:vm="clr-namespace:MvvMFramework.ViewModel" <br/> mc:Ignorable="d" <br/> Title="WPF Beispiel MVVM" Height="400" Width="650" <br/> DataContext="{DynamicResource ViewModelMain}"&gt; <br/> &lt;Window.Resources&gt; <br/> &lt;vm:ViewModelMain x:Key="ViewModelMain"/&gt; <br/> &lt;/Window.Resources&gt; <br/> &lt;Grid&gt; <br/> &lt;Grid.RowDefinitions&gt; <br/> &lt;RowDefinition Height="0.939*"/&gt; <br/> &lt;RowDefinition Height="Auto"/&gt; <br/> &lt;/Grid.RowDefinitions&gt; <br/> &lt;GroupBox Header="Darstellung in WPF" <br/> HorizontalAlignment="Center" <br/> VerticalAlignment="Center" Margin="145,66,161,67" <br/> Width="336"&gt; <br/> &lt;Grid&gt; <br/> &lt;Grid.RowDefinitions&gt; <br/> &lt;RowDefinition /&gt; <br/> &lt;RowDefinition Height="Auto"/&gt; <br/> &lt;/Grid.RowDefinitions&gt; <br/> &lt;ScrollViewer VerticalScrollBarVisibility="Auto"&gt; <br/> &lt;StackPanel&gt; <br/> &lt;StackPanel Orientation="Horizontal"&gt; <br/> &lt;ListBox ItemsSource="{Binding Fahrzeug}" <br/> SelectedItem="{Binding SelectedFahrzeug}" <br/> DisplayMemberPath="Marke" <br/> HorizontalAlignment="Left"/&gt; <br/> &lt;DataGrid ItemsSource="{Binding Fahrzeug}" <br/> SelectedItem="{Binding SelectedFahrzeug}" <br/> HorizontalAlignment="Left" <br/> Margin="5,0,0,0"/&gt; <br/> &lt;/StackPanel&gt; <br/><br/> &lt;ComboBox ItemsSource="{Binding Fahrzeug}" <br/> SelectedItem="{Binding SelectedFahrzeug}" <br/> DisplayMemberPath="Marke" Margin="5,0,0,5"<br/> VerticalAlignment="Top"/&gt; <br/> &lt;TextBox x:Name="tb1" Text=<br/> "{Binding TextProperty1, UpdateSourceTrigger=<br/> PropertyChanged}" Margin="5"/&gt; <br/> &lt;TextBlock FontWeight="Bold" Margin="5" <br/> Text="Eingabe in die Textbox: "&gt;<br/> &lt;Run Text="{Binding TextProperty1}"/&gt;<br/> &lt;Run Text=""/&gt;<br/> &lt;/TextBlock&gt; <br/> &lt;/StackPanel&gt; <br/> &lt;/ScrollViewer&gt; <br/> &lt;Button Grid.Row="1" Content="Marke hinzufügen" <br/> Command="{Binding AddVehicleCommand}" <br/> CommandParameter="{Binding Text, <br/> ElementName=tb1}" Margin="5" <br/> focusable="False"/&gt; <br/> &lt;/Grid&gt; <br/> &lt;/GroupBox&gt; <br/> &lt;/Grid&gt; <br/>&lt;/Window&gt; Das Framework erstellen
In diesem Lernprojekt wurde zunächst lediglich vorgeführt, wie Sie das Konzept Model-View-ViewModel als Muster in einer App verwenden können. Jetzt können Sie beginnen, Ihr eigenes Framework zu abstrahieren.Die Beispielanwendung beinhaltet die wichtigsten Bestandteile für ein Framework. Die einzelnen Ordner haben dabei unterschiedliche Zuständigkeiten.Das heißt, um den Kern (Core) des Frameworks abzubilden, muss die Abstraktion auf dieser Schicht entsprechend hoch sein. So ergibt sich für das Core-Projekt als eigenständige Library der in Bild 8 gezeigte Aufbau. Darunter fallen alle gemeinsamen Dateien und Ressourcen, die zum Kern des Frameworks gehören und keinerlei Referenzen auf das Framework selbst benötigen.
Im Bereich Service werden die Grundlagen für das Framework definiert und verwaltet. Infolgedessen können dann der Datenbankzugriff als MvvMFramework.DataAccess sowie die einzelnen UI-Technologien für das Framework ausgearbeitet werden.Wie Sie an der Abstraktion erkennen können, wächst das Framework mit jedem weiteren Entwicklungsschritt, und die Komplexität steigt. Bitte beachten Sie, dass es sich beim hier vorgestellten Fallbeispiel nur um ein Lernprojekt handelt. Sie können gerne auch Ihre eigene Projektstruktur favorisieren, da jetzt ja bekannt ist, wie das MVVM-Muster in einem Framework funktionieren muss.Das MVVM-Framework soll die Funktionalität des Betriebssystems von der Anwendungslogik entkoppeln, indem es ein leistungsfähiges Servicesystem bereitstellt, um auch Code von der Anwendungslogik zu abstrahieren. Des Weiteren sollte es für das Framework nur eine untergeordnete Rolle spielen, welche Art von Inversion-of-Control-Container (IoC) Sie verwenden.Sie können auch das Testen der UI-Logik mittels Unit-Tests durchführen. Automatisierte Tests können in einem großen Projekt den benötigten Testaufwand erheblich reduzieren.Um das ViewModel in einem Unit-Test testen zu können, müssen Sie Mock-Objekte verwenden, welche die View-Interfaces implementieren.
Fazit
Dieser kleine Workshop will Sie animieren, ein eigenes Framework zu entwickeln – und sei es nur zu Lernzwecken.Die Umsetzung gelingt hier schon allein mit .NET-Bordmitteln, zeigt gleichzeitig aber auch, dass die Komplexität des Projekts sehr schnell ansteigen kann. Dafür steht ein Framework auf der anderen Seite für Vorzüge wie Wiederverwendbarkeit, Erweiterbarkeit, Flexibilität, Fehlertoleranz und Modularisierung.Allerdings kann der Workshop nicht alle Besonderheiten oder speziellen Implementierungen berücksichtigen, es wurde lediglich versucht, Ihnen Appetit auf den Entwurf und das Entwickeln eines eigenen MVVM-Frameworks zu machen. Dazu wünsche ich Ihnen viel Spaß und Erfolg.Fussnoten
- Wikipedia, Model View ViewModel, http://www.dotnetpro.de/SL1804MVVMSelbstbau1
- Prism, https://github.com/PrismLibrary
