Date post: | 19-Jan-2016 |
Category: |
Documents |
Upload: | ethan-summers |
View: | 215 times |
Download: | 0 times |
Advanced Blend for Developers: Integrating MVVM and Designability
Pete Brown (@pete_brown)Developer Community NinjaMicrosofthttp://10rem.net
DEV321
demo
Example Application
UX is part of the development process. It’s in the same position testing was 10 years ago. Now, most everyone realizes testing is a key part of the process.
Every application has a UX designer, even if they’re not calling themselves that. Someone is creating the user experience.
Rule: Any slide about UX must be charcoal gray or black
MVVM In a Single Slide
MVVM: Model, View, ViewModel
View ViewModel Model
Typical Parts of a full MVVM Solution
View ViewModel
Model
Services *
VM Locator
Service Locator
TestsUI
Tests
Commands
Binding
Method Invoke
Messaging
Events
* Not necessarily network services. “Services” used in a broader sense.
How Blend Fits In
Binding, Commands, BehaviorsDirectly support MVVM scenarios
Design-Time DataUsable with and without MVVM
User ExperienceAdd some texture to your applicationsQuickly design UIModify visual styles and templates
Blend itself was written using the MVVM pattern
Architecting for Blendability/Designability
Separate your concernsAbstract away external dependencies
ServicesDatabases
Mock anything required for the UI to functionOptionally use IOC and/or Service Locators to help resolve dependenciesOptionally use design-time data and design time data context
A highly testable and well-architected application!
bonus
!
Binding
Binding for dataEliminates most “lhs = rhs” code-behindMore design-friendly
Source of data inherited from parents in the tree
Enables easier swapping of data sourcesTypically the ViewModel in MVVM
Not just for “Data”Linking controls to each other without code
View ViewModelBinding
Design-Time/Sample Data
Created in XAML or via Blend toolingIn use:
d:DataContext and d:DesignDataUse to provide Blend with both shape and sample data
d:DataContext=“{d:DesignData Source=SomeData.xaml}”Sets design-time data context to a file with sample data
Design-Time/Sample Data
Good for initial prototyping and View-first designGreat for SketchFlow as well
Differing opinions as to its usefulness over the long term of a project
Often, an IoC approach or VM Locator is more robust
Sharing data with unit tests can be challengingIf you desire the same data in the unit test as in the UI designer
Includes data-only, not methods/commandsMust be maintained to stay useful
demo
Binding and Sample Data
Design-Friendly Binding
d:DataContext and d:DesignInstanceUse to tell Blend the shape of the data you will bind toTypically a ViewModelUse IsDesignTimeCreatable to enable execution and data
d:DataContext=“{d:DesignInstance local:MainViewModel, IsDesignTimeCreatable=True}”
Sets design-time data context to a ViewModel and instantiates it to populate with data
Works in Blend and VS2010
demo
Design-Time Friendly Binding
Behaviors/Actions/Triggers
Packaged functionalityAugments UI Layer
Interacts with other UI elementsInteracts with ViewModelProvides UI functionality
Tons of free community-written behaviors
gallery.expression.microsoft.com
CallMethodAction supports MVVM
Third-party behaviors like EventToCommand as well
View ViewModel
Behaviors
Visual State Manager and MVVM
VSM is a UI constructDiscrete controls have states, but so can viewsDesirable to trigger state changes from ViewModelOptions
Ok: Raise VM event and have code-behind to GoToStateBetter: GoToStateAction behavior, bound to ViewModel
demo
Visual State Manager and Behaviors
Commands
Actions triggered from UIUsually button / menu clicks
Commands typically wired up using binding
Designer-friendlyMVVM-friendlyEliminates code-behind events
In MVVM, commands typically wired to View Model
View ViewModelCommands
Commands
ICommandCanExecute (property)Execute (method)CanExecuteChanged (event)
Supports automatic enabling/disabling of aware controlsTypically use a generic concrete implementation like RoutedCommand or RelayCommand
demo
Commands
Summary
Designing for Blendability/Designability helps keep architecture clean and UX designable
Separate with Binding, Commands, States
Blendability, like good application architecture, isn’t freeChoose data mocking options carefully
Design-time data: less work, but limitedDummy VM: more work, limitation is based only on effort
There is always a DesignerUsing Blend and having your application Blendable will make their work much more efficient and productive
DEV Track Resources
http://www.microsoft.com/visualstudio http://www.microsoft.com/visualstudio/en-us/lightswitch http://www.microsoft.com/expression/http://blogs.msdn.com/b/somasegar/http://blogs.msdn.com/b/bharry/http://www.microsoft.com/sqlserver/en/us/default.aspxhttp://www.facebook.com/visualstudio
Resources
www.microsoft.com/teched
Sessions On-Demand & Community Microsoft Certification & Training Resources
Resources for IT Professionals Resources for Developers
www.microsoft.com/learning
http://microsoft.com/technet http://microsoft.com/msdn
Learning
http://northamerica.msteched.com
Connect. Share. Discuss.
Complete an evaluation on CommNet and enter to win!
Scan the Tag to evaluate this session now on myTech•Ed Mobile
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to
be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS
PRESENTATION.