mvvm: filling the pattern gap in silverlight application development bart mcdonough principal...
TRANSCRIPT
MVVM: Filling the Pattern Gap inSilverlight Application Development
Bart McDonoughPrincipal Consultant
Incline Technical Group
Bart McDonough• Principal Consultant, Incline
Technical Group• Specialize primarily in SharePoint
(MCTS) but also work a lot with Silverlight and ASP.NET
• Introduced to MVVM in mid 2009 while developing commercial Silverlight application
• Avid hiker and skier!
Quick Poll• I read somewhere that polls make
presentations more interesting…
What I’m Covering• Overview of MVVM• MVVM Break-down (M, V, VM)• Implementing MVVM• Testing with MVVM• MVVM Frameworks
Questions are welcome any time during the presentation!
About the Demo App• The “Book Club” application• Originally developed by John Papa– Sr. Technical Evangelist at Microsoft– Check out his blog at johnpapa.net
• Was created to demonstrate various concepts in Silverlight such as RIA Services and MVVM
• I grabbed it from Papa’s blog, tweaked the UI, and added some basic unit tests
What is MVVM?• Model-View-ViewModel• Belongs to a class of patterns known as
“presentation” patterns– Same class of patterns as MVC & MVP– Adapted from the “Presentation Model” pattern
• Goals– Cleanly separate application logic from the UI (the
“view”)– Make “multi-role” development easier– Make it easier to test, maintain, and reuse code– Leverage core capabilities of WPF & Silverlight like
data binding, templates, commands, and behaviors
Just in Case You Care…• John Gossman, a WPF/Silverlight
architect at Microsoft, is credited with creating MVVM back in 2005
• Originally created for WPF and was later adapted for Silverlight
Why was MVVM Created?• Created in response to WPF/Silverlight
– Multiple roles (designers and developers) may work in parallel on different pieces of the same application
– Desire to leverage core capabilities in these new technologies
• But what about the “pattern gap?”– Traditional presentation patterns (e.g. MVC &
MVP) are developer-centric, creating a “gap” when designers are involved
– Also, those patterns weren’t designed with WPF/Silverlight capabilities in mind
Can I See a Pretty Picture?Sure, here you go…
View (XAML)
ViewModel
Data Binding andCommands/Behaviors
Model
Notifies view of changes(INotifyPropertyChanged orINotifyCollectionChanged)
MVVM BREAK-DOWN
MVVM - Model• Domain object (representation of
your business data)• May contain validation (e.g. data
annotations used with RIA Services)
• May be directly exposed in view model for binding– In which case it needs to implement
the usual binding interfaces
Example of Models• XML data file• List of Employee records being
submitted to a WCF service• LINQ to SQL entity retrieved from a
database• Contact record (POCO object)
MVVM - View• Defines structure and appearance of
what user sees on screen– Examples: Window, page, user control,
or data template• In MVVM, views should be expressed
primarily in XAML– Code-behind contains only
InitializeComponent() plus UI code that’s impractical to represent in XAML or requires direct references to UI controls
MVVM - View Model• “Glue” between model and view• Presentation logic and view state• No direct reference to view• Notifies view of property/state changes• Essentially consists of code that would
typically be found in code-behind + logic involving loading, saving, and preparing model data for display
• Typically calls into some sort of service layer to load/save model data (e.g. WCF)
Benefits of MVVM• Separation of concerns• Developers and designers can
coexist in harmony• Makes unit testing easier• Reduces repetitive/mundane code
by using data binding• Improves maintenance and
scalability
Some Typical Concerns• What about navigating between
pages/views?• How do I allow one view model to
communicate with another?• What about my services for
loading/saving data? How do I hook into those?
• All of these can be addressed while still maintaining separation of concerns
Addressing the Concerns• Navigating Between Views
– Navigation “Service”• VM-to-VM Communication
– Loosely coupled messaging (publish/subscribe model)
• Hooking into Services– View models should not contain service logic
(WCF calls, etc.)– Break out services into their own classes– Can further abstract with a “provider” that
allows a live service to be “swapped out” at design/test time
“Religious” Questions• These tend to spark a lot of debate…– Where’s the “dividing line” between the
view and the view model? What code goes in each?
– Must the code-behind file be 100% empty except for the call to InitializeComponent()?
– “Chicken and the egg” – a.k.a. the view and the view model – which comes first? Does the view instantiate the view model or the other way around?
LET’S DIVE IN:IMPLEMENTING MVVM
Demo• Let’s examine:– How the view model is hooked into
the view– The role of a view model “locator”
class– How navigation and services are tied
in with the view model– How we implement
INotifyPropertyChanged
Dealing with Interactivity• Silverlight 4 introduces support1 for the ICommand interface– Supported on ButtonBase class (and
therefore all controls that derive from it) and HyperlinkButton
– Members• CanExecute (property)• CanExecuteChanged (event)• Execute()
• What about other controls that don’t natively support ICommand?
1 ICommand was present in Silverlight 3 as well, but no controls natively supported it. Therefore, it wasn’t very useful unless you wrote code to support it yourself or used a 3rd-party framework.
Behaviors• Introduced with Expression Blend 3• A “behavior” is a reusable piece of interactivity
that can be applied to a UI element• InvokeCommandAction
– System.Windows.Interactivity DLL– Comes with Expression Blend 3 or 4
• EventToCommand– Comes with MVVM Light Toolkit– Can be added to any FrameworkElement
• Downside is these involve extra markup and additional DLL references
Behaviors, Cont.• Silverlight 5 introduces custom
markup extensions, which will allow you to do the same thing in one line of XAML with no additional DLL references
• Meanwhile, here’s a good rule of thumb for Silverlight 4 (courtesy of John Papa)– Use a command if it’s available– Otherwise, use a behavior
Why Commands/Behaviors?• In MVVM, the goal is for the view
model to contain logic that is “invoked” from the UI– Traditionally, this would’ve been the
job of the code-behind file• Commands and behaviors allow us
to achieve this– They “directly” connect the UI and
view model, bypassing code-behind
Demo• Let’s examine:– Commands• How are they registered, and how are
they used?
– Behaviors• How does a behavior look in XAML
compared to a command?
Unit Testing with MVVM• Silverlight Unit Test Framework– Available as part of the MS Silverlight Toolkit
(CodePlex)– The toolkit uses the framework for its own
unit tests– Severely under-documented, so take a look
at the toolkit’s own unit tests• Nifty Features– Can be run directly within the browser– Tests can be “tagged”– Support for testing asynchronous calls
Demo• Let’s examine:– How to create a Silverlight unit test
project– How some simple unit tests might
look– How to run the tests
Unit Testing, Cont.• Could also use a “mocking”
framework such as Moq– http://code.google.com/p/moq
• Could also use a unit test automation framework like StatLight– http://statlight.codeplex.com
How a Non-Async Run Looks
Diagram from Jeff Wilcox’s blog:• http://www.jeff.wilcox.name/2009/03/asynchronous-testing
How an Async Run Looks
Diagram from Jeff Wilcox’s blog:• http://www.jeff.wilcox.name/2009/03/asynchronous-testing
When Should I Use MVVM?• When it makes sense – weigh the
time and cost against the benefits• You don’t have to use MVVM on
every single Silverlight project– Remember, it was conceived with large-
scale “multi-role” projects in mind– Could be overkill for super simple UIs
• However, using it even just a little bit can reap some benefits
Remember…• You need to know XAML• MVVM relies heavily on data binding– You need to understand how data binding
works, especially in XAML• Patience is recommended– For debugging data binding issues– However, this will get better in Silverlight 5
• There is no single “right way” to do MVVM… it’s a pattern, not an implementation
Frameworks• Caliburn• MVVM Light Toolkit• Calcium• Prism 4.0
– Microsoft’s Patterns and Practices library for Silverlight and WPF
– Not an “MVVM framework” but includes components and guidance that aid in implementing MVVM
• Onyx (WPF Only)• WPF Toolkit (Obviously WPF Only)
– Includes WPF Model-View-ViewModel Toolkit
Contact Information
Bart McDonough
Email: [email protected]: doseofdotnet.wordpress.comTwitter: @bartmcdonough
Company: www.inclinetechnical.com
THANK YOU!