Real world apps with Xamarin and MVVM
2 likes664 views
The document outlines the process of building a real-world cross-platform app called 'My Trains' using Xamarin and the MVVMCross framework, focusing on the architecture and key components such as data binding, view models, and services. It demonstrates how to implement features like searching train journeys and managing user data, while promoting code reuse across both iOS and Android platforms. The document also includes code samples and instructions for setting up the applications in both environments, highlighting best practices and developer resources.
![[Activity(
Label = "@string/ApplicationName", MainLauncher = true)]
public class SplashScreen : MvxSplashScreenActivity
{
public SplashScreen()
: base(Resource.Layout.SplashScreen)
{
}
}
Splash screen](https://image.slidesharecdn.com/realworldappswithxamarinandmvvm-160921101339/85/Real-world-apps-with-Xamarin-and-MVVM-58-320.jpg)
![[MvxFragment(typeof(MainViewModel), Resource.Id.content_frame, true)]
[Register("mytrains.droid.views.JourneyDetailsFragment")]
public class JourneyDetailsFragment: MvxFragment<JourneyDetailViewModel>
{
public override View OnCreateView
(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
base.OnCreateView(inflater, container, savedInstanceState);
return this.BindingInflate(Resource.Layout.JourneyDetailsView, null);
}
}
Detail page (fragment)](https://image.slidesharecdn.com/realworldappswithxamarinandmvvm-160921101339/85/Real-world-apps-with-Xamarin-and-MVVM-60-320.jpg)
Real world apps with Xamarin and MVVM
- 1. Building a real-world cross-platform app with Xamarin and MVVM Gill Cleeren @gillcleeren
- 2. Gill Cleeren Microsoft MVP & RD Solution Architect @gillcleeren www.snowball.be gill@snowball.be
- 3. Xamarin, HTML5, WPF, social and Windows development http://gicl.me/mypscourses
- 4. Overview We’ll start with Looking at the final app Understand the concepts of the architecture Understand MvvmCross And then… We’ll explore the architecture We’ll look at the shared blocks We’ll see the Android and iOS apps And we’ll add some tests And then we’ll all go home. Or get a drink.
- 5. The app we’ll be using • My Trains • Works on iOS and Android • Searching train journeys • View journey details • Add to My Journeys • Settings • Based on MvvmCross framework
- 6. Code available on GitHub via https://github.com/GillCleeren/MyTrains
- 7. Concepts of the architecture
- 8. Data Binding
- 9. UI Element UI Property Object Property Data Binding 3 4 1 2 Binding target Binding source
- 10. The Data Context From: London To: Manchester Departure: 11:00 Save Object
- 11. We can bind to… Single objects Collections
- 12. <TextView android:textSize="18dp" local:MvxBind="Text SelectedJourney.JourneyDate" /> Binding in Android (using MvvmCross)
- 13. var set = this.CreateBindingSet<JourneyDetailView, JourneyDetailViewModel>(); set.Bind(DepartureDateLabel) .To(vm => vm.SelectedJourney.JourneyDate)); Binding in iOS (using MvvmCross)
- 14. public class MyModel : INotifyPropertyChanged { private string _myProperty; public string MyProperty { get { return _myProperty; } set { _myProperty = value; PropertyChanged (this, new PropertyChangedEventArgs("MyProperty"); } } public event PropertyChangedEventHandler PropertyChanged; } Change notifications
- 15. Binding modes OneTime OneWay TwoWay OneWayToSource
- 16. <EditText local:MvxBind="Text NumberOfTravellers, Mode=TwoWay" /> Binding modes in code
- 17. public class DateTimeToDayConverter : MvxValueConverter<DateTime, string> { protected override string Convert(DateTime value, Type targetType, object parameter, CultureInfo culture) { return value.ToString("MMM dd, yyyy"); } } <TextView local:MvxBind="Text SelectedJourney.JourneyDate, Converter=DateTimeToDay" /> Converters
- 18. And now for something completely MVVM!
- 19. MVVM, c’est quoi? Architectural pattern Based on MVC Data binding & Commanding XAML
- 20. What we all did when we were young… Write code in code-behind… Lots of it. Data Model View “View” code Code-Behind Event Handlers
- 21. Writing testable code however, is becoming the norm. Finally. Courtesy of MVVM. Data Model View “View code” Code-Behind View Model State + Operations Change notification Data-binding and commands
- 22. public class JourneyDetailViewModel : MvxViewModel, IJourneyDetailViewModel { public Journey SelectedJourney { get { return _selectedJourney; } set { _selectedJourney = value; RaisePropertyChanged(() => SelectedJourney); } } public MvxCommand CloseCommand { get { return new MvxCommand(() => Close(this)); } } } Sample view model
- 24. The powers of MvvmCross Open source Promotes sharing of code iOS, Android, XF, WPF…
- 25. MvvmCross features Data binding IOC built-in Rich support for plugins
- 28. Core project (Shared) UI projects Repositories Data Services View Models Other services Models Remote service iOS Android Windows UWP Mvvm Cross MvvmCross
- 29. Core project (Shared) UI projects Repositories Data Services View Models Other services Models Remote service iOS Android Windows UWP Mvvm Cross MvvmCross
- 30. Unit test project Shared code Android project iOS project Solution and Projects
- 31. The Core Project Portable class library Shared Project Standard Library Project
- 33. Demo Looking at the solution and the MvvmCross packages
- 34. Exploring the Core project
- 35. Important classes to start with… App AppStart Demo
- 36. Model Classes POCO Client-side model Sometimes needs to be mapped
- 37. public class User { public int UserId { get; set; } public string UserName { get; set; } public string Email { get; set; } public string Password { get; set; } } Sample model
- 38. Repository layer Actual data retrieval Layer between data and app CRUD-based Single model Asynchronous Maps to local models
- 39. public class SavedJourneyRepository : ISavedJourneyRepository { public async Task<IEnumerable<SavedJourney>> GetSavedJourneyForUser(int userId) { ... } public async Task AddSavedJourney (int userId, int journeyId, int numberOfTravellers) { ... } } Sample repository
- 40. Services Layer between repo and VMs Unit of functionality Business rules Abstractions with interfaces
- 41. public class CityDataService: ICityDataService { public async Task<List<City>> GetAllCities() { ... } public async Task<City> GetCityById(int cityId) { ... } } Sample data service
- 42. Demo Exploring the Core project
- 43. IOC & Service location in MvvmCross Central location for dependencies Useful for testing Built into MvvmCross
- 44. Mvx.RegisterSingleton<ICityDataService> (new CityDataService()); var cityDataService = Mvx.Resolve<ICityDataService>(); Registering with the IOC container
- 45. public class UserDataService: IUserDataService { private readonly IUserRepository _userRepository; public UserDataService(IUserRepository userRepository) { _userRepository = userRepository; } } Registering with the IOC container
- 46. We can use the IOC container to plug a different implementation into the core project per platform.
- 47. Demo The Mvx service locator in use
- 49. public class JourneyDetailViewModel : MvxViewModel, IJourneyDetailViewModel { public Journey SelectedJourney { get { return _selectedJourney; } set { _selectedJourney = value; RaisePropertyChanged(() => SelectedJourney); } } } View Model
- 50. public class JourneyDetailViewModel : MvxViewModel, IJourneyDetailViewModel { public MvxCommand CloseCommand { get; set; } public JourneyDetailViewModel() { CloseCommand = new MvxCommand(() => { Close(this); }); } } View Model
- 51. NavigateToSearchJourneyCommand = new MvxCommand(() => ShowViewModel<SearchJourneyViewModel>()); ViewModel navigation
- 52. Demo View Models
- 53. Moving to the Android app
- 55. Packages in the Android app MvvmCross Plugins Xamarin Android support packages
- 56. Starting the actual Android app Android app Core Setup App Initialize() AppStart() First VM()
- 57. public class Setup: MvxAndroidSetup { public Setup(Context applicationContext) :base(applicationContext) { } protected override IMvxApplication CreateApp() { return new Core.App(); } } ViewModel navigation
- 58. [Activity( Label = "@string/ApplicationName", MainLauncher = true)] public class SplashScreen : MvxSplashScreenActivity { public SplashScreen() : base(Resource.Layout.SplashScreen) { } } Splash screen
- 59. Demo Looking at the Android app
- 60. [MvxFragment(typeof(MainViewModel), Resource.Id.content_frame, true)] [Register("mytrains.droid.views.JourneyDetailsFragment")] public class JourneyDetailsFragment: MvxFragment<JourneyDetailViewModel> { public override View OnCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { base.OnCreateView(inflater, container, savedInstanceState); return this.BindingInflate(Resource.Layout.JourneyDetailsView, null); } } Detail page (fragment)
- 62. Creating the different Android views Demo
- 63. Creating the DrawerLayout navigation Main Activity MenuFragment Search Journeys Fragment
- 64. Demo Adding the DrawerLayout navigation
- 65. And now: iOS
- 66. The iOS Project
- 67. Packages in the iOS app MvvmCross Plugins
- 68. Application Startup iOS app Core Setup App Initialize() AppStart() First VM()
- 69. public class Setup: MvxIosSetup { public Setup(MvxApplicationDelegate applicationDelegate, UIWindow window) : base(applicationDelegate, window) { _applicationDelegate = applicationDelegate; _window = window; } protected override IMvxApplication CreateApp() { return new App(); } protected override void InitializeIoC() { base.InitializeIoC(); Mvx.RegisterSingleton<IDialogService>(() => new DialogService()); } } Setup
- 71. Demo Looking at the iOS app structure
- 72. public partial class JourneyDetailView : BaseView { protected JourneyDetailViewModel JourneyDetailViewModel => ViewModel as JourneyDetailViewModel; public JourneyDetailView(IntPtr handle) : base(handle) { } protected override void CreateBindings() { } } Sample view controller
- 74. Creating the different iOS views Demo
- 75. Main View Model Tab Navigation in iOS Search Journey View Model Saved Journeys View Model Settings View Model
- 76. Demo Adding the Tab navigation
- 78. What are plug-ins for MvvmCross? Add functionality Work because of IOC Can be shared or specific for a platform Extension point NuGet
- 79. Existing plugins Database (Sqlite) Email Files Localization Messenger Location
- 80. Demo Showing web pages with the Browser plugin
- 81. Putting our architecture to the test
- 82. Unit tests – Why? Bugs No fear of change Better software
- 83. Demo Testing the view models and the services
- 84. Summary • MVVM and MvvmCross promote reuse • iOS and Android app can share more code • Architecture can be your starting point
- 85. Take a look at the code and tweet @gillcleeren for questions or remarks!
- 86. And watch the full Pluralsight course via https://www.pluralsight.com/courses/mvvm-based- architecture-xamarin-mobile-apps
- 87. Thank you!
- 88. Q&A
- 89. Building a real-world cross-platform app with Xamarin and MVVM Gill Cleeren @gillcleeren
Editor's Notes
- #43: Don’t forget App and AppStart!
- #57: the native Application will 'be created' first within the construction of the native Application, a Setup will be created the Setup will perform very basic tasks - e.g. initialisation of the IoC system (seehttps://github.com/slodge/MvvmCross/wiki/Service-Location-and-Inversion-of-Control) then the Setup will call into the core project, construct an App and will call Initialize on it. during the Initialize your App will typically: register your app-specific services with the IoC system create and register a Start object the Setup will then configure the UI side of the project - especially things like lookup tables for views finally the Setup will start the MvvmCross binding engine (if needed) with Setup complete, your native Application can then actually start. to do this, it requests a reference to the Start object and calls Start() on it after this, the app will start presenting ViewModels using databound Views
- #69: the native Application will 'be created' first within the construction of the native Application, a Setup will be created the Setup will perform very basic tasks - e.g. initialisation of the IoC system (seehttps://github.com/slodge/MvvmCross/wiki/Service-Location-and-Inversion-of-Control) then the Setup will call into the core project, construct an App and will call Initialize on it. during the Initialize your App will typically: register your app-specific services with the IoC system create and register a Start object the Setup will then configure the UI side of the project - especially things like lookup tables for views finally the Setup will start the MvvmCross binding engine (if needed) with Setup complete, your native Application can then actually start. to do this, it requests a reference to the Start object and calls Start() on it after this, the app will start presenting ViewModels using databound Views