1. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel www.sela.co.il

2. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 2 Separated Presentation Patterns MVVM

3. Motivation Supervising Presenter Presentation Model Model View ViewModel © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 3

4. Client application retrieves domain data, displays it and allows the user to change it. Defining all the application logic in controls makes them complex and difficult to understand, maintain, evolve, test and re-use. Separated presentation patterns cleanly separate out the visual portions of your application from the business and presentation logic portions. Having a clean separation allows: – Developers to focus on application logic – Designers to focus on visual aspects – Unit test independently © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 4

5. 5 Model Presenter View IView Also known as Supervising Controller The View bound directly to the Model The Presenter coordinates any additional interaction between the View and the Model that cannot be achieved through simple data binding. The Presenter encapsulates presentation logic that interprets user gestures into actions against the Model; it also translates changes in the Model into user interface actions.

6. The Presentation Model provides a façade over the Model and coordinates all of the View's interaction with it. The Presentation Model is designed to be easily consumed by a View – The View can call methods, use data binding, commands, and other behaviors to interact with it. The Presentation Model also frequently adapts the underlying Model’s data into a form that is easier to represent in the user interface. The popular MVVM pattern is a variant of this pattern. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 6 Model Presentation Model View

7. Known as MVVM. MVVM is an implementation of Presentation Model designed specifically for use with WPF and Silverlight. Very popular in the WPF and Silverlight community. The View-ViewModel interaction is done through Data Binding only. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 7 Model ViewModel View Data Binding

8. Benefits of MVVM The Model The View The ViewModel View-ViewModel Gluing Triggering ViewModel Actions Attached Behaviors © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 8

9. Share a project with a designer, and have the flexibility for design work and development work to happen near-simultaneously. Solution thorough unit testing. Reusable components, both within and across projects in the organization. Flexibility to change the user interface without having to refactor other logic in the code base. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 9

10. The Model represents an application domain object. In a rich client application, the Model is part of the business layer, and represent a business entity. The Model is responsible for holding and manipulating the business data. In a thin client application, the Model usually represents only a server side data contract and not the business that manipulates it. – Usually there is a service layer which transports data-contracts to and from the server. The Model shouldn’t contain any logic to directly interact with the user: – Not responsible for formatting text to look prettier on the screen. – Not responsible for holding any visual element. – Must not reference any WPF element. The model may contain data validation. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 10

11. To maximize re-use opportunities, models should not contain any use case–specific or user task–specific behavior or application logic. The model may also include the code to support data access and caching, though typically a separate data repository or service is employed for this. Often, the model and data access layer are generated as part of a data access or service strategy, such as the ADO.NET Entity Framework, WCF Data Services, or WCF RIA Services. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 11

12. Doesn’t reference any type defined in PresentationFramework.dll, System.Windows.Forms, PresentationCore, etc. Theoretically, can be displayed in a Console Application. Doesn’t translate any content for the UI (Localized or Formatted resource). In a thin client application, doesn’t contain business logic (this should be implemented by the server). – May contain client-specific business logic which is not related to the UI In a rich client application, no need of additional logic concerning working with the model. – Encapsulates business logic and data queries from the UI Raises only events when requiring feedback from the user. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 12

13. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 13 Customer is a domain object – a model It is not related to any UI technology In that specific case, It provides validation logic In other cases it may implement the INotifyPropertyChanged interface (more on this later)

14. Data Visualization implementation. The view is the only piece the end user interacts with. A view may have behaviors associated with it. The view manages input (key presses, mouse movements, touch gestures, etc) which mapped to properties, method calls and commands of the view- model. The view is not responsible for maintaining its state. Instead, it will synchronize this with the view-model. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 14

15. Actually the view comes in two flavors: UserControl and DataTemplate. Use user-control when the view: – Is well-know at design time and can be statically created – Requires code-behind (event handling, animation control, visual tree manipulation, hit testing, access the view-model, etc.) – Should be easily designed from VS and Blend Use data-template when the view: – Is unknown at design time and must be dynamically created (you mustn't create a View from a ViewModel, it breaks the MVVM concept) – Should provide better decoupling from the view-model (data-template by definition has no code-behind) – Implicit data-template is supported (Silverlight 4 doesn’t support implicit data-templates only Silverlight 5 will) You may combine both by creating a data-template and a user-control as the single child of the data-template visual tree. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 15

16. Drop event like MouseMove and other input related events are view behaviors, hence handled by the view and mapped to view-model properties, method calls and commands. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 16

17. Since we can’t register events in data-template the view must be simple. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 17

18. This approach comes in handy later, when trying to connect the view with the view-model. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 18

19. Free of logic that affects more than the UI itself. There’s exactly one UserControl per each ViewModel class. References the view model through its DataContext property. Uses only the ViewModel and not the Model. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 19

20. The view-model is a key piece of the pattern because it introduces Presentation Separation. The view-model holds the presentation logic behind the view, which may include: presentation algorithms, error handling, fetching data and interaction with other view-models. The view model coordinates the view's interaction with the model. The view-model does all the preparation so the view can easily bound with it using data binding. The view-model may also expose methods and commands for complex scenarios where there is no simple data-binding solution – in that case the view may be coupled with the view-model but not vice versa. The view model may define logical states that the view can represent visually to the user. A view-model may be composite in terms of other view-models. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 20

21. The view-model becomes wholly responsible for the model in this scenario: – Interacts with the model to fetch and manipulate business data – It may expose the model directly, or properties related to the model, for data-binding – It may reference data services in order to fetch and manipulate the data it exposes to the view © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 21

22. The view and the view-model communicate via data- binding (usually), method calls, properties and events. The view-model exposes not only models, but other properties, such as state information and commands. The view handles its own UI events, then maps them to the view-model via commands. The models and properties on the view-model are updated from the view via two-way data binding. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 22

23. In general, a view should have exactly one view-model. A view may be composed of other views, each with its own view-model. View models might compose other view-models when necessary. A single view-model might be used by multiple views. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 23

24. The view-model notifies on property changes. Exposes models and state via properties to the view. Call services to fetch data. Implements business logic. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 24

25. “Simple” to use and “easy” to test. Tracks property changes and report them via INotifyPropertyChanged. All properties either return another ViewModel, a primitive data type or a collection of one of these. Doesn’t combine two or more properties to a new one (use value converter instead). There are commands for every action the view can trigger on the ViewModel. Totally independent of the current UI. Doesn’t reference any visual element. Every action is exposed as a command. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 25

26. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 26

27. Actually, there are three ways connecting the view and view- model together. View First – The view creates or discovers the view model. – The view typically binds to the view model as a resource, uses a view- model locator pattern, or has the view model injected via MEF, Unity, or other. ViewModel First – The view-model is responsible for creating the view and binding itself to the view. – View as data template flavor comes in handy using this approach. Marriage – Third class (such as Controller) creates or discovers both the view and the view-model, then connects them toghether. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 27

28. Discovering or creating the view-model from the view can be done directly or indirectly. Creating the view-model directly is not recommended: – Couples the view with a specific view-model – The view model may have dependencies that the view can’t resolve The view-model can be retrieved indirectly using a View-model Locator, DI Container such as Unity or MEF, other. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 28

29. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 29 A View Model Locator is responsible to create or to locate the view-model. The view can use the view-model locator to retrieve the view. The View Model Locator can be created as XAML resource and the view can resolve the view-model declaratively. <UserControl... DataContext="{Binding MyViewModel, Source={StaticResource ViewModelLocator}}">...

30. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 30

31. A DI container provides an easy way to resolve an object such as view-model with all of its dependencies. Using a DI container, a view-model can be easily retrieved by the corresponding view. There are several free DI containers in the market: – Castle Windsor based on the Castle MicroKernel: Castle Windsor Licensed under Apache 2 Well documented and very popular Well documented – Spring.NET Spring.NET Licensed under Apache 2 Written by Mark Pollack – Unity Unity Licensed as MS-PL Written by Chris Tavares.Chris Tavares Build on the "kernel" of ObjectBuilder: – Ninject formerly "Titan" Ninject Licensed under Apache 2 Was quiet, but has recently sprung back to life. Written by Nate KohariNate Kohari The view-model locator can be based on a DI container. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 31

32. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 32 The Managed Extensibility Framework (MEF) is a new library shipping in the.NET Framework 4 and in Silverlight 4 that simplifies the design of composable systems that can be extended by third parties after they have been deployed. MEF opens up your applications, allowing new functionality to be incrementally introduced by application developers, framework authors and third-party extenders. [Export(typeof(ISurfaceViewModel)), PartCreationPolicy(CreationPolicy.NonShared)] public class SurfaceViewModel : NotificationObject, ISurfaceViewModel { [Import] private ISurface Surface { get; set; } public int SurfaceWidth { get { return Surface.Dimensions.Width; } } public int SurfaceHeight { get { return Surface.Dimensions.Height; } }

33. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 33

34. Since we are not dealing with UI elements in the view-model anymore, there should be a simple way for the View to trigger actions on the view-model. Actually there are several options: – Delegate events from the view to the view-model by invoking view-model methods directly from the view code behind. – Expose commands as properties from the view-model so the view can bind them to UI elements from XAML or code behind. The second option using commands has several benefits: – Much less boilerplate code to write in the view code behind. – Easy way to bind actions from design tools such as Blend. – Command has availability state hence there is no need for special care in such case. – Great solution for views implemented as DataTemplate. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 34

35. WPF introduces Routed Command as default implementation for the ICommand interface. WPF routed commands deliver command messages through UI elements in the visual tree. Separating the UI from the logic, the view-model handles commands outside the visual tree. The WPF routed command implementation is not suitable in that case since we currently don’t have access to the visual tree. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 35

36. Handling commands off the visual tree, we should have custom implementation of the WPF ICommand interface. Relaying command is a custom implementation of ICommand which simply relays the command execution to the view-model instance using a simple delegate. Relaying command doesn’t depend on any visual tree. The view-model instantiate relaying commands, and expose them to the view as properties. Since the view-model handles the execution of the command, we don’t necessarily have to pass arguments. The view-model already knows the view state. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 36

37. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 37

38. Sometimes there is no option or there is no declarative way to bind the view to the view-model: – Several properties that don’t support data-binding, such as TreeView.SelectedItem. – Methods should be activated on the view such as ListBox.ScrollIntoView. – Trigger actions when routed events are raised by the view, such as mouse, keyboard and touch events. WPF Attached Properties mechanism can be used to close this gap. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 38

39. Attached property is a property that is defined by a different type than the element to which the property is applied Attached property is commonly used by most of WPF’s layout elements Attached properties are sophisticated way for extending a well known, well used element with functionality and/or state, without using inheritance. You can think of attached properties as extension- properties used from XAML or code behind. Using attached properties you can implement several patterns such as Attached Behavior. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 39

40. The code snippet below shows how to create, register and then use an attached property public static class TreeViewProperties { public static readonly DependencyProperty SelectedItemProperty = DependencyProperty.RegisterAttached(“SelectedItem", typeof(object), typeof(TreeViewProperties), new PropertyMetadata(null, SelectedItemChanged)); private static void SelectedItemChanged( DependencyObject d, DependencyPropertyChangedEventArgs e) { // Implement Attached Property Logic } public object void SetSelectedItem(UIElement element, object value) { element.SetValue(SelectedItemProperty, value); } public static string GetSelectedItem(UIElement element) { return element.GetValue(SelectedItemProperty); } public static class TreeViewProperties { public static readonly DependencyProperty SelectedItemProperty = DependencyProperty.RegisterAttached(“SelectedItem", typeof(object), typeof(TreeViewProperties), new PropertyMetadata(null, SelectedItemChanged)); private static void SelectedItemChanged( DependencyObject d, DependencyPropertyChangedEventArgs e) { // Implement Attached Property Logic } public object void SetSelectedItem(UIElement element, object value) { element.SetValue(SelectedItemProperty, value); } public static string GetSelectedItem(UIElement element) { return element.GetValue(SelectedItemProperty); }

41. Use Case – You want to add drag-n-drop functionality to ItemsControl/Selector elements you’re using. Solution 1: Create a view for holding the elements, and implement drag-n-drop by settings properties, subscribing events and calling methods directly or source/target in the view’s code behind. Solution 2: Create custom ListBox, ListView,… DataGrid controls and implement drag-n-drop on each. Solution 3: Use attached properties to attach drag-n- drop behavior with any ItemsControl/Selector instance. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 41

42. You can simply use a static class with several attached properties as shown below. The disadvantage of using a static class is that each state requires an attached property. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 42

43. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 43

44. Microsoft Expression Blend 3 introduces behaviors, which are reusable pieces of packaged code, based on Attached Properties, that can be dragged onto any object, and then fine-tuned by changing their properties. Behaviors allow you to add interactivity to your applications without having to write any code. Blend 3 attached behavior comes in two flavors: – Triggers and Actions – Behaviors © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 44

45. You can think of triggers and actions as cause-and- effect relationships. A Trigger reacts to the cause and invokes one or more Actions. Trigger is an object that listens for a specific condition, such as an event or a property change, and invokes one or more associated Actions. Triggers are extensible, so you can create custom triggers. An Action is an object that can only do something. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 45

46. To develop custom triggers and actions, first you should have Blend 3 or Blend 3 SDK installed Second you have to add reference to: System.Windows.Interactivity The assembly above is part of Blend 3 SDK. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 46

47. To implement a trigger, simply create a class which derives from TriggerBase © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 47

48. To implement an action, simply create a class which derives from TriggerAction You can implement a custom action that targets different object using TargetedTriggerAction © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 48

49. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 49

50. One way to allow users to customize the functionality of your Behavior is to expose Commands as properties of the behavior. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 50 A Behavior can act without any external notification from a Trigger or a Trigger-like item. While some condition needs to be met, it doesn't have to be invoked by a Trigger.

51. To implement a behavior, simply create a class which derives from Behavior © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 51

52. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 52

53. Separated presentation patterns cleanly separate out the visual portions of your application from the business and presentation logic portions. Separating view from business provides and easy way for unit testing MVVM is a popular pattern especially for WPF and SL. Having a clean separation allows: Developers to focus on application logic Designers to focus on visual aspects Unit test independently