Introduction To WPF/MVVM/PRISM (Open Discussion Following)

1. Introduction To WPF/MVVM/PRISM (Open Discussion Following)

2. What is WPF • Successor To Win Forms (Desktop) • Builds Aesthetically Pleasing Interfaces (but much more than just a “pretty face”….more on this later) • Segue To Silverlight Web(subset of WPF) • Similar to ASP.NET IDE to Create a WPF Project • .xaml file~ (similar to) .aspx file (design and source window with “xaml” namespace objects instead of html namespace, pronounced “zammel”) • .xaml.cs file~ .aspx.cs file (code behind) • Drag and drop WYSIWYG from Toolbox onto .xaml file (has design and source views) • Entire WYSWG design process similar to ASP.NET (event handlers, etc) • “Resources” ~ CSS • Heart of WPF is Resources, Data Binding, Triggers, Control Templates, and Data Templates you create for designing the UI and binding to your data • In conclusion…..To Create a WPF application it is VERY similar to creating an ASP.NET application, only html namespace and objects are replaced by “xaml” namespace and objects. and you create Control Templates (change the visual part of a control) and Data Templates (to control the data that a Control displays)

3. What Is WPF • Visual Studio WPF IDE (blankWpfProj) • show MainWindow similar to WinForm • show .xaml view (aspx like) • show.xaml.cs code behind • show tool box • Dem drag and drop button, textbox • Dem highlighting in Design and xml • Dem double clicking button=>event handler code • In conclusion…designing the Visual is simiar to a combination of WinForms and asp.net….HOWEVER, instead of setting visual element values like txtBox.Text = “whatever” WPF uses the concept of “Data Binding”

4. What Is WPF • WPF is all about DATA BINDING and DataContext (binding context) • You bind your Visual Elements to your code (or other controls) and Vice-Versa via dependency properties (public properties of the View or ViewModel) • Example…SimpleWpfExample • Show txtbox databinding • Dem running program and showing how visual txtbox gets its values set via PUBLIC PROPERTY • Dem entering different value and showing how value in codebehind gets changed • Show how “Get Product” button event handler is bound to “GetProductCommand”. You add event delegation code (not shown) to handle the event to delegate the event handler to WHEREVER you specify it to be (e.g., the ViewModel in MVVM)

5. What Is WPF • More on Binding • Regardless of what element you are binding and the nature of your data source, each binding always follows the model illustrated by the figure: • As illustrated by the above figure, data binding is essentially the bridge between your binding target and your binding source. The figure demonstrates the following fundamental WPF data binding concepts: • Typically, each binding has these four components: a binding targetobject, a targetproperty, a binding source, and a path to the value in the binding source to use. For example, if you want to bind the content of a TextBox to the Nameproperty of an Employeeobject, your target object is the TextBox, the target property is the Text property, the value to use is Name, and the source object is the Employee object. • The targetproperty must be a dependency property. Most UIElement properties are dependency properties and most dependency properties, except read-only ones, support data binding by default. (Only DependencyObject types can define dependency properties and all UIElements derive from DependencyObject.) • Although not specified in the figure, it should be noted that the binding source object is not restricted to being a custom CLR object. WPF data binding supports data in the form of CLR objects and XML. To provide some examples, your binding source may be a another UIElement, any list object, a CLR object that is associated with ADO.NET data or Web Services, or an XmlNode that contains your XML data. For more information, see Binding Sources Overview.

6. What Is WPF • Binding Types…show Binding cheat sheet.pdf

7. What Is WPF • More Complex Code Example • What is it?....Grid, List, Image?

8. What is WPF • Actually, it’s a Button. • Note how controls can be • Nested to any level

9. Why Use WPF • More than just a “pretty face” • WPF lets you use a consistent development model to build applications (desktop AND Web) that run in more environments (even UNIX and Mac), on more hardware, using more graphical tools (two and three dimensional graphics, high-resolution VECTOR graphics that draw lines and curves rather than bitmaps), and cutting-edge animation, audio and video. • Microsoft is pushing it (or at least was) . • Perhaps the most important reason is that makes you more employable, especially if you are a Contractor. I know another technology to keep me employed.

10. Why Use WPF • Example 1

11. Why Use WPF • Example 2

12. Why Use WPF • Example 3

13. What Is MVVM • Stands for Model-View-ViewModel • Similar to the MVP pattern where ViewModel replaces the P (Presenter) • It essentially provides for “separation of concerns”, i.e., the visual part of the application is not tightly coupled to the data and business rules of the application. Thus the data and Business rules can theoretically be changed without affecting the View. • It essentially accomplishes this by having no “code behind” in the View • Application data and business rules reside in the Model, the ViewModel acts as an intermediary between the Model and View and in WPF the View is populated with public properties of the ViewModel via WPF data binding. Again, there is no code behind in the View.

14. What Is MVVM MVVM Data Flow - Model • Model – contains the Application Data from Database or whatever • Communicates only with the ViewModel • Updates the ViewModel data whenever the data changes • ViewModel updates the Model data whenever the data changes as a result of UI actions (or whatever) • Also contains the Business Rules of the application

15. What Is MVVM MVVM Data Flow - ViewModel ViewModel • Sends Model data (via Data Binding …WPF is ALL about Data Binding) to the View • Updates View data via PropertyChanged events • Updates Model data that occur as the result of UI events (or whatever) back to the Model

16. What Is MVVM MVVM Data Flow – View • Contains NO CODE BEHIND • Gets data via data binding on observable (public) properties of the ViewModel • Handles UI events (Button Pressed, etc) via Commands, etc, sent to the ViewModel who then handles the event processing code • View data is updated via PropertyChanged events of the VM

17. Why MVVM • Separates the View from the Data and Business Rules of the application. If the Business Rules change the View may or may not have to be changed and vice-versa • Allows for the View to be handed off to Visual Designers (who are obviously well versed in WPF) while more traditional developers who are less WPF aware can develop the Business Rules of the application • Allows for automated testing with no user interaction as the UI events of the View can be simulated • Go here for a better understanding of why to us MVVM • http://blogs.msdn.com/b/dancre/archive/2006/10/11/datamodel-view-viewmodel-pattern-series.aspx

18. What Is PRISM PRISM is a set of DLL’s AND Source Code available for free and is Microsoft’s “Toolkit” for doing WPF MVVM. It automates much of the MVVM plumbing (another good toolkit for learning the MVVM pattern that is not as automated is the MVVM Light Toolkit at http://mvvmlight.codeplex.com) One of it’s main’s main advantage is that it automates much of the MVVM pluming via “Inversion Of Control” (objects are passed into other objects that use them rather than instantiating them internally) and “Dependency Injection” (automatically doing IOC) The other main advantage is that it creates the concept of “Modules” which can be independently developed (by other developers, groups or even companies) and tested. These modules communicated with each other via the PRISM’s “EventAggragator” via “Publish” and “Subscribe” messaging.

19. What Is PRISM • Inversion Of Control Example • Now the Client can use ANY spell checker that derives from interface ISpellChecker

20. What Is PRISM • Dependency Injection is what PRISM does automatically “behind the scenes”. It means that this is done without the object intervention, usually by a framework component (PRISM) that passes constructor parameters and set properties • This leads to somewhat automatic MVVM “pluming”

21. What Is PRISM • Top Level Diagram

22. What Is PRISM • More detailed

23. What Is PRISM

24. What Is PRISM • Code Sample • C:\_IT\__VisualStudio2010\Projects\SilvelightPrismDemo\SilvelightPrismDemo\PrismSample\PrismSample.sln

25. Why PRISM • Handles MVVM “pluming” automatically • Can have independently developed “Module” DLLS • Has all the advantages of MVVM (automated testing, etc)

26. Learning Curve For WPF/MVVM/PRISM • My experience to Learn WPF/MVVM/PRISM……. • 60 % WPF • 20% MVVM • 20% PRISM • Others Experiences?

27. References • www.codeproject.com • WPF 4 Unleashed – SAMS • WPF C# Programming – apress • Developers Guide To Microsoft PRISM 4 – Microsoft….all the info is definitely in there, just hard to find at times….has many good examples and has complete sample VS project code.

28. My Documentationadamsde1@msn.com

29. Open Discussion • Questions? • Experienced WPF users feel free to answer, add to answer, or share their experiences with WPF, MVVM or PRISM