Verfasst von: bletra | 8. Mai 2011

WPF: Von Spaghetticode zu MVVM – Teil 3 von 9

In dieser Artikelserie möchte ich eine einfache Applikation, in eine testbare Applikation nach dem MVVM-Pattern umwandeln:

  1. Beispielapplikation mit Spaghetticode
  2. Refactoring 1: Model
  3. MVC, MVP, Presentation Model
  4. MVVM
  5. ICommand
  6. Binding
  7. Refactoring 2: ViewModel
  8. Refactoring 3: View
  9. Zusammenfassung

MVC, MVP, Presentation Model

Unser Ziel ist es, eine wartbare WPF-Applikation mit wieder verwendbaren Modulen zu erhalten. Hierfür steht das MVVM-Pattern.
MVVM ist wie MVC, MVP und Presentation Model ein Separations-Pattern, also ein Architekturpattern. Architekturpattern erleichtern neuen Entwicklern im Team das Eindenken in eine neue Applikation, sie finden sich leichter zurecht, wenn sie etwas Bekanntest wieder entdecken. MVVM baut auf den Erfahrungen mit MVC, MVP und Presentation Model auf. Daher führe ich diese hier kurz ein.

Model View Controller (MVC)

Das MVC-Muster ist ein zunehmend verbreitetes Architekturmuster. Bereits 1979 hat Trygve Reenskaug dieses Muster in Bezug auf GUI-basierte Smalltalk-Applikationen beschrieben (siehe MODELS – VIEWS – CONTROLLERS). Die Gang of Four (Erich Gamma, Richard Helm, Ralph Johnson und John Vlissides, abgekürzt mit GoF) veröffentlichte 1994 ein Buch zu Entwurfsmustern (siehe Design Patterns: Elements of Reusable Object-Oriented Software). Dieses Buch entwickelte sich schnell zu einem Standardwerk und brachte Entwurfsmuster in die Entwicklergemeinde. Die GoF-Entwurfsmuster haben sich zum Grundvokabular für objektorientiertes Design entwickelt. Beispielsweise wird dort das Observer-Pattern diskutiert, das aus GUI-basierten Applikationen nicht mehr wegzudenken ist.

Es folgte 1996 unter dem Namen POSA 1 (Pattern-Oriented Software Architecture) von F. Buschmann, R. Meunier, H. Rohnert, P. Sommerlad und M. Stal ein Katalog von Architekturmustern (siehe Pattern-Oriented Software Architecture Volume 1: A System of Patterns). Hier wird auch das MVC-Muster dargestellt:

“The Model-View-Controller architectural pattern (MVC) divides an interactive application into three components. The model contains the core functionality and data. Views display information to the user. Controllers handle user input. Views and controllers together comprise the user interface. A changepropagation mechanism ensures consistency between the user interface and the model”

Ziel des MVC-Musters ist die Trennung der Kernfunktionalität einer Applikation von der Interaktion mit der Benutzeroberfläche. Das MVC-Muster lässt sich als zusammengesetztes Muster, bestehend aus  Observer-, Strategy und Composite-Muster beschreiben:

  • Das Model (Observable oder Subjekt) implementiert das Observer-Muster. Interessierte Objekte, wie die View (Observer), können sich registrieren und werden über Zustandsänderungen informiert.
  • Die View nutzt das Composite-Muster. Sie setzt sich aus verschiedenen ineinander geschachtelten Komponenten zusammen (compose: zusammensetzen). Die View stellt die Daten des Models für die Benutzerin dar und bietet Interaktionsmöglichkeiten. Als Subscriber des Models wird sie über Zustandsänderungen des Models informiert. Die View ist für die visuelle Darstellung, die Präsentation zuständig.
  • Der Controller definiert das Verhalten (Strategie) der Applikation. Er ist für die Bearbeitung der Benutzerinteraktionen mit dem Model zuständig. Ein Button-Click wird beispielsweise durch den Controller in einen entsprechenden Methodenaufruf zum Schreiben von geänderten Daten im Model übersetzt.

Model View Presenter (MVP)

Beim MVC-Pattern referenziert die View das Model, um die veränderten Daten lesen zu können. Nur die Disziplin der Entwickler führt dazu, keine schreibende Methoden des Models aus der View aufzurufen und dies dem Controller zu überlassen. Mit MVP wird diese Verbindung zwischen Model und View gekappt. Dies diskutiert der Artikel MVC vs. MVP vs. MVVM aus dem die folgende Abbildung stammt:

Hinzu kommt der Einsatz von Schnittstellen für Model und View, so dass diese austauschbar werden und mit Mocking  leicht unabhängig zu testen sind.

Presentation Model (PM)

Martin Fowler beschreibt in „Presentation Model“ ein Architektur-Pattern, das Präsentationslogik und –Verhalten aus der View in ein Präsentations-Model auslagert.

„Presentation Model is not a GUI friendly facade to a specific domain object. Instead it is easier to consider Presentation Model as an abstract of the view that is not dependent on a specific GUI framework.”

Vergleich

Im JavaMagazin (10, 2006: Teile und herrsche) beschreibt der Autor sehr gut die Unterschiede und Gemeinsamkeiten zwischen MVC, Model-View-Presenter (MVP) und Presentation Model:

„Die View von MVC verarbeitet alle User Events, z.B. eine Tastatureingabe oder einen Mausklick. Bei MVP leitet die View diese Events an den Presenter weiter, und dieser ist für die Abarbeitung der Events verantwortlich. Anders als beim MVC Pattern besteht zwischen View und Model keine direkte Verbindung. Das Pattern Presentation Model unterscheidet sich vom MVP Pattern in zwei Punkten:

  • Das Presentation Model hält die Zustände der GUI-Komponenten der View. Ein Zustand kann z.B. sein, ob ein Textfeld editierbar ist oder nicht.
  • Während im MVP Pattern der Presenter die View referenziert, beobachtet beim PM Pattern die View Änderungen im Presentation Model.“

Auch Martin Fowler bietet in seinem Artikel GUI Architectures eine gute Übersicht über die genannten Muster.

Nach diesen Vorarbeiten kann ich im nächsten Artikel das MVVM-Pattern vorstellen.


Responses

  1. […] MVC, MVP, Presentation Model […]

  2. Hallo Zusammen,
    ich habe dieses Tutorial http://www.sam-bi.com/blog/java-mvc-tutorial gesehen und hätte eine Erklärung oder einen Vergleich für das UNterschied zwischen MVC und MVP Design Patterns.

    Danke


Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

Kategorien

%d Bloggern gefällt das: