Das Model-View-ViewModel-Pattern Thomas Claudius Huber Senior Consultant Trivadis AG

About Thomas C. Huber Senior Consultant @Trivadis Autor der umfassenden Handbücher zu WPF und Silverlight www.thomasclaudiushuber.com

Trivadis solutions portfolio and competences IT SOLUTIONS, SERVICES, & PRODUCTS TECHNOLOGIES Microsoft, Oracle, IBM, Open Source Integration, Application Performance Management, Security Training Managed Services Infrastructure Engineering Application Development Enterprise Content Management BUSINESS INTEGRATION SERVICES IT departments Business departments CUSTOMER Business Intelligence Business Integration Services

Trivadis facts & figures Hier könnte eine Kopfzeile stehen 28.03.2017 Trivadis facts & figures 11 Trivadis locations with more than 550 employees Financially independent and sustainably profitable Key figures 2010 Revenue CHF 101 / EUR 73 mio. Services for more than 700 clients in over 1‘800 projects Over 170 Service Level Agreements More than 5'000 training participants Research and development budget: CHF 5.0 / EUR 3.6 mio. Hamburg Düsseldorf ~170 employees Frankfurt Stuttgart Vienna Munich Freiburg Basel Zurich ~20 employees Bern ~370 employees Lausanne Hier könnte eine Fusszeile stehen

Agenda MVVM-Grundlagen Daten und Commands Fortgeschrittene Tasks

Model-View-Controller – der Ursprung von MVVM das Datenmodell View die Benutzeroberfläche Controller behandelt Benutzereingaben und modifiziert das Model Model

Model-View-ViewModel erstmals 2005 von John Gossman beschrieben einer der Architekten von Expression Blend http://blogs.msdn.com/johngossman „State-of-the-Art“-Pattern für WPF- und Silverlight-Anwendungen etabliert Nutzt zentrale Features von WPF und Silverlight Data-Binding Commands

Model-View-ViewModel View (wie bei MVC) In WPF/Silverlight XAML mit Code-behind ViewModel Datenklasse spezifisch für das UI Kapselt das Model Model (wie bei MVC) DataSets, XML, Custom Objects, ... XAML View VB.NET / C# ViewModel Model

Stärken von MVVM Höhere Wartbarkeit aufgrund von UI-Trennung UI und UI-Logik sind strikter getrennt, wodurch die Anwendung modularer aufgebaut ist und wartbarer wird. Unterstützung von Unit-Tests Ein großer Teil der UI-Logik kann in Unit-Tests eingebunden werden. Workflow zwischen Entwickler und Designer Bessere Arbeitsaufteilung aufgrund des Patterns

Agenda MVVM-Grundlagen Daten und Commands Fortgeschrittene Tasks

Daten und Commands View Das ViewModel stellt über Properties Daten und Commands bereit Die View hat das ViewModel im DataContext, womit sich jedes Element in der View an Properties des ViewModels binden lässt XAML DataContext Data-Binding ViewModel Model

Der 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. Demo

Data-Binding Benachrichtigungen Ist die Quelle eine Dependency-Property, ist alles ok. Ist die Quelle eine normale .NET Property INotifyPropertyChanged implementieren Ist die Quelle eine Collection INotifyCollectionChanged implementieren ObservableCollection<T> impl. das Interface bereits Demo

Commands 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, Hyperlink In WPF: Button, MenuItem public interface ICommand{ bool CanExecute(object parameter); void Execute(object parameter); event EventHandler CanExecuteChanged; }

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

Agenda MVVM-Grundlagen Daten und Commands Fortgeschrittene Tasks

Benutzerinteraktion aus dem ViewModel 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 übergeben View zeigt im Eventhandler einen Dialog an. Demo

DataProvider für Designzeit-Daten Für den Designer ist es hilfreich, wenn zur Designzeit Beispieldaten zur Verfügung stehen Diese Funktionalität wird über eine IDataProvider-Schnittstelle erreicht Zur Designzeit wird eine andere IDataProvider-Implementation geladen. 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-Grundlagen Daten und Commands Fortgeschrittene Tasks

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

Trivadis TechDays11 Wettbewerb 1. Preis 2. Preis Mit Signatur von Thomas Huber 3. Preis Gutschein für einen kostenlosen Trivadis Training Tag Mehr Infos am -Stand f

Q&A

3/28/2017 8:10 PM © 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. © 2010 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.