MVVM Design Pattern - Model View ViewModel

21,661 views
21,397 views

Published on

Introduction to Design patterns, MVVM Design Pattern - Model View ViewModel, and a comparaison with MVC and MVP and normal multi layered and multi architecture application design pattern.

Published in: Technology
5 Comments
27 Likes
Statistics
Notes
No Downloads
Views
Total views
21,661
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
1,045
Comments
5
Likes
27
Embeds 0
No embeds

No notes for slide

MVVM Design Pattern - Model View ViewModel

  1. 1. INTRODUCTION TO DESIGN PATTERN O C O O S G A MVVM Jaffal Hasan November 2009
  2. 2. AGENDA Design Patterns Overview Do ArabiaGIS needs a pattern? Patterns examples P tt l Overview of MVC-MVP and MVVM design patterns How T choose the appropriate pattern? H To h th i t tt ? MVC, MVP or MVVM with WPF ? MVVM View Concept ViewModel Concept Model Concept How it works? Next Step ! N S
  3. 3. AGENDA Design Patterns Overview Do ArabiaGIS needs a pattern? Patterns examples P tt l Overview of MVC-MVP and MVVM design patterns How T choose the appropriate pattern? H To h th i t tt ? MVC, MVP or MVVM with WPF ? MVVM View Concept ViewModel Concept Model Concept How it works? Next Step ! N S
  4. 4. DESIGN PATTERN OVERVIEW Set of guidelines Provide solutions to common software design problems bl Consists of one or several software design elements such as modules, interfaces, classes, objects, methods, functions, processes, threads, etc., Relationships among the elements, and a behavioral description Example design patterns: Model/View/Controller
  5. 5. DESIGN PATTERN OVERVIEW Advantages: Improve the structure of software Simplify Si lif maintenance i t Shared language for communicating Separation of concerns Minimize logic needed in views Enhance testability Reduce development time Easy to customize applications Disadvantages: Design pattern can be overkill in Simple UI
  6. 6. AGENDA Design Patterns Overview Do ArabiaGIS needs a pattern? Patterns examples P tt l Overview of MVC-MVP and MVVM design patterns How T choose the appropriate pattern? H To h th i t tt ? MVC, MVP or MVVM with WPF ? MVVM View Concept ViewModel Concept Model Concept How it works? Next Step ! N S
  7. 7. DO WE NEED A PATTERN? • ASP.NET Al Theyab • VB.NET • Web services • Silverlight Political Party • Web services • C# • ASP.NET LD • VB.NET • VB 6 PowerMap •AAccess
  8. 8. DO WE NEED A PATTERN? Multiple M lti l projects j t Big size projects – Long time projects Everyone speaks a different language No code maintainability Resources Human resources: Developers – analysts – QA Technical resources: Servers Resource moving from project to project Resource Sharing Resource troubleshooting an application Time loss in understanding The structure The Th technology h l
  9. 9. DO WE NEED A PATTERN? Why don’t use the same concepts, guidelines and rules?
  10. 10. UI, BUSINESS LOGIC AND DATA Business applications consist of user interface (UI), business logic, and data models. When UI, business logic and data are collapsed into one object in rich users interface it interface, can lead to some of the following problems: Difficult to use the data outside that object Hard to change the UI, when UI and data are locked in the same object. Hard to use multiple views of the same data. Difficult to synchronize multiple view of the same data. data
  11. 11. AGENDA Design Patterns Overview Do ArabiaGIS needs a pattern? Patterns examples P tt l Overview of MVC-MVP and MVVM design patterns How T choose the appropriate pattern? H To h th i t tt ? MVC, MVP or MVVM with WPF ? MVVM View Concept ViewModel Concept Model Concept How it works? Next Step ! N S
  12. 12. DESIGN PATTERN CLASSIFICATIONS Creational patterns Structural patterns Behavioral patterns
  13. 13. DESIGN PATTERNS EXAMPLES MVC Model – View – Controller MVP Model – View – Presenter Introduced by Martin Fowler in 2004 MVVM Model – View – ViewModel Originated from Microsoft as a specialization of the MVP MVC# and ASP.NET MVC For web application ( ASP.NET / VB.NET-C#.NET)
  14. 14. AGENDA Design Patterns Overview Do ArabiaGIS needs a pattern? Patterns examples P tt l Overview of MVC-MVP and MVVM design patterns How T choose the appropriate pattern? H To h th i t tt ? MVC, MVP or MVVM with WPF ? MVVM View Concept ViewModel Concept Model Concept How it works? Next Step ! N S
  15. 15. GOALS • Separation of concerns • Decoupling the layers and components • R d i Reducing d development time ( multi processes at time) l i li i ) • Testability • Flexibility Fl ibilit • Minimal Code in UI • Changes in layers: DBMS • Change or use multiple platform to present data (mobile – web ..)
  16. 16. MVC : MODEL – VIEW - CONTROLLER calls ll Controller Manipulates View Model Fires Events
  17. 17. MVC REFERENCES MAP View Controller Model MVC
  18. 18. MVC :MODEL – VIEW - CONTROLLER • Elements o Model: represents data and business rules/state o View: renders th d t or state; visible l Vi d the data t t i ibl layer o Controller: manages Views & user interaction; coordinates with one or more Models • Guidelines o Controller doesn’t know anything about the View y g o Views can switch Controllers o Single Controller usable by multiple Views o View subscribes to Model change events
  19. 19. 3 TIERS AND 3 LAYERS N tier architecture is about splitting up an application in different (logical and or physical ) layers, layers UI on a machine (or set of machines), machines) Business logic and services on another... Layered architecture Development model where presentation, business logic and data are separated.
  20. 20. MVC VS. 3-LAYERS 3-Layers architecture MVC architecture PL Model Gets the G t th appropriate view i t i BL Vie View Controller • The controller controls and Model presents – BL presents the data DAL • Linear vs. triangular • Can be implemented together • MVC h guidelines – PL no guidelines has id li id li
  21. 21. MVC MVC comes in different flavors MVC active model the model must notify the views to refresh the display MVC passive model The controller modifies the model and then informs the view that the model has changed and should be refreshed
  22. 22. MODEL – VIEW - PRESENTER calls Presenter Updates View Manipulates Model
  23. 23. MODEL – VIEW - PRESENTER • How does it differ from MVC? Presenter refers back ff f ? f to View but Controller does not • Elements o Model: represents data and business rules/state o View: renders the data or state; visible layer o Presenter: manages Vi P Views & user i interaction; coordinates i di with one or more Models; can update the View directly • Guidelines o Presenter refers to an abstraction (interface or abstract base- class) of the View for testability o Presenter updates M d l and the Vi P t d t Model d th View o More testable than MVC o Less code behind than MVC o More separation of concepts than MVC
  24. 24. MVP REFERENCES MAP View View Presenter Controller Model Model MVC MVP
  25. 25. MODEL – VIEW - VIEWMODEL ll calls View Model Fires Events View Manipulates p Model
  26. 26. MODEL – VIEW - VIEWMODEL • How does it differ from MVP? ViewModel does not need a reference to a View • Elements o Model: represents data and business rules/state p o View: renders the data or state; visible layer o ViewModel: Coordinates with one or more Models; exposes properties for the View to bind to • Guidelines o View knows about the ViewModel but not the Model o ViewModel knows about the Model but not the View o Model only knows about itself y o View binds to properties in the ViewModel o ViewModel can combine state info and/or data from multiple Models o .Net XAML classes expose a DataContext property to which the ViewModel can b bound either declaratively or in code behind be b d ith d l ti l i d b hi d o Changes to properties in ViewModel automatically propagate to the View – no additional wiring needed! o Data changes made in the ViewModel, never the View • More testable than MVC than either MVC or MVP
  27. 27. MVVM REFERENCES MAP View View View Presenter ViewModel Controller Model Model Model MVC MVP MVVM
  28. 28. BENEFITS Modularity M d l it decoupling components allows each component to be versioned independently worked on by individuals on team (UI person, DB person, k d b i di id l etc) Flexibility multiple Views for one M d l ( b f l i l Vi f Model (web frontend, desktop d d k frontend, mobile frontend, etc) replace one component (replace data storage from flat file to database) Maintainability only change one component where bug exists, less risk in late changes Testability each component communicates through contract so each component can be unit tested independently unit-tested
  29. 29. AGENDA Design Patterns Overview Do ArabiaGIS needs a pattern? Patterns examples P tt l Overview of MVC-MVP and MVVM design patterns How T choose the appropriate pattern? H To h th i t tt ? MVC, MVP or MVVM with WPF ? MVVM View Concept ViewModel Concept Model Concept How it works? Next Step ! N S
  30. 30. MVC, MVP OR MVVM ? How to choose? Based on the used technologies. t h l i
  31. 31. AGENDA Design Patterns Overview Do ArabiaGIS needs a pattern? Patterns examples P tt l Overview of MVC-MVP and MVVM design patterns How T choose the appropriate pattern? H To h th i t tt ? MVC, MVP or MVVM with WPF ? MVVM View Concept ViewModel Concept Model Concept How it works? Next Step ! N S
  32. 32. WINDOWS PRESENTATION FOUNDATION WPF MVVM pattern adaptation
  33. 33. WPF?
  34. 34. WPF WPF and Sil li ht are UI d d Silverlight development platforms l t l tf Developer specialized in user interface design and human- computer interaction Most powerful feature is the two way binding Most people’s first attempts at WPF resemble their first forays into winforms or even a VB Centric approach winforms, Name all UI controls Implement handlers for events coming from controls (i.e. Button “click etc) directly in code behind click, Store references to model objects in code behind Write code directly populate named controls Results: Coupled code-behind and XAML (View) View has become storage for data: no unit testing Not making use of two way binding.
  35. 35. MVC, MVP OR MVVM WITH WPF ? MVP can work with WPF But Not t ki f ll d N t taking full advantage of two way binding of WPF t ft bi di f You need to implement MVP style assessors for all your controls and write code to always callback to the view to set controls value.
  36. 36. MICROSOFT CHOICE ! Microsoft was using MVVM internally to develop WPF Mi ft i i t ll t d l applications, such as Microsoft Expression Blend. MVVM is targeted at modern UI development platforms (WPF and Silverlight) [Wikipedia] MVVM was designed to make use of specific functions in i WPF [Wikipedia] [Wiki di ] WPF MVVM Silverlight
  37. 37. AGENDA Design Patterns Overview Do ArabiaGIS needs a pattern? Patterns examples P tt l Overview of MVC-MVP and MVVM design patterns How T choose the appropriate pattern? H To h th i t tt ? MVC, MVP or MVVM with WPF ? MVVM View Concept ViewModel Concept Model Concept How it works? Next Step ! N S
  38. 38. MVVM ORIGIN MVC MVP MVVM Originated from Microsoft as a specialization of the MVP design p g pattern introduced by Martin Fowler y Specific for the Windows Presentation Foundation (WPF). Largely based on the Model-view-controller pattern (MVC)
  39. 39. MODEL – VIEW - VIEWMODEL “ViewModel acts as a complete mirror of the view but it's a stand alone C# class – you can think of it as an adapter for the view” y p Jason Dolinger WPF Architect
  40. 40. MODEL – VIEW - VIEWMODEL View ViewModel Model •UserControl based •Implements •No WPF related concepts •Xaml INotifyPropertyChanged •Event based mechanism •Minimal code behind •Expose Icommand to signal changes to the •Datacontext set to the •Handle validation ViewModel associated VM •Adapter class between the •May already exists before •No event handlers h dl View and the Model Vi d th M d l the introduction of WPF •Listen to Model’s events mechanisms •Data binding to VM (datas & commands) •Testable
  41. 41. VIEW UserControl based Xaml Minimal code behind No event handlers Datacontext set to the associated VM Data binding to VM (datas & commands)
  42. 42. VIEW– USER CONTROL A control created by a developer, usually by combining other controls, often intended for use in a specific application
  43. 43. VIEW– DATA CONTEXT The tit i Th entity is set to the t t th DataContext for a control. The DataContext refers to a source of data that can be bound to a target. The DataContext often is set to an instance of an entity.
  44. 44. VIEW– DATA BINDING Simple way to display and interact with data A connection between the UI and a data object Allows d t t fl All data to flow b t between th t the two Automated Databing D t bi g push the changes to from Vi M d l h th h g t f ViewModel to View and From View To ViewModel Path: Bind a Dependency property to a binding source Mode: One Way Two Way One Time
  45. 45. VIEW– DATA BINDING Dependency Binding Binding Property Object Source Mode
  46. 46. VIEWMODEL Implements INotifyPropertyChanged Expose Icommand Handle validation Adapter class between the View and the Model Listen to Model’s events Testable
  47. 47. VIEWMODEL– INOTIFYPROPERTYCHANGED The INotifyPropertyChanged interface is used to notify clients, typically binding clients, that a property value has changed changed. INotifyCollectionChanged for collections (Observable collections ): will fire NotifyCollectionChanged event when items added/removed
  48. 48. VIEWMODEL– ICOMMAND Allow Multiple source to invoke it
  49. 49. “you are on the right track when you almost NEVER have to t name a control with x:Name” t l ith N ” Jason Dolinger WPF Architect
  50. 50. MODEL No WPF related concepts Event based mechanism to signal changes to the ViewModel Vi M d l May already exists before the introduction of WPF mechanisms
  51. 51. THE FULL IMAGE
  52. 52. DEMO
  53. 53. NEXT STEP? Web Applications appropriate design pattern? MVC Sharp ASP.NET ASP NET MVC
  54. 54. THANKS FOR LISTENING. Jaffal Hasan hjaffal@arabiagis.com hjaffal@arabiagis com 009613926130

×