Thomas Claudius HuberSenior ConsultantTrivadis AG

Das Model-View-ViewModel-Pattern

About Thomas C. HuberSenior Consultant @Trivadis

Autor der umfassenden Handbücherzu WPF und Silverlight

www.thomasclaudiushuber.com

IT SOLUTIONS, SERVICES, & PRODUCTS

TECHNOLOGIESMicrosoft, Oracle, IBM, Open Source

Integration, Application Performance Management, Security

Training Managed Services

InfrastructureEngineering

Application Development

Enterprise Content Management

BUSINESS INTEGRATION SERVICES

ITdepartmen

ts

Businessdepartmen

ts

CUSTOMER

Business Intelligence

Trivadis solutions portfolio and competences

Hamburg

Düsseldorf

Frankfurt

Stuttgart

MunichFreiburg

Vienna

Basel

BernZurich

Lausanne~370 employees

~170 employees

~20 employees

Trivadis facts & figures11 Trivadis locations with more than 550 employees

Financially independent and sustainably profitable

Key figures 2010Revenue CHF 101 / EUR 73 mio.Services for more than 700 clients in over 1‘800 projectsOver 170 Service Level AgreementsMore than 5'000 training participantsResearch and development budget:

CHF 5.0 / EUR 3.6 mio.

Agenda

MVVM-GrundlagenDaten und CommandsFortgeschrittene Tasks

Modeldas Datenmodell

Viewdie Benutzeroberfläche

Controllerbehandelt Benutzereingabenund modifiziert das Model

Model-View-Controller – der Ursprung von MVVM View Controller

Model

erstmals 2005 von John Gossman beschriebeneiner der Architekten von Expression Blendhttp://blogs.msdn.com/johngossman

„State-of-the-Art“-Pattern für WPF- und Silverlight-Anwendungen etabliertNutzt zentrale Features von WPF und Silverlight

Data-BindingCommands

Model-View-ViewModel

View (wie bei MVC)In WPF/Silverlight XAML mit Code-behind

ViewModelDatenklasse spezifisch für das UIKapselt das Model

Model (wie bei MVC)DataSets, XML, Custom Objects, ...

Model-View-ViewModel

VB.NET /C#

XAML

View

ViewModel

Model

Höhere Wartbarkeit aufgrund von UI-TrennungUI und UI-Logik sind strikter getrennt, wodurch die Anwendung modularer aufgebaut ist und wartbarer wird.

Unterstützung von Unit-TestsEin großer Teil der UI-Logik kann in Unit-Tests eingebunden werden.

Workflow zwischen Entwickler und DesignerBessere Arbeitsaufteilung aufgrund des Patterns

Stärken von MVVM

Agenda

MVVM-GrundlagenDaten und CommandsFortgeschrittene Tasks

Das ViewModel stellt überProperties Daten und Commands bereitDie View hat das ViewModelim DataContext, womit sich jedesElement in der View an Propertiesdes ViewModels binden lässt

Daten und CommandsView

ViewModel

Model

XAML

Data-Binding

DataContext

Zum expliziten Setzen der Quelle eines Data-Bindings bietet die Binding-Instanz drei Möglichkeiten: Source-Property ElementName-Property RelativeSource-Property

Ist keine der drei Properties gesetzt, hält die Binding-Instanz nach dem DataContext Ausschau: FrameworkElement definiert eine DataContext-Property.

Der Wert dieser Property wird über den Element Tree vererbt.

Das ViewModel wird in den DataContext der View gesetzt.

Der DataContext

Demo

Ist die Quelle eine Dependency-Property, ist alles ok.Ist die Quelle eine normale .NET Property

INotifyPropertyChanged implementieren

Ist die Quelle eine CollectionINotifyCollectionChanged implementierenObservableCollection<T> impl. das Interface bereits

Data-Binding Benachrichtigungen

Demo

In WPF/Silverlight ist ein Command ein Objekt, das die Schnittstelle ICommand implementiert

Ein Command wird ausgeführt von Objekten, die eine Command-Property besitzen

In Silverlight 4: Button, HyperlinkIn WPF: Button, MenuItem

Commands

public interface ICommand{ bool CanExecute(object parameter); void Execute(object parameter); event EventHandler CanExecuteChanged;}

Das ViewModel enthält Properties vom Typ ICommand für die SteuerungUIElemente binden sich an diese PropertiesUm die vom ICommand auszuführende Logik im ViewModel und nicht im ICommand selbst zu haben, werden Delegates genutzt.

Commands

Demo

Agenda

MVVM-GrundlagenDaten und CommandsFortgeschrittene Tasks

An einer Stelle im ViewModel wird Feedback benötigt. Dem Benutzer muss ein Dialog angezeigt werden.Problem: ViewModel darf kein UI enthalten

Nur so bleibt das ViewModel für Unit-Tests geeignet

Lösung???

Benutzerinteraktion aus dem ViewModel

Lösung: Das ViewModel stellt ein Event bereit.Die Daten werden über spezielle EventArgs übergebenView zeigt im Eventhandler einen Dialog an.

Benutzerinteraktion aus dem ViewModel

Demo

Für den Designer ist es hilfreich, wenn zur Designzeit Beispieldaten zur Verfügung stehenDiese Funktionalität wird über eine IDataProvider-Schnittstelle erreichtZur Designzeit wird eine andere IDataProvider-Implementation geladen.

DataProvider für Designzeit-Daten

Demo

Unit-Testing[TestMethod()]public void DeleteCommandTest(){ MainViewModel_Accessor target = new MainViewModel_Accessor(); target.Speakers = new ObservableCollection<Speaker>{ new Speaker(), new Speaker(), new Speaker(), new Speaker()}; target.CurrentSpeaker = target.Speakers[0]; target.DeleteCommand.Execute(null); Assert.AreEqual(target.Speakers.Count, 3);} 

Agenda

MVVM-GrundlagenDaten und CommandsFortgeschrittene Tasks

Bessere Unterstützung für den Designer-/Entwicker-WorkflowDie Logik liegt im vom UI unabhängigen ViewModel, was gefundenes Fressen für Unit-Tests istDie Anwendung bekommt eine bessere Strutkur und wird wartbarer

Fazit

Trivadis TechDays11 Wettbewerb

Gutscheinfür einen

kostenlosenTrivadis

Training Tag

1. Preis2. Preis

3. PreisMit Signaturvon Thomas Huber

Mehr Infos am -Stand

f

Q&A

© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after

the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.