MvvmQuickCross for Windows Phone
Download as PPTX, PDF•2 likes•1,316 views
MvvmCross is a cross-platform MVVM framework that allows for sharing code and user interfaces across platforms. It uses the MVVM pattern with ViewModels, Models, and Views. ViewModels contain properties, commands, and notify of property changes. Models contain plain-old CLR object entities. Services can be used to access back-end services and events. The Application handles navigation between ViewModels and application states. The Navigator performs platform-specific navigation between Views. Runtime flow involves the EntryPoint instantiating Application and Navigator, then navigating between Views and ViewModels in response to user input and service events.
![ViewModel
• Properties
• Commands
• INotifyPropertyChanged
Model
• Entities (POCO)
ServiceAgent
• Service Entities
• Service Events
• Service Methods
View
• Markup
• Data binding code
(if not supported in markup)
• UI Manipulation Code
public class PlaceBidRequest
{
public int LotId { get; set; }
public decimal Price { get; set; }
}
public Task RaisePlaceBidAsync(PlaceBidRequest
placeBidRequest)
{
return _hubProxy.Invoke(
"PlaceBid",
new object[] { placeBidRequest });
}](https://image.slidesharecdn.com/mvvmquickcross-windowsphonedevday2013-131005125610-phpapp01/85/MvvmQuickCross-for-Windows-Phone-25-320.jpg)
MvvmQuickCross for Windows Phone
- 3. lightweight cross-platform Accelerates code sharing in control NuGet GitHub
- 4. ViewModel • Properties • Commands • INotifyPropertyChanged Model • Entities (POCO) View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code
- 5. ViewModel • Properties • Commands • INotifyPropertyChanged Model • Entities (POCO) Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Navigator • Navigate to view implementation Entry Point
- 6. ViewModel • Properties • Commands • INotifyPropertyChanged Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Navigator • Navigate to view implementation Entry Point
- 14. Main View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Main ViewModel • Properties • Commands • INotifyPropertyChanged SubB ViewModel • Properties • Commands • INotifyPropertyChanged SubA ViewModel • Properties • Commands • INotifyPropertyChanged SubB View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code SubA View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Composite ViewModels are also possible: class MainViewModel : ViewModelBase { List<ItemViewModel> MyItems /* Data-Bindable property }
- 17. ViewModel • Properties • Commands • INotifyPropertyChanged public int Count /* One-way data-bindable property generated with propdb1 snippet … public string MyProperty /* Two-way data-bindable property generated with propdb2 snippet … public string MyProperty2 /* Two-way data-bindable property that calls custom code in OnMyProperty2Changed() from setter, generated with propdb2c snippet … /* One-way data-bindable property generated with propdbcol snippet… public ObservableCollection<string> MyCollection public bool MyCollectionHasItems protected void UpdateMyCollectionHasItems()
- 18. ViewModel • Properties • Commands • INotifyPropertyChanged public RelayCommand DoSomethingCommand /* Data-bindable command that calls DoSomething(), generated with cmd snippet … private void DoSomething() { // TODO: Implement DoSomething() throw new NotImplementedException(); } public RelayCommand EditItemCommand /* Data-bindable command with parameter that calls EditItem(), generated with cmdp snippet … private void EditItem(object parameter) { var item = (Item)parameter; // TODO: Implement EditItem() throw new NotImplementedException(); }
- 19. ViewModel • Properties • Commands • INotifyPropertyChanged // Design-time data support #if DEBUG namespace MyApp.ViewModels.Design { public class MyModelDesign : MyViewModel { public MyModelDesign() { // TODO: Initialize the view model with hardcoded design-time data } } } #endif Note: Design-data can initially also be used at runtime for fast application prototyping, before any services or models are implemented.
- 20. ViewModel • Properties • Commands • INotifyPropertyChanged public abstract class ViewModelBase : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; protected virtual void RaisePropertyChanged( string propertyName) { … } } public class RelayCommand : ICommand { public RelayCommand(Action handler, … public RelayCommand(Action<object> handler, … public bool IsEnabled { … } }
- 21. ViewModel • Properties • Commands • INotifyPropertyChanged View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code <phone:PhoneApplicationPage xmlns:vm= "clr-namespace:MyApp.Shared.ViewModels.Design; assembly=MyApp.Shared.wp" d:DataContext="{d:DesignInstance Type=vm:MyViewModelDesign, IsDesignTimeCreatable=True }" <TextBox Text="{Binding Title, Mode=TwoWay}" … </phone:PhoneApplicationPage> public partial class MyView : PhoneApplicationPage { public MyView() { InitializeComponent(); DataContext = MyApplication.Instance.MyViewModel; } }
- 22. ViewModel • Properties • Commands • INotifyPropertyChanged Model • Entities (POCO) View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code public class ClientLotUpdate { public decimal CurrentPrice { get; set; } public int ProgressRemaining { get; set; } public RemainingTime TimeRemaining { get; set; } public ClientLotUpdate() { TimeRemaining = new RemainingTime(); } }
- 23. ViewModel • Properties • Commands • INotifyPropertyChanged ServiceAgent • Service Entities • Service Events • Service Methods View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code public class ClientLotUpdate { public decimal CurrentPrice { get; set; } public int ProgressRemaining { get; set; } public RemainingTime TimeRemaining { get; set; } public ClientLotUpdate() { TimeRemaining = new RemainingTime(); } } Note that in simple cases service entities defined in the service contract can be used directly as the ‘model’.
- 24. ViewModel • Properties • Commands • INotifyPropertyChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code public class LotUpdatedEventArgs : EventArgs { public ClientLotUpdate clientLotUpdate { get; set; } } public event EventHandler<LotUpdatedEventArgs> ActiveLotUpdated;
- 25. ViewModel • Properties • Commands • INotifyPropertyChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code public class PlaceBidRequest { public int LotId { get; set; } public decimal Price { get; set; } } public Task RaisePlaceBidAsync(PlaceBidRequest placeBidRequest) { return _hubProxy.Invoke( "PlaceBid", new object[] { placeBidRequest }); }
- 26. ViewModel • Properties • Commands • INotifyPropertyChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code public class AuctionApplication { void ContinueToAuction() void ContinueToCheckout(Basket basket) void ContinueToOrderConfirmed() void ContinueToProductList() void ContinueToProductPage(ClientLot product) void UserWantsToSignIn() bool IsUserLoggedIn() … } The ViewModel only uses the application to initiate navigation and to obtain relevant application state. ViewModels do not reference or modify other viewmodels. Exception: contained view models; e.g. a collection of ItemViewModel. ViewModels can pass parameters to the application, which in turn can use those to initialize other view models.
- 27. ViewModel • Properties • Commands • INotifyPropertyChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code public abstract class ApplicationBase { public static Task RunOnUIThread(Action action) public object CurrentNavigationContext { get; set; } } class MyApplication : ApplicationBase { public static MyApplication Instance { get … } public MyViewModel MyViewModel { get; private set; } public void ContinueToItem(Item item = null) { if (MyViewModel == null) MyViewModel = new MyViewModel(_itemService); MyViewModel.Initialize(item); RunOnUIThread(() => _navigator.NavigateToMyView( CurrentNavigationContext)); } } Application initializes viewmodel and then calls navigator for platform-specific view navigation.
- 28. ViewModel • Properties • Commands • INotifyPropertyChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Navigator • Navigate to view implementation public interface IMyAppNavigator { void NavigateToMyView(object navigationContext); void NavigateToOtherView(object navigationContext); } The navigator implementation is platform specific – it knows what type of object navigationContext is.
- 29. ViewModel • Properties • Commands • INotifyPropertyChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Navigator • Navigate to view implementation Entry Point public partial class App : Application { public static MyApplication EnsureMyApplication( Frame navigationContext) { return MyApplication.Instance ?? new MyApplication(new MyNavigator(), navigationContext); } void Application_Launching(…) { EnsureMyApplication(RootFrame).ContinueToItemList( skipNavigation: true); } void Application_Activated(…) { EnsureMyApplication(RootFrame); } } The entry point is platform specific (navigationContext, here a WP Frame) and creates platform specific service instances, such as the Navigator.
- 30. ViewModel • Properties • Commands • INotifyPropertyChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Navigator • Navigate to view implementation Entry Point class MyNavigator : IMyNavigator { void Navigate(object navigationContext, string uri) { ((Frame)navigationContext).Navigate( new Uri(uri, UriKind.Relative)); } void NavigateToMyView(object navigationContext) { Navigate(navigationContext, "/MyView.xaml"); } … } The navigator is platform specific (navigationContext, here a WP Frame).
- 31. ViewModel • Properties • Commands • INotifyPropertyChanged, INoti fyCollectionChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Navigator • Navigate to view implementation Entry Point Runtime flow: Application starts with AuctionView, user places bid and navigates to CheckoutView. 1. Entrypoint is called, creates Navigator and Application instances. 2. Application ctor creates ServiceAgent and AuctionViewModel + ProductsViewModel 3. Entry Point calls MyApplication.Instance.NavigateToAuctionView() 4. Navigator calls platform-specific navigate to AuctionView 5. View class gets ViewModel from Application.Instance 6. On platforms without data binding, the view subscribes itself to PropertyChanged on ViewModel, for select (groups of) properties (it is not necessary to bind to each individual property). Also the commands of the views are invoked from code in an event handler. 7. The viewmodel is updated by events from service and commands from view. The view updates w data binding. 8. A command on a viewmodel can invoke the ContinueTo… method on application … continue with step 3. 1 2 3 4 5 6 78 2
- 32. ViewModel • Properties • Commands • INotifyPropertyChanged, INoti fyCollectionChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Navigator • Navigate to view implementation Entry Point Runtime flow: Application starts with AuctionView, user places bid and navigates to CheckoutView. 1. Entrypoint is called, creates Navigator and Application instances. 2. Application ctor creates ServiceAgent and AuctionViewModel + ProductsViewModel 3. Entry Point calls MyApplication.Instance.NavigateToAuctionView() 4. Navigator calls platform-specific navigate to AuctionView 5. View class gets ViewModel from Application.Instance 6. On platforms without data binding, the view subscribes itself to PropertyChanged on ViewModel, for select (groups of) properties (it is not necessary to bind to each individual property). Also the commands of the views are invoked from code in an event handler. 7. The viewmodel is updated by events from service and commands from view. The view updates w data binding. 8. A command on a viewmodel can invoke the ContinueTo… method on application … continue with step 3. 1 2 3 4 5 6 78 2
- 33. ViewModel • Properties • Commands • INotifyPropertyChanged, INoti fyCollectionChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Navigator • Navigate to view implementation Entry Point Runtime flow: Application starts with AuctionView, user places bid and navigates to CheckoutView. 1. Entrypoint is called, creates Navigator and Application instances. 2. Application ctor creates ServiceAgent and AuctionViewModel + ProductsViewModel 3. Entry Point calls MyApplication.Instance.NavigateToAuctionView() 4. Navigator calls platform-specific navigate to AuctionView 5. View class gets ViewModel from Application.Instance 6. On platforms without data binding, the view subscribes itself to PropertyChanged on ViewModel, for select (groups of) properties (it is not necessary to bind to each individual property). Also the commands of the views are invoked from code in an event handler. 7. The viewmodel is updated by events from service and commands from view. The view updates w data binding. 8. A command on a viewmodel can invoke the ContinueTo… method on application … continue with step 3. 1 2 3 4 5 6 78 2
- 34. ViewModel • Properties • Commands • INotifyPropertyChanged, INoti fyCollectionChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Navigator • Navigate to view implementation Entry Point Runtime flow: Application starts with AuctionView, user places bid and navigates to CheckoutView. 1. Entrypoint is called, creates Navigator and Application instances. 2. Application ctor creates ServiceAgent and AuctionViewModel + ProductsViewModel 3. Entry Point calls MyApplication.Instance.NavigateToAuctionView() 4. Navigator calls platform-specific navigate to AuctionView 5. View class gets ViewModel from Application.Instance 6. On platforms without data binding, the view subscribes itself to PropertyChanged on ViewModel, for select (groups of) properties (it is not necessary to bind to each individual property). Also the commands of the views are invoked from code in an event handler. 7. The viewmodel is updated by events from service and commands from view. The view updates w data binding. 8. A command on a viewmodel can invoke the ContinueTo… method on application … continue with step 3. 1 2 3 4 5 6 78 2
- 35. ViewModel • Properties • Commands • INotifyPropertyChanged, INoti fyCollectionChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Navigator • Navigate to view implementation Entry Point Runtime flow: Application starts with AuctionView, user places bid and navigates to CheckoutView. 1. Entrypoint is called, creates Navigator and Application instances. 2. Application ctor creates ServiceAgent and AuctionViewModel + ProductsViewModel 3. Entry Point calls MyApplication.Instance.NavigateToAuctionView() 4. Navigator calls platform-specific navigate to AuctionView 5. View class gets ViewModel from Application.Instance 6. On platforms without data binding, the view subscribes itself to PropertyChanged on ViewModel, for select (groups of) properties (it is not necessary to bind to each individual property). Also the commands of the views are invoked from code in an event handler. 7. The viewmodel is updated by events from service and commands from view. The view updates w data binding. 8. A command on a viewmodel can invoke the ContinueTo… method on application … continue with step 3. 1 2 3 4 5 6 78 2
- 36. ViewModel • Properties • Commands • INotifyPropertyChanged, INotifyCollectionChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Navigator • Navigate to view implementation Entry Point Runtime flow: Application starts with AuctionView, user places bid and navigates to CheckoutView. 1. Entrypoint is called, creates Navigator and Application instances. 2. Application ctor creates ServiceAgent and AuctionViewModel + ProductsViewModel 3. Entry Point calls MyApplication.Instance.NavigateToAuctionView() 4. Navigator calls platform-specific navigate to AuctionView 5. View class gets ViewModel from Application.Instance 6. On platforms without data binding, the view subscribes itself to PropertyChanged on ViewModel, for select (groups of) properties (it is not necessary to bind to each individual property). Also the commands of the views are invoked from code in an event handler. 7. The viewmodel is updated by events from service and commands from view. The view updates w data binding. 8. A command on a viewmodel can invoke the ContinueTo… method on application … continue with step 3. 1 2 3 4 5 6 78 2
- 37. ViewModel • Properties • Commands • INotifyPropertyChanged, INoti fyCollectionChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Navigator • Navigate to view implementation Entry Point Runtime flow: Application starts with AuctionView, user places bid and navigates to CheckoutView. 1. Entrypoint is called, creates Navigator and Application instances. 2. Application ctor creates ServiceAgent and AuctionViewModel + ProductsViewModel 3. Entry Point calls MyApplication.Instance.NavigateToAuctionView() 4. Navigator calls platform-specific navigate to AuctionView 5. View class gets ViewModel from Application.Instance 6. On platforms without data binding, the view subscribes itself to PropertyChanged on ViewModel, for select (groups of) properties (it is not necessary to bind to each individual property). Also the commands of the views are invoked from code in an event handler. 7. The viewmodel is updated by events from service and commands from view. The view updates w data binding. 8. A command on a viewmodel can invoke the ContinueTo… method on application … continue with step 3. 1 2 3 4 5 6 78 2
- 38. ViewModel • Properties • Commands • INotifyPropertyChanged, INoti fyCollectionChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Navigator • Navigate to view implementation Entry Point Runtime flow: Application starts with AuctionView, user places bid and navigates to CheckoutView. 1. Entrypoint is called, creates Navigator and Application instances. 2. Application ctor creates ServiceAgent and AuctionViewModel + ProductsViewModel 3. Entry Point calls MyApplication.Instance.NavigateToAuctionView() 4. Navigator calls platform-specific navigate to AuctionView 5. View class gets ViewModel from Application.Instance 6. On platforms without data binding, the view subscribes itself to PropertyChanged on ViewModel, for select (groups of) properties (it is not necessary to bind to each individual property). Also the commands of the views are invoked from code in an event handler. 7. The viewmodel is updated by events from service and commands from view. The view updates w data binding. 8. A command on a viewmodel can invoke the ContinueTo… method on application … continue with step 3. 1 2 3 4 5 6 78 2
- 39. ViewModel • Properties • Commands • INotifyPropertyChanged, INoti fyCollectionChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Navigator • Navigate to view implementation Entry Point Runtime flow: Application starts with AuctionView, user places bid and navigates to CheckoutView. 1. Entrypoint is called, creates Navigator and Application instances. 2. Application ctor creates ServiceAgent and AuctionViewModel + ProductsViewModel 3. Entry Point calls MyApplication.Instance.NavigateToAuctionView() 4. Navigator calls platform-specific navigate to AuctionView 5. View class gets ViewModel from Application.Instance 6. On platforms without data binding, the view subscribes itself to PropertyChanged on ViewModel, for select (groups of) properties (it is not necessary to bind to each individual property). Also the commands of the views are invoked from code in an event handler. 7. The viewmodel is updated by events from service and commands from view. The view updates w data binding. 8. A command on a viewmodel can invoke the ContinueTo… method on application … continue with step 3. 1 2 3 4 5 6 78 2
- 40. ViewModel • Properties • Commands • INotifyPropertyChanged, INoti fyCollectionChanged Model • Entities (POCO) ServiceAgent • Service Entities • Service Events • Service Methods Application • ViewModels instance • Navigation context • Navigation transitions View • Markup • Data binding code (if not supported in markup) • UI Manipulation Code Navigator • Navigate to view implementation Entry Point Runtime flow: Application starts with AuctionView, user places bid and navigates to CheckoutView. 1. Entrypoint is called, creates Navigator and Application instances. 2. Application ctor creates ServiceAgent and AuctionViewModel + ProductsViewModel 3. Entry Point calls MyApplication.Instance.NavigateToAuctionView() 4. Navigator calls platform-specific navigate to AuctionView 5. View class gets ViewModel from Application.Instance 6. On platforms without data binding, the view subscribes itself to PropertyChanged on ViewModel, for select (groups of) properties (it is not necessary to bind to each individual property). Also the commands of the views are invoked from code in an event handler. 7. The viewmodel is updated by events from service and commands from view. The view updates w data binding. 8. A command on a viewmodel can invoke the ContinueTo… method on application … continue with step 3. 1 2 3 4 5 6 78 2