„Model View ViewModel“ – Versionsunterschied

Model View ViewModel (MVVM) ist ein Architekturmuster der Softwaretechnik, das von Microsoft stammt. Es ist eine Spezialisierung des Entwurfsmusters Presentation Model von Martin Fowler. MVVM basiert zum größten Teil auf Model View Controller (MVC) und ist auf moderne UI-Entwicklungsplattformen (HTML5 , WPF, und Silverlight) ausgerichtet, bei denen es einen User Experience (i.e., User Interface) (UXi) Entwickler mit anderen Anforderungen als jenen eines eher traditionellen Entwicklers gibt (der sich z.B. in Richtung Geschäftslogik- und Back-End-Entwicklung orientiert). Das View-Model von MVVM ist ein Value Converter, was bedeutet, dass das View-Model dafür verantwortlich ist, die Datenobjekte des Modells derart bloßzulegen, dass sie einfach verwaltet und benutzt werden können. Insofern ist das View-Model eher Model als View, es wickelt die meiste – wenn nicht alle – Anzeigelogik des Views ab (wobei die Abgrenzung, welche Funktionen von welcher Schicht implementiert werden, ein Gegenstand laufender Diskussionen und Untersuchungen ist).

MVVM wurde entworfen, um mittels der spezifischen Funktionen in WPF durch Entfernung praktisch alles Code-Behind von der View-Schicht eine bessere Trennung der View-Schicht vom Rest zu ermöglichen. Statt View-Code zu schreiben, kann ein Designer die native WPF-Auszeichnungssprache XAML verwenden und Bindungen zum ViewModel erzeugen, die durch Anwendungsentwickler geschrieben und gewartet werden. Diese Rollentrennung erlaubt es Designern, eher einen Fokus auf die UX-Anforderungen zu legen, als auf Programmierung oder Geschäftslogik, wodurch die Schichten einer Anwendung in mehreren Arbeitsgruppen entwickelt werden können.

Geschichte

Microsoft MVP Josh Smith sagte

"In 2005, John Gossman, currently one of the WPF and Silverlight Architects at Microsoft, unveiled the Model-View-ViewModel (MVVM) pattern on his blog. MVVM is identical to Fowler's Presentation Model, in that both patterns feature an abstraction of a View, which contains a View's state and behavior. Fowler introduced Presentation Model as a means of creating a UI platform-independent abstraction of a View, whereas Gossman introduced MVVM as a standardized way to leverage core features of WPF to simplify the creation of user interfaces. In that sense, I consider MVVM to be a specialization of the more general PM pattern, tailor-made for the WPF and Silverlight platforms."

In deutscher Übersetzung:

"2005 hat John Gossman, zurzeit einer der WPF- und Silverlight-Architekten bei Microsoft, das Model-View-ViewModel (MVVM) Muster auf seinem Blog enthüllt. MVVM ist mit Fowler's Presentation Model insofern identisch, als beide Muster eine Abstraktion der View aufweisen, die den Zustand und das Verhalten einer View beinhaltet. Fowler hat das Presentation Model vorgestellt als ein Mittel, um eine UI plattformunabhängige Abstraktion einer View zu erzeugen, wohingegen Gossman das MVVM als einen standardisierten Weg vorgestellt hat, die Kernfunktionen der WPF zu nutzen, um die Erzeugung von Benutzerschnittstellen zu vereinfachen. In diesem Sinne würde ich MVVM als eine Spezialisierung der allgemeineren PM-Muster auffassen, maßgeschneidert für die WPF- und Silverlight-Plattformen."

Das MVVM-Muster wurde erdacht, um WPF und Silverlight zu unterstützen, beides Komponenten, die 2006 mit dem .NET Framework 3.0 eingeführt wurden. Das Muster findet nun in allgemeinerer Form auch in anderen technologischen Bereichen Anwendung, ganz ähnlich wie bei den früheren Mustern MVC und Model View Presenter (MVP).

Mehrere Microsoft-Architekten, die an WPF und Avalon arbeiten, haben in Online-Medien ausführlich über das MVVM geschrieben, einschließlich dessen Schöpfer John Gossman, Microsoft MVP Josh Smith und Microsoft Program Manager Karl Shifflett.

