Real-world Model-View-ViewModel for WPF
-
Upload
paul-stovell -
Category
Technology
-
view
10.046 -
download
3
description
Transcript of Real-world Model-View-ViewModel for WPF
![Page 1: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/1.jpg)
Real-world MVVM in WPFPaul Stovell
Senior ConsultantTechnical specialist: WPF
![Page 2: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/2.jpg)
Agenda
Part 1: Introducing MVVM• Refactoring to MVVM• Unit testing MVVM• Commands
Part 2: Formalizing MVVM• History• Model-View-ViewModel• ViewModel-First
Part 3: Playing with Others• Navigation• Composition• Communication
![Page 3: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/3.jpg)
About You
• Awesome coder• Know some WPF• Love binding!
This is you...
![Page 4: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/4.jpg)
Introducing MVVMPART 1
![Page 5: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/5.jpg)
Demo
Refactoring to MVVM
![Page 6: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/6.jpg)
Demo
Unit testing MVVM
![Page 7: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/7.jpg)
What did we just do?
• Employee = the Model• SearchView.xaml = the View• SearchViewModel = the ViewModel
![Page 8: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/8.jpg)
Demo
Using Commands
![Page 9: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/9.jpg)
Demo
New requirement: search-as-you-type
![Page 10: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/10.jpg)
Formalizing MVVMPART 2
![Page 11: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/11.jpg)
History
Martin Fowler
John Gossman
MVVM
Presentation Model
![Page 12: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/12.jpg)
Model-View-ViewModel
View ViewModel External services
CommandsMethods
public void Search(){}
ICommand Search { get;set; }
void Button_Click(...){ viewModel.Search();}
<Button Command="{Binding Search}" />
Properties
Events
![Page 13: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/13.jpg)
Model-View-ViewModel
View ViewModel External services
CommandsMethods
public string SearchText { get { ... } set { ... Search(); }}
<TextBox Text="{Binding SearchText}" />
Properties
Events
![Page 14: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/14.jpg)
Model-View-ViewModel
View ViewModel External services
CommandsMethods
public event EventArgs SessionClosed;
viewModel.SessionClosed += (s,e) => Close();
Properties
Events
![Page 15: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/15.jpg)
ViewModel-First MVVM
View ViewModel External services
CommandsMethods
View.Close();
ViewModel.Search();
Properties
Events
![Page 16: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/16.jpg)
ViewModel-First MVVM
View ViewModel External services
CommandsMethods
public event EventHandler SessionClosed;
public event EventHandler SearchRequested;
Properties
Events
![Page 17: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/17.jpg)
Model-View-Presenter
View Presenter External services
Methods
public event EventHandler SearchRequested;
Eventsprivate void View_SearchRequested(...){ // Do search}
![Page 18: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/18.jpg)
Model-View-Presenter
View Presenter External services
Methods
View.ShowResults(results);
public void ShowResults(List<SearchResult> results){ listBox1.ItemsSource = results;}
Events
![Page 19: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/19.jpg)
The Model
• Service messages/DTO’s• Domain entities/value objects• DataSets• LINQ to SQL objects
Or:
• View-specific objects mapped from above
![Page 20: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/20.jpg)
Instantiation and wire-up
public CalculatorView(){ InitializeComponent(); DataContext = new CalculatorViewModel(); }
• Internal creation:
![Page 21: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/21.jpg)
Instantiation and wire-up
public CalculatorView(CalculatorViewModel model){ InitializeComponent(); DataContext = model; }
• ViewModel as a dependency:
var viewModel = new CalculatorViewModel();var view = new CalculatorView(viewModel);
![Page 22: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/22.jpg)
Instantiation and wire-up
<UserControl ...> <UserControl.DataContext> <local:CalculatorViewModel /> </UserControl.DataContext>
• ViewModel via XAML:
![Page 23: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/23.jpg)
Instantiation and wire-up
• 5 more ways:http://is.gd/dv7aN
![Page 24: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/24.jpg)
Playing with OthersPART 3
![Page 25: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/25.jpg)
Navigation
1. INavigator.Navigate(...)2. Event
View+ViewModel
View
ViewModel
URI
![Page 26: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/26.jpg)
Demo
• Adding navigation with Magellan
![Page 27: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/27.jpg)
Composition
Shell ViewModel
Search ViewModel
Weather ViewModel
ShellSearch
Weather
![Page 28: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/28.jpg)
Composition
Order ListTop Region
Bottom Region
Bottom-Up
Search Weather
Infrastructure
1. Resolve
2. Place
![Page 29: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/29.jpg)
Inter-view Communication
Standard .NET events
Search View Model
Results View Model
Criteria View Model
1. Child model raises event2. Parent model forwards
event
![Page 30: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/30.jpg)
Inter-view Communication
Results ViewModel
Criteria ViewModel
Hub
Publish Handle
Advert ViewModel
Handle
Recent Searches
ViewModel
Publish
Mediator (e.g., Prism EventAggregator)
bus.Publish(new SearchMessage(searchText));
bus.Subscribe<SearchMessage>(HandleSearch);
![Page 31: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/31.jpg)
Conclusion
• MVVM is about separation of concerns– View has UI-specific code– VM has behaviour and state– Behaviour = methods/commands– State = properties
• Separation of concerns makes code easy to test
• It’s easy: just one extra class!
![Page 32: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/32.jpg)
What’s next?
• Inversion of Control containers• Modular applications• Pub/sub messaging• Inductive user interfaces• p&p Prism
![Page 33: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/33.jpg)
Links
• MVVM Light: http://is.gd/duX2Q• Caliburn: http://is.gd/duX5L• More: http://is.gd/duWWG• Magellan: http://is.gd/duX70• Reuxables: http://is.gd/duX8G
![Page 35: Real-world Model-View-ViewModel for WPF](https://reader033.fdocuments.net/reader033/viewer/2022061604/554f7192b4c905c8088b5615/html5/thumbnails/35.jpg)
DeveloperDeveloperDeveloper! Events would not be possibleWith out the generous support from our sponsors…
We would like to thank the following for their support: