An Introduction to the Model-View- ViewModel Pattern

11
[email protected] [email protected] An Introduction to the Model-View-ViewModel Pattern

description

An Introduction to the Model-View- ViewModel Pattern. [email protected] [email protected]. WPF. Intoduced in 3Framework 3.0. XAML UI Language. Vector Based rendering. Rich Composition ……………. ……………. ……………. TWO WAY DATABINDING. What is MVVM?. M odel V iew V iew M odel. - PowerPoint PPT Presentation

Transcript of An Introduction to the Model-View- ViewModel Pattern

Page 1: An Introduction to the Model-View- ViewModel  Pattern

[email protected]@gmail.com

[email protected]@gmail.com

An Introduction to the Model-View-ViewModel Pattern

An Introduction to the Model-View-ViewModel Pattern

Page 2: An Introduction to the Model-View- ViewModel  Pattern

WPFIntoduced in 3Framework 3.0.XAML UI Language.Vector Based rendering.Rich Composition…………….…………….…………….TWO WAY DATABINDING

Page 3: An Introduction to the Model-View- ViewModel  Pattern

What is MVVM?ModelViewViewModel

Page 4: An Introduction to the Model-View- ViewModel  Pattern

Standing on the Shoulders of Giants

MVCMVP

Martin Fowler Josh Smith John GossmanSean Wildermuth

Martin Fowler Josh Smith John GossmanSean Wildermuth

Page 5: An Introduction to the Model-View- ViewModel  Pattern

Why MVVM?Separation Of ConcernsTest Driven ApproachCode Cleanliness & Modular ApproachSupport WPF two way Data binding feature.

Page 6: An Introduction to the Model-View- ViewModel  Pattern

How Do We Achieve that?

View

ViewModel

Model

Page 7: An Introduction to the Model-View- ViewModel  Pattern

DONOT FOLLOW THIS

View

ViewModel

Model

View View

Page 8: An Introduction to the Model-View- ViewModel  Pattern

A More Complete Diagram

ViewXAML, Code Behind

Unit TestsIntegration Tests

ViewModelProperties, Commands, View Logic

Bin

din

gs

Actio

ns

Model

Service Proxies

Web

Data

Events

Behavio

r

Page 9: An Introduction to the Model-View- ViewModel  Pattern

DEMO – SAMPLE

Page 10: An Introduction to the Model-View- ViewModel  Pattern

MVVM Guidelines

1. Reduce or eliminate your code-behind

2. Bind all of your UI inputs/outputs to your ViewModel

3. Implement INotifyPropertyChanged on your ViewModel

4. When testing, treat ViewModel as the Real UI

5. Avoid events.  Use commands instead

Page 11: An Introduction to the Model-View- ViewModel  Pattern

Third Party SupportPrismMVVM LightCaliburnSilverlight FX