So wie sich das Verständnis des Musters durch die Softwareindustrie verbreitet, dauert auch die Diskussion an, welche Werkzeuge entwickelt werden können um das Muster zu unterstützen, wo verschiedene Arten von unterstützendem Code platziert werden sollen, die beste Methode für die Datenbindung, wie Daten innerhalb des ViewModel bloßgelegt werden sollen, wie angebracht das Muster für Javascript ist, und so weiter.

Beschreibung

Allgemein gesagt versucht das Model View ViewModel Muster, sowohl die Vorteile einer Trennung funktionaler Entwicklung (bereitgestellt durch MVC) als auch die Vorteile von XAML und der Windows Presentation Foundation zu nutzen, indem es Daten so weit zurück (so nahe am Modell) wie möglich bindet, während es das XAML, ViewModel und die Datenüberprüfungsfunktionen jeder Geschäftsebene benutzt, um jegliche eingehenden Daten zu validieren. Das Ergebnis ist, dass das Model und die Foundation so viel von den Operationen wie möglich antreiben, was den Bedarf nach Code-Behind minimiert, vor allem in der View.

Elemente des MVVM-Musters beinhalten:

Model: Wie im klassischen MVC-Muster bezieht sich das Modell entweder auf (a) ein Objektmodell, das den realen Zustandsinhalt repräsentiert (objektorientierter Ansatz), oder (b) die Datenzugriffsschicht, welche diesen Inhalt repräsentiert (datenzentrischer Ansatz).

View: Wie im klassischen MVC-Muster bezieht sich die View auf alle Elemente, die durch die GUI angezeigt werden, etwa Schaltflächen, Fenster, Grafiken und andere Steuerelemente.

ViewModel: Das ViewModel ist ein “Modell der View”, was bedeutet, dass es eine Abstraktion der View ist, die auch der Datenbindung zwischen View und Model dient. Es könnte betrachtet werden als ein spezieller Aspekt eines Controllers (im MVC-Muster) für die Datenbindung und -konvertierung, der Information vom Model zu solcher für die View konvertiert und Befehle von der View zum Model reicht. Das ViewModel legt öffentliche Properties, Befehle und Abstraktionen bloß. Das ViewModel kann mit einem konzeptionellen Zustand der Daten verglichen werden, im Gegensatz zum realen Zustand der Daten im Model.

Controller: Manche Referenzen für MVVM enthalten auch eine Controller-Schicht oder illustrieren, dass das ViewModel eine spezielle Funktionsmenge parallel zu einem Controller ist, während andere dies nicht tun. Der Unterschied ist ein Gebiet laufender Diskussionen hinsichtlich der Standardisierung des MVVM-Musters.

Eine Implementierung des ViewModel

Snippet: Hier eine simple Implementierung des Musters, die mittels TDD auf WPF auf Code MSDN realisiert wurde.

Eine Implementierung des ViewModel in C#.

public class CustomerViewModel
	: ViewModelBase<CustomerViewModel>
{
	private readonly IDialogService dialogService;
	private Customer currentCustomer;
	private int i;

	public CustomerViewModel()
	{
		CustomerList = new ObservableCollection<Customer>();
		AddNewCustomer = new RelayCommand(PerformAddNewCustomer);
	}

	public CustomerViewModel(IDialogService dialogService)
		: this()
	{
		this.dialogService = dialogService;
	}

	public Customer CurrentCustomer
	{
		get { return currentCustomer; }

		set { SetProperty(ref currentCustomer, value, x => x.CurrentCustomer); }
	}

	public ObservableCollection<Customer> CustomerList
	{
		get;
		private set;
	}

	public ICommand AddNewCustomer { get; private set; }

	private void PerformAddNewCustomer()
	{
		CustomerList.Add(new Customer { Name = "Name" + i });
		i++;

		if (dialogService != null)
		{
			dialogService.Show("Customer added");
		}
	}
}

Timeline

