Build Windows 10 UWP MVVM Apps with Prism

Build Windows 10 UWP MVVM Apps with Prism Brian Noyes @briannoyes, brian. noyes@gmail. com Slides and Demos: http: //noyes. me/1 U 7 h 6 c. C

About Brian Noyes CTO and Co-founder, Solliance www. solliance. net Microsoft Regional Director Microsoft MVP Pluralsight author www. pluralsight. com Web API Insider, Windows Azure Insider, Window Store App Insider, C#/VB Insider e t brian. noyes@solliance. net @briannoyes http: //briannoyes. net © Brian Noyes. All rights reserved.

Agenda § § § Windows 10 UWP Big Picture MVVM Pattern Fundamentals MVVM Construction Approaches MVVM Communications Integrating MVVM with Windows 10 UWP Platform Features Leveraging MVVM Frameworks 3 © Brian Noyes. All rights reserved.

Windows 10 Universal Windows Platform § Native APIs of Windows 10 o o Core APIs common across all Windows 10 platforms Device-Family extensions for desktop, mobile, Io. T § Derivative from Windows 8 “Windows Runtime” § Less prescriptive/constraining than Windows Runtime was o o Styling Windowing Background tasks App activation © Brian Noyes. All rights reserved.

Windows 10 UWP MVVM § Not “baked” into the platform at all § Same core capabilities exist to use MVVM in UWP XAML apps as other XAML platforms: o o Data. Context Rich two way data binding Property change notifications Data. Templates © Brian Noyes. All rights reserved.

Windows 10 UWP MVVM § Need to be able to leverage platform specific capabilities and limitations when using MVVM in UWP o o o Frame-based navigation App activation / lifecycle schemes Transient state management Compiled bindings (aka “x: Bind”) Lack of Implicit Data. Templates © Brian Noyes. All rights reserved.

UI Separation Patterns Goals • Architectural goals o o Loose coupling Separation of concerns • Leads to o Maintainability Testability Extensibility Putting all your logic here is not good enough © Brian Noyes. All rights reserved.

No Separation of Concerns private void Compute. Customer. Orders. Total(object sender, Routed. Event. Args e) UI Element Access { var selected. Customer = this. customer. Data. Grid. Selected. Item as Customer; var orders = (from order in db. Context. Orders. Include("Order. Items") where order. Customer. Id == selected. Customer. Id select order); Data Access var sum = 0; foreach (var order in orders) { foreach (var item in order. Order. Items) { sum += item. Unit. Price * item. Quantity; Interaction/Business Logic } } this. customer. Order. Total. Text = sum. To. String(); }

Good Separation of Concerns Business Logic Data Access Model Entities Shared Client Logic View Interaction Logic UI Element Access

MVVM Responsibilities View Data Binding View. Model Object Model Client Services / Repositories Model Object

Model Responsibilities § § § Contain the client data Expose relationships between model objects Computed properties Raise change notifications - INotify. Property. Changed. Property. Chan ged Validation

View Responsibilities § § § Structural definition of what the user sees on the screen GOAL: “No Code Behind” Reality: Sometimes need some code behind

View. Model Responsibilities § Expose data to the view for presentation and manipulation § Encapsulate interaction logic - Calls to business/data layer/service - Navigation logic - State transformation logic

View. Model Data Model View. Model “Expose” “Wrapped” Client State Customer 1 public Customer { get; set; } public bool Show. Customer. Alert { get; set; } public Observable. Collection<Order. Item> Orders { get; set; } * Order 1 * public bool Logged. In { get; set; } Order_Detail * 1 Order. Item Order. Date Quantity Product. Name Product Authentication Service © Brian Noyes. All rights reserved.

Client Services / Repositories § § Shared functionality or data access Consumed by one or more View. Models Decouples View. Models from external dependencies - Data storage - Service access - Client environment Can act as data caching container

MVVM Construction / “Marrying” Schemes § Fundamental equation of MVVM: o View. Data. Context = View. Model § Approaches: o o View-First XAML construction View-First Code behind construction View-First View. Model. Locator construction View. Model-First Data. Template construction © Brian Noyes. All rights reserved.

View-First - XAML Initialize. Component( ) <User. Control x: Class="Zza. Dashboard. Customers. Customer. Edit. View“ Width="400“ Loaded="On. Loaded". . . > <User. Control. Data. Context> <local: Customer. Edit. View. Model /> </User. Control. Data. Context>. . . </User. Control>

View-First Code-Behind public partial class Customer. List. View : User. Control { public Customer. List. View() { this. Data. Context = new Customer. List. View. Model(); Initialize. Component(); } }

View-First - View. Model. Locator is a metapattern for automatically locating and hooking up the right View. Model

View. Model. Locator Process § § What view is being constructed? What View. Model should I construct? Construct (and DI) View. Model Set View. Model as View Data. Context © Brian Noyes. All rights reserved.

Data Binding Data. Context <User. Control x: Class=". . . > <Grid>. . . <Label Content="First Name: ". . . /> <Text. Box. . . Text="{Binding Customer. First. Name}"/> <Label Content="Last Name: ". . . /> <Text. Box. . . Text="{Binding Customer. Last. Name}" /> <Button. . . Command="{Binding Save. Command}" /> </Grid> </User. Control> public class Customer. Edit. View. Model : INotify. Property. Changed { public Customer { . . . } public ICommand Save. Command { get; set; } }

MVVM Communications § View. Model => View : Data binding + property change notifications § View => View. Model : Commands § View. Model = > View. Model : Pub/Sub messaging 22 © Brian Noyes. All rights reserved.

Commands § Based on classic Command design pattern § Invoker – View control § Receiver - View. Model § Use delegating command implementation § Supports decoupled command handling invocation § Supports enabling/disabling associated control Invoker ICommand Delegate Command Receiver © Brian Noyes. All rights reserved.

Hierarchical MVVM / Navigation Page Root View List View Item View. Model Item View List View. Model Details View. Model Root View. Model

MVVM and UWP Navigation INavigation. Service

Application Lifecycle Management • UWP application lifecycle states: • • • Not Running Suspended Closed. By. User Terminated Not Running Launch Running Switch Back Terminated Launch Switch Apps Suspended Low Memory Closed. By. User Shutdown © Brian Noyes. All rights reserved.

UWP MVVM Frameworks § § § Prism 6 Template 10 MVVM Light Caliburn Micro

Prism 6 for UWP Contents § Prism. Core o o o MVVM Support Commands Pub. Sub. Events § Prism. Windows o o MVVM Support Navigation Application State management Validation © Brian Noyes. All rights reserved.

Resources o brian. noyes@solliance. net @briannoyes http: //briannoyes. net § Pluralsight o e t Building Windows Store Line of Business Apps with Prism http: //www. pluralsight. com/courses/building-windows-store-businessapplications-prism WPF MVVM In Depth http: //www. pluralsight. com/courses/wpf-mvvm-in-depth § Developers Guide to Windows 10 https: //mva. microsoft. com/en-US/training-courses/a-developers-guide-to-windows-1012618? l=IV 8 HDBp. RB_9005095281 Slides and Demos: http: //noyes. me/1 U 7 h 6 c. C © Brian Noyes. All rights reserved.