MVVM Presentation

1

MVVMmmmmmmmmmmm

Ward BellVP Technology, IdeaBladeTwitter: @wardbellBlog: http://neverindoubtnet.blogspot.com/

3

Thanks for the slide deck, John Papa

4

Agenda

1. MVVM: What and Why2. Respond to User Actions3. Abstraction

4. Design with Data5. Data Services6. Testing

5

Bookshelf in Action

demo

6

Model View ViewModel

7

Everybody’s doing it!

8

MVVM

View Model

9

MVVM

Model• Domain object• Properties• Model Validation

View

10

MVVM

Model

View• The screen or page or control• User friendly presentation of information• Themes and Styles• User interactions

11

12

ViewModel

MVVM

View Model

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

14

MVVM

Model

View• The screen or page or control• User friendly presentation of information• Themes and Styles• User interactions

• Bindings• Events• Behaviors

ViewModel

15

Benefits of MVVM

Separation of concerns

Data binding (XAML)

Automated testing

Designer and developer symbiosis

Consistent, Maintainable, Scalable

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

17

Binding a View to a ViewModel

ViewModelLocatorINotifyPropertyChanged

demo

18

Responding to User Actions

19

Handling User Actions

Commands•ButtonBase support•ICommand•Toggle IsEnabled (CanExecute)

Behaviors•For other actions•EventToCommand and InvokeCommandAction

20

Commands and Behaviors

demo

21

Services and Separation

22

Services• Perform operations • Reusable tasks

MVVM

View Model

+ Services

MV

VM

ViewModel• Presentation logic• Handle user interaction• Reference Models

Reusable Services

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

24

Adding Value with Services

BookViewModel talks to services

demo

25

RIA Platforms and MVVM

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

27

DevForce and MVVM

Behind the BookDataService

demo

28

MVVM+ Messaging

MV

VM

MV

VMDirect Message?

29

MVVM+ Messaging

MV

VM

Publish

MV

VM

SubscribeMessaging Service

Confirmation Dialog

Subscribe

EventAggregator Pattern

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

31

Messaging

demo

32

Blendability & Design Time Data

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

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

35

Blendability: Data in the Designer

Service Provider and Design Time ServicesUsing cached sample data - “Self-initializing Fake”

demo

36

Automated Testing

demo

37

Review: Benefits of MVVM

Separation of concerns

Data binding (XAML)

Automated testing

Designer and developer symbiosis

Consistent, Maintainable, Scalable

38

Summary

1. MVVM: What and Why2. Respond to User Actions3. Abstraction

4. Design with Data5. Data Services6. Testing

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