- November 2010 - Das Microsoft Patterns & Practices Team veröffentliche eine Anleitung für die Benutzung von MVVM unter dem Namen Prism v4.

Kritik

Eine Kritik am Muster kommt vom MVVM-Schöpfer John Gossman selbst, welcher darauf hinweist, dass man bei der Implementierung simpler UI-Operationen mittels MVVM mit Kanonen auf Spatzen schießt. Er legt auch dar, dass für große Anwendungen die Verallgemeinerung der View komplizierter wird. Außerdem illustriert er, dass schlecht verwaltete Datenbindung zu einem erheblichen Speicherbedarf der Anwendung führen kann.

Quelloffene MVVM-Frameworks

• IdeaBlade: Cocktail
• Josh Smith: MVVM Foundation
• Sacha Barber: Cinch.
• Daniel Vaughan: Calcium SDK
• Karl Shifflett: Ocean
• Tony Sneed: Simple MVVM Toolkit
• Laurent Bugnion: MVVM Light Toolkit
• Eye.Soft: Hyperion SDK
• Lester Lobo: CoreMVVM
• Paul Betts: ReactiveUI
• Rob Eisenberg: Caliburn
• Rob Eisenberg: Caliburn Micro
• William e Kempf: Onyx
• Peter O’Hanlon: GoldLight
• jbe: WPF Application Framework (WAF)
• WPF Team: WPF Model-View-ViewModel Toolkit
• Michael L Perry: Update Controls
• Steve Sanderson: KnockoutJS
• Geert van Horrik: Catel
• Jeremy Likness: Jounce
• Xomega.Net: Xomega Framework
• Marcus Egger, EPS Software: Code Framework

Kostenlose MVVM-Frameworks

• Rhea NV (Visual Studio Partner): Vidyano

Kommerzielle MVVM-Frameworks

• Intersoft Solutions (Visual Studio Partner): ClientUI

Siehe auch

• Model View Controller
• Model View Presenter

Weblinks

• Martin Fowler: Presentation Model
• Josh Smith: WPF Apps With The Model-View-ViewModel Design Pattern
• Josh Smith: Advanced MVVM
• Jason Dolinger: A tutorial refactoring a traditional event-handling application to use MVVM and Commands.
• Kishor Aher: Attaching Routed Event to Command (Zero code behind M-V-VM)
• John Gossman: Tales from the Smart Client: Introduction to Model/View/ViewModel pattern for building WPF apps
• Karl ShifflettL: Learning WPF M-V-VM.
• Pete Weissbrod: Model-View-ViewModel Pattern for WPF: Yet another approach
• John Gossman: Tales from the Smart Client: Advantages and disadvantages of M-V-VM.
• Jason Rainwater: MVVM, providing the Association of View to ViewModel
• Julian Dominguez: Presentation Model pattern and the Composite Application Guidance (aka Prism)
• Nikhil Kotari: ViewModel Pattern in Silverlight using Behaviors
• Glenn Block: The spirit of MVVM (ViewModel), it's not a code counting exercise.
• Rob Eisenberg: Study in MVVM
• Xomega Team: Take MVVM to the Next Level with Xomega Framework
• Geert van Horrik: Catel - Part 0 of n: Why choose Catel?
• Geert van Horrik: Catel - Part 1 of n: Data Handling the Way it Should
• Geert van Horrik: Catel - Part 2 of n: Using WPF Controls and Themes
• Geert van Horrik: Catel - Part 3 of n: The MVVM Framework
• Geert van Horrik: Catel - Part 4 of n: Unit Testing with Catel
• Geert van Horrik: Catel - Part 5 of n: Building a WPF example application with Catel in 1 hour
• Raffaele Garofalo: UI Patterns tutorials including MVVM
• David Buksbaum: Caliburn.Micro – Hello World
• David Buksbaum: Caliburn.Micro the MEFtacluar
• David Buksbaum: How To Do Logging with Caliburn.Micro
• David Buksbaum: Bootstrapping Caliburn.Micro with Autofac
• David Buksbaum: Caliburn.Micro ViewModel File Template for ReSharper