Transcript Document
Programming with MVVM Miguel A. Castro • Architect - IDesign • [email protected] • @miguelcastro67 www.devreach.com Miguel A. Castro .NET Architect, Developer, & Trainer Microsoft MVP ASP Insider VSX Insider C# Insider Azure Insider Member of the INETA Speakers Bureau Conference Speaker In IT business since 1986 www.devreach.com ineta Have you seen this woman? www.devreach.com Agenda • XAML Data Binding • What is MVVM • Implementing the Pattern (and sticking to it) • Adding Commanding • Unit Testing • Advanced Features www.devreach.com Data Binding • Extremely powerful with XAML • Everything binds (to everything else) • Every tag has DataContext property – Value becomes underlying binding source – Provides values from tag & down visual tree • Underlying binding object needs to implement INotifyPropertyChanged interface www.devreach.com XAML Data Binding <Window> <Grid> <Label Content=“{Binding Name}” Width=“{Binding Size}” /> ... ………………………………………………………………………………… this.DataContext = myObj; where myObj contains: string Name double Size www.devreach.com What is MVVM? • MS Pattern based on Presentation-Model • Class provides the binding source for the entire view • Encapsulates logic for the view – Provides state and behavior – Logical representation or UI • Loosely coupled to the view www.devreach.com What is MVVM? www.devreach.com Goals of MVVM • • • • • Make the view “State Driven” Fill in for model short-comings Decouple state and behavior from view Provide ability to unit test Allows the engineering of the UI to take place in an object-oriented fashion – VMs are logical representation of UI • Reduction or even elimination of the codebehind class www.devreach.com Rules of MVVM • ViewModel should have NO knowledge of the View • View should have a loose coupling to ViewModel (not until runtime if possible) • ViewModel can expose individual properties or model as a single property www.devreach.com Connecting to View • ViewModel class becomes the “DataContext” of the View – Window or UserControl • Can be set anywhere convenient • View can optionally hook into ViewModel events – Used for navigation to other windows www.devreach.com Demo IMPLEMENTING THE MVVM PATTERN www.devreach.com Commanding • XAML Technology – Not specifically MVVM-related • Works great with MVVM (eventually) • Command classes – Inherit ICommand – Used with implementers of ICommandSource • Provide execution and determination of execution www.devreach.com Demo – Commanding Basics COMMANDING www.devreach.com Commanding in MVVM • Usually a command needs access to ViewModel state – Ex: Saving of data entered by user • Command classes don’t “belong” to a ViewModel • Need way to hook classes together – Command execution needs to access VM state www.devreach.com Commanding in MVVM • Technique 1: – Receive copy of ViewModel into command constructor • Technique 2: – Use Delegate/Relay Command pattern – Allows passing of method pointers into command • Methods reside in ViewModel • Which technique is used depends on command reusability necessities www.devreach.com Demo – Commands MVVM-Style COMMANDING www.devreach.com Putting It All Together • Think in State-Driven terms • If View has requirement, ask: – What state and behavior does the ViewModel have to expose in order to satisfy the requirement? • Exercise – Provide a view with a label to be displayed in one of two colors – Provide two buttons used to alter the colors of the label – Enable or disable the buttons accordingly when not useful – Allow for proper unit testing www.devreach.com Before & After MVVM BEFORE AFTER • View shows label and buttons • Button click events change color of label • Button click events disable button just clicked and enable other button • • • • • www.devreach.com View shows labels and buttons View bound to ViewModel Label color bound to property Buttons bound to commands Command argument provides color • Command execution changes color property • Command determination depends on current color DEMO – Before & After MVVM MVVM EXERCISE www.devreach.com Unit Testing • • • • • • ViewModel is totally decoupled from View Has no dependency on View class Can even reside in separate assembly Can be instantiated like regular class Unit test can test properties (if needed) Unit test can set state and call upon command execution www.devreach.com DEMO UNIT TESTING www.devreach.com ViewModel-First • Views contain other Views • Same hierarchy for ViewModels – ViewModel exposes other ViewModels as state • Commands cause ViewModel “flipping” • Data Templates provide VM-V mapping – Silverlight requires a Type-Converter technique • Can concentrate on the logic of what ViewModel to use when and why – independent of actual View that will show www.devreach.com DEMO – ViewModel-First VIEW SWITCHING www.devreach.com Where to next? • Further technologies intertwined with MVVM – Type Converters – Validation Techniques – Design-Time Data – Dependency Injection – Frameworks www.devreach.com Frameworks ObjectBase Relay Command ModelBase ViewModelBase Page Conductors TabbedViewModel ToolViewModel SaveableTabbedViewModel DialogViewModel RibbonTabViewModel UndoableViewModel Validation Rules Type Converters Event Argument Classes CustomerViewModel CustomerProfileViewModel Enums View Bases CustomerGenInfoViewModel www.devreach.com CustomerBillingViewModel CustomerOrdersViewModel Frameworks • • • • • MVVM Foundation MVVM Light Caliburn CSLA Prism www.devreach.com Finalizer • ViewModels provide a great binding source for XAML views • Decoupleness allows easy testing • Can set up ViewModel inheritance chains for commonly used state or behavior – Not possible with code-behind • Much cleaner design • Take the time to setup MVVM – it’ll be worth it • Use or build a framework – at minimum, a base layer www.devreach.com Finalizer • Let your ViewModel evolve naturally • Think about ViewModel inheritance where applicable • Don’t concentrate on code-behind elimination – It will happen naturally and eventually – In most cases, you may start out never using code-behind • Don’t forget your unit tests – Should have one unit test per-ViewModel www.devreach.com References • www.dotnetdude.com • Josh Smith’s Blog – http://joshsmithonwpf.wordpress.com/ • In the Box – MVVM Training – Karl Shifflett – http://karlshifflett.wordpress.com/2010/11/07/inthe-box-ndash-mvvm-training/ – Full kudos for the MVVM Before/After exercise • TONS of MVVM stuff on the web www.devreach.com Thank You ! @miguelcastro67 www.dotnetdude.com [email protected] Miguel A. Castro www.devreach.com