thomas claudius huber senior consultant trivadis ag das model-view- viewmodel-pattern
TRANSCRIPT
![Page 1: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/1.jpg)
Thomas Claudius HuberSenior ConsultantTrivadis AG
Das Model-View-ViewModel-Pattern
![Page 2: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/2.jpg)
About Thomas C. HuberSenior Consultant @Trivadis
Autor der umfassenden Handbücherzu WPF und Silverlight
www.thomasclaudiushuber.com
![Page 3: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/3.jpg)
![Page 4: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/4.jpg)
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
![Page 5: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/5.jpg)
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.
![Page 6: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/6.jpg)
Agenda
MVVM-GrundlagenDaten und CommandsFortgeschrittene Tasks
![Page 7: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/7.jpg)
Modeldas Datenmodell
Viewdie Benutzeroberfläche
Controllerbehandelt Benutzereingabenund modifiziert das Model
Model-View-Controller – der Ursprung von MVVM View Controller
Model
![Page 8: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/8.jpg)
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
![Page 9: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/9.jpg)
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
![Page 10: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/10.jpg)
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
![Page 11: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/11.jpg)
Agenda
MVVM-GrundlagenDaten und CommandsFortgeschrittene Tasks
![Page 12: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/12.jpg)
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
![Page 13: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/13.jpg)
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
![Page 14: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/14.jpg)
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
![Page 15: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/15.jpg)
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;}
![Page 16: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/16.jpg)
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
![Page 17: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/17.jpg)
Agenda
MVVM-GrundlagenDaten und CommandsFortgeschrittene Tasks
![Page 18: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/18.jpg)
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
![Page 19: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/19.jpg)
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
![Page 20: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/20.jpg)
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
![Page 21: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/21.jpg)
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);}
![Page 22: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/22.jpg)
Agenda
MVVM-GrundlagenDaten und CommandsFortgeschrittene Tasks
![Page 23: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/23.jpg)
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
![Page 24: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/24.jpg)
Trivadis TechDays11 Wettbewerb
Gutscheinfür einen
kostenlosenTrivadis
Training Tag
1. Preis2. Preis
3. PreisMit Signaturvon Thomas Huber
Mehr Infos am -Stand
f
![Page 25: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/25.jpg)
Q&A
![Page 26: Thomas Claudius Huber Senior Consultant Trivadis AG Das Model-View- ViewModel-Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062502/55204d7549795902118c9ff5/html5/thumbnails/26.jpg)
© 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.