Building xamarin.forms apps with prism and mvvm
Download as PPTX, PDF0 likes337 views
This document summarizes a presentation about building Xamarin.Forms apps with Prism and MVVM. The presentation covered introducting Xamarin.Forms, creating a basic app, .NET Standard, core concepts like XAML and navigation, introducing the MVVM pattern and Prism framework, and additional topics like SQLite, authentication, and testing. It demonstrated building a simple app, integrating Prism and dependency injection, and using MVVM patterns like commands and data binding.
Building xamarin.forms apps with prism and mvvm
- 1. Building Xamarin.Forms apps with Prism and MVVM MICHAEL MELUSKY - @MRJAVASCRIPT CENTRAL PENN .NET – APRIL 17 2018
- 2. About Speaker Michael Melusky – Software Developer for Audacious Inquiry in Baltimore, MD Instructor at Penn State Harrisburg / Franklin and Marshall College
- 4. Why this topic? I spoke here on React Native back in January… Also manage a Xamarin.Forms app on the side Was developed w/o best practices and wanted to rewrite it using approaches recommended by Microsoft
- 5. Topics Intro to Xamarin.Forms Create a Xamarin.Forms app using Visual Studio Discussion on .NET Standard Go over core concepts: XAML Navigation MVVM (Model-View-ViewModel) Introduce Prism (with Unity for the DI container)
- 6. Additional Topics (Time Permitting) Pick and choose! (demo the app built for Philly.NET) SQLite integration (a “preferences” screen) Android widgets Facebook Connect Splash Screens and animation Jenkins and CI Xamarin UI.Test
- 8. Xamarin.Forms A cross platform framework for building native iOS/Android/UWP apps Acquired by Microsoft in February 2016 Product made “free” thereafter
- 9. Building Android and iOS apps Android: Built using Java/Kotlin iOS: Built using Swift/Objective-C Xamarin.Forms lets you build one code base (C#/XAML) to target both iOS and Android
- 11. Who is using Xamarin.Forms? Many are! https://www.xamarin.com/customers Microsoft built their new MSN News app: https://channel9.msdn.com/Shows/XamarinShow/Building-the-New-MSN-News-App- with-Xamarin
- 12. So how do we build a Xamarin.Forms app? Let’s build one ourselves! ** DEMO **
- 13. .NET Standard
- 14. .NET Standard (vs .NET Core) .NET Core is a framework from Microsoft for producing applications that can run on any target (Windows, Linux, OSX) Microsoft breaks these down into: Console application MVC application .NET Standard is a specification of “class libraries” between various Microsoft application frameworks Meant to replace PCL (portable class library)
- 15. .NET Standard
- 16. .NET Standard Analogy An analogy: If .NET Standard is a bird .NET Core is an eagle More features than the generic “bird” .NET 4.6.1 is a cat No features in common with the “bird”
- 17. XAML
- 18. Xamarin.Forms Views Xamarin.Forms views are built using XAML: “eXtensible Application Markup Language” If you’ve ever built a Silverlight or a WPF application, you should be at home However some controls in Xamarin.Forms differ from traditional XAML controls in WPF/Silverlight
- 20. Xamarin.Forms Controls Broken down into four components: Pages Layouts Views Cells
- 21. Pages
- 22. Layouts
- 23. Views
- 24. Views
- 25. Views
- 26. Views
- 30. Views for Setting Values
- 34. Views that Display Collections
- 35. Cells
- 36. Cells
- 37. Cells
- 38. MVVM
- 39. Model-View-ViewModel This is a design pattern that separates the XAML user interface (View) from the underlying data (Model) This intermediary between the two is called the View Model The view is a XAML file that references properties defined in the view model via bindings The View Model controls the logic of the presentation tier The view’s binding context is an instance of the view model
- 40. MVVM
- 41. MVVM ** Demo ** Integrate INotifyPropertyChanged
- 42. ViewModel Commanding The view needs to contain buttons that trigger various actions in the view model (e.g. page navigation) We don’t want the view models to contain “Clicked” handlers for the buttons since that would tie the View Model to a particular UI paradigm To allow this view model independence, a command interface exists and is supported by the following: Button MenuItem ToolbarItem SearchBar TextCell / ImageCell ListView TapGestureRecognizer
- 43. ICommand
- 44. MVVM Data Binding Design pattern to keep logic out of the classes that extend ContentPage. You can in theory write everything in the page class. Click events for the buttons Code that extracts elements from the view Let’s use data bindings instead
- 46. Data Binding Consists of two components: A source object that provides the data A target object which will consume and display the data
- 47. Data Binding
- 48. Data Binding When using data binding, there are three modes: The Mode property is used to specify the direction in which property value changes will propagate: A OneWay binding propagates changes from the source to the target. A TwoWay binding propagates changes in both directions, ensuring that the source and target objects are always synchronized. A OneWayToSource binding propagates changes from the target to the source, and is mainly used for read-only bindable properties. In Xamarin.Forms, the Mode property defaults to OneWay, and can be omitted unless a different BindingMode is required.
- 49. Data Binding ** DEMO **
- 51. Dependency Injection Typically when a constructor is invoked, any values that the object needs are passed to the constructor .NET Core uses this in particular (Constructor Injection) Any dependencies that the object needs are injected into the constructor A “service” is a good candidate for dependency injection Dependency Injection is a specialized version of the Inversion of Control Pattern (IoC) Another class is responsible for injecting the dependencies at runtime!
- 53. Dependency Injection There are a number of MVVM frameworks today to make things easier Prism, MvvmLight, FreshMvvm, et al. Let’s use Prism, but we need to pick a dependency injection container. Unity Autofac Ninject Dryloc Unity is the most popular container, let’s use this. ** DEMO REWRITE USING PRISM **
- 54. Prism Recommended by Microsoft Patterns and Practices A number of key pieces in the framework: BindableBase: Similar to our ViewModelBase, our view models can extend this DelegateCommand: Base class that implements ICommand interface INavigationService: Interface that can be injected in our view models to handle navigation IPageDialogService: Interface that can be injected in our view models for “modal” alert support
- 55. Open Topics
- 56. Pick and Choose! Xamarin.Auth and Authentication Facebook Authentication SQLite integration (user preferences) Xamarin UI.Test Jenkins and CI Android Splash Page Android Widgets
- 57. Thanks for coming Code on github Slides on slideshare @mrjavascript