mvvm presentation
TRANSCRIPT
![Page 1: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/1.jpg)
1
MVVMmmmmmmmmmmm
Ward BellVP Technology, IdeaBladeTwitter: @wardbellBlog: http://neverindoubtnet.blogspot.com/
![Page 2: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/2.jpg)
3
Thanks for the slide deck, John Papa
![Page 3: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/3.jpg)
4
Agenda
1. MVVM: What and Why2. Respond to User Actions3. Abstraction
4. Design with Data5. Data Services6. Testing
![Page 4: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/4.jpg)
5
Bookshelf in Action
demo
![Page 5: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/5.jpg)
6
Model View ViewModel
![Page 6: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/6.jpg)
7
Everybody’s doing it!
![Page 7: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/7.jpg)
8
MVVM
View Model
![Page 8: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/8.jpg)
9
MVVM
Model• Domain object• Properties• Model Validation
View
![Page 9: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/9.jpg)
10
MVVM
Model
View• The screen or page or control• User friendly presentation of information• Themes and Styles• User interactions
![Page 10: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/10.jpg)
11
![Page 11: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/11.jpg)
12
ViewModel
MVVM
View Model
![Page 12: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/12.jpg)
13
MVVM
View Model
ViewModel• Glues the View to the Model• Databound to the View
• Properties• Commands• Methods
• Contains the Model• Talks to services and load/save the Model
![Page 13: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/13.jpg)
14
MVVM
Model
View• The screen or page or control• User friendly presentation of information• Themes and Styles• User interactions
• Bindings• Events• Behaviors
ViewModel
![Page 14: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/14.jpg)
15
Benefits of MVVM
Separation of concerns
Data binding (XAML)
Automated testing
Designer and developer symbiosis
Consistent, Maintainable, Scalable
![Page 15: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/15.jpg)
16
MVVM
View(e.g. Person Master/Details)
XAMLCode
Model(e.g. PeopleModel/Person)
ViewModel
Design w/ XAML
Presentation logic
Not reusable
BindingTell View when data changes
![Page 16: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/16.jpg)
17
Binding a View to a ViewModel
ViewModelLocatorINotifyPropertyChanged
demo
![Page 17: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/17.jpg)
18
Responding to User Actions
![Page 18: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/18.jpg)
19
Handling User Actions
Commands•ButtonBase support•ICommand•Toggle IsEnabled (CanExecute)
Behaviors•For other actions•EventToCommand and InvokeCommandAction
![Page 19: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/19.jpg)
20
Commands and Behaviors
demo
![Page 20: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/20.jpg)
21
Services and Separation
![Page 21: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/21.jpg)
22
Services• Perform operations • Reusable tasks
MVVM
View Model
+ Services
MV
VM
ViewModel• Presentation logic• Handle user interaction• Reference Models
Reusable Services
![Page 22: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/22.jpg)
23
Separating the Services
Services provide related tasks to the callerBookDataService, SecurityService, BookEditor
ViewModel uses a Service Passed through the constructor (Dependency Injection)ViewModel can focus on bindings and logic
Easily refactored and testableServices implement an interface
![Page 23: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/23.jpg)
24
Adding Value with Services
BookViewModel talks to services
demo
![Page 24: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/24.jpg)
25
RIA Platforms and MVVM
![Page 25: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/25.jpg)
26
RIA Platforms
Data access and Server communicationsData modeling as Entities (not DTOs) Binding directly to Entities
INPC and INDEIYou get EntityManager/DomainContext
Your gateway to the serverChange tracking
Abstraction through Services
![Page 26: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/26.jpg)
27
DevForce and MVVM
Behind the BookDataService
demo
![Page 27: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/27.jpg)
28
MVVM+ Messaging
MV
VM
MV
VMDirect Message?
![Page 28: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/28.jpg)
29
MVVM+ Messaging
MV
VM
Publish
MV
VM
SubscribeMessaging Service
Confirmation Dialog
Subscribe
EventAggregator Pattern
![Page 29: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/29.jpg)
30
Confirmation Dialog Example
Define a message type (ConfirmationDialogMessage)Send method knows MessengerServiceMessage defines its own payload
Publish message (BookSaver:SaveSuccessful)
Subscribe to message (MainPage:DialogMessageReceived)Subscriber acquires MessengerServiceSubscriber registers action for message
![Page 30: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/30.jpg)
31
Messaging
demo
![Page 31: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/31.jpg)
32
Blendability & Design Time Data
![Page 32: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/32.jpg)
33
Design Time Data What am I looking at?
Isn’t this easier/more productive?
Are my bindings right?How’s my layout?Ah!
Notice I’ve tested my Submit Button Logic
![Page 33: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/33.jpg)
34
Swapping Services
Services won’t run in the Blend and Visual Studio designersNeed design time callsService Providers
If DesignTimeCreate Design Time Services
ElseCreate Regular Services
![Page 34: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/34.jpg)
35
Blendability: Data in the Designer
Service Provider and Design Time ServicesUsing cached sample data - “Self-initializing Fake”
demo
![Page 35: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/35.jpg)
36
Automated Testing
demo
![Page 36: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/36.jpg)
37
Review: Benefits of MVVM
Separation of concerns
Data binding (XAML)
Automated testing
Designer and developer symbiosis
Consistent, Maintainable, Scalable
![Page 37: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/37.jpg)
38
Summary
1. MVVM: What and Why2. Respond to User Actions3. Abstraction
4. Design with Data5. Data Services6. Testing
![Page 38: MVVM Presentation](https://reader033.vdocuments.net/reader033/viewer/2022061123/5476c644b4af9f1b348b457f/html5/thumbnails/38.jpg)
39
ResourcesWeb:
IdeaBlade: www.ideablade.comBookshelf in DevForce: links.ideablade.com/drc-bookshelfSL Firestarter 2010: links.ideablade.com/firestarter10-mvvm MIX 2010 MVVM: links.ideablade.com/mix10-laurent-mvvm MVVM Light: links.ideablade.com/mvvmlightSL Test Framework: links.ideablade.com/sl-utf
Print:Silverlight 4 Unleashed, Laurent Bugnion