Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

MvvmCross Quickstart

863 Aufrufe

Veröffentlicht am

MvvmCross Quickstart

Veröffentlicht in: Mobil
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

MvvmCross Quickstart

  1. 1. Titre du document MvvmCross Quickstart Anthyme Caillard anthyme@gmail.com @anthyme
  2. 2. Ah oui, on recrute ! :-) https://techblog.betclicgroup.com/ http://jobs.jobvite.com/betclic/
  3. 3. Mvvm Cross Business Intelligence Technologies Web & Mobile Agence Digitale Intégrée Outsourcing ERP & Processus métiers VISEO combine ses pôles de compétences pour vous accompagner globalement, du conseil à la réalisation, depuis les processus métiers jusqu’aux expériences utilisateurs #viseospirit
  4. 4. MVVM, Kesako ?
  5. 5. Model/View/ViewModel is a variation of Model/View/Controller that is tailored for modern UI development platforms where the View is the responsibility of a designer rather than a classic developer Tales from the Smart Client, John Grossman http://blogs.msdn.com/b/johngossman/archive/2005/10/08/478683.aspx MVVM En 2005 … Mvvm Cross
  6. 6. MVVM Flux des interactions Mvvm Cross
  7. 7. public interface ICommand { event EventHandler CanExecuteChanged; bool CanExecute(object parameter); void Execute(object parameter); } MVVM Actions utilisateur Mvvm Cross
  8. 8. public interface INotifyPropertyChanged { event PropertyChangedEventHandler PropertyChanged; } public class PropertyChangedEventArgs : EventArgs { public string PropertyName { get; } } MVVM Interface INotifyPropertyChanged Mvvm Cross
  9. 9. private bool _isSearching; public bool IsSearching { get { return _isSearching; } set { _isSearching = value; RaisePropertyChanged("IsSearching"); } } MVVM Propriétés publiques sur les ViewModels Mvvm Cross
  10. 10. public interface INotifyCollectionChanged { event NotifyCollectionChangedEventHandler CollectionChanged; } public class NotifyCollectionChangedEventArgs : EventArgs { public NotifyCollectionChangedAction Action { get; } public IList NewItems { get; } public IList OldItems { get; } public int NewStartingIndex { get; } public int OldStartingIndex { get; } } public enum NotifyCollectionChangedAction { Add, Remove, Replace, Move, Reset, } MVVM Notifications des collections Mvvm Cross
  11. 11. MVVM Composants dans les interactions Mvvm Cross
  12. 12. Pourquoi MvvmCross ?
  13. 13. Pourquoi MvvmCross ? Approches Xamarin et Xamarin.Forms Mvvm Cross Approche Xamarin.Forms: Plus de partages de code, contrôles natifs Approche traditionnelle Xamarin Shared UI Code
  14. 14. Pourquoi MvvmCross ? Fonctionnalités Mvvm Cross ‒ MVVM ‒ UI Native ‒ Plus de partages de code ‒ Moins de code de plomberie ‒ Plus grande portée des Tests U ‒ Two-way Data Binding ‒ Architecture unifiée ‒ Navigation ‒ IoC ‒ Messaging ‒ Plugins ‒ … Shared UI Backend Code
  15. 15. ‒ Mono for Android (or Xamarin.Android) ‒ MonoTouch for iOS (or Xamarin.iOS) ‒ Windows Universal projects (WPA8.1 and Windows 8.1 Store apps) ‒ WinRT XAML Framework for Windows 8 Store apps. ‒ Silverlight for WP7, WP8 ‒ WPF ‒ Mono for Mac (or Xamarin.Mac) Pourquoi MvvmCross ? Plateformes Mvvm Cross
  16. 16. MvvmCross Composants & Co
  17. 17. MvvmCross Data Binding Mvvm Cross
  18. 18. public interface IMvxValueConverter { object Convert(object value, Type targetType, object parameter, CultureInfo culture); object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture); } public class MyTimeAgoValueConverter : MvxValueConverter<DateTime, string> { protected override string Convert(DateTime value, Type targetType, object parameter, CultureInfo cultureInfo) { var timeAgo = DateTime.UtcNow - value; if (timeAgo.TotalSeconds < 30) return "just now"; if (timeAgo.TotalMinutes < 10) return "a few minutes ago"; if (timeAgo.TotalMinutes < 60) return "in the last hour"; if (timeAgo.TotalMinutes < 24 * 60) return "in the last day"; return "previously"; } } MvvmCross Converters Mvvm Cross
  19. 19. ‒ Framework IoC simple intégré ‒ Mapping interfaces/implémentations Mvx.RegisterType<IContactService, ContactService>(); Mvx.ConstructAndRegisterSingleton<IContactService, ContactService>(); Mvx.RegisterSingleton<IContactService>(new ContactService()); ‒ Service Locator / Injection de dépendances var contactService = Mvx.Resolve<IContactService>(); public ContactDetailsViewModel(IContactService contactService) { } ‒ Auto register ‒ Remplaçable par d’autres Framework IoC MvvmCross Inversions de contrôle Mvvm Cross
  20. 20. ‒ 1 classe App par application ‒ Enregistrements IoC ‒ ViewModel de démarage public class App : MvxApplication { public override void Initialize() { CreatableTypes() .EndingWith("Service") .AsInterfaces() .RegisterAsLazySingleton(); RegisterAppStart<HomeViewModel>(); } } MvvmCross App & setup Mvvm Cross ‒ 1 classe Setup par plateforme ‒ Customisations du Framework ‒ Instancie l’App public class Setup : MvxAndroidSetup //MvxTouchSetup { public Setup(Context applicationContext) : base(applicationContext) { } protected override IMvxApplication CreateApp() { return new Core.App(); } protected override IMvxTrace CreateDebugTrace() { return new DebugTrace(); } }
  21. 21. ‒ « ViewModel first » ‒ Customisation possible par le presenter public class HomeViewModel : MvxViewModel { private void OpenPost(Post post) { ShowViewModel<PostViewModel>(new { id = post.Id }); } } public class PostViewModel : MvxViewModel { public void Init(int id) { } } MvvmCross Navigation Mvvm Cross
  22. 22. ‒ APIs natives unifiées public interface IMvxComposeEmailTask { void ComposeEmail(string to, string cc, string subject, string body, bool isHtml); } protected void ComposeEmail(string to, string subject, string body) { Cirrious.MvvmCross.Plugins.Email.PluginLoader.Instance.EnsureLoaded(); var task = this.GetService<IMvxComposeEmailTask>(); task.ComposeEmail(to, null, subject, body, false); } public class MvxComposeEmailTask : MvxWindowsPhoneTask, IMvxComposeEmailTask { public void ComposeEmail(string to, string cc, string subject, string body, bool isHtml) { var task = new EmailComposeTask() { To = to, Subject = subject, Cc = cc, Body = body }; DoWithInvalidOperationProtection(task.Show); } } MvvmCross Plugins Mvvm Cross
  23. 23. var entity = new Entity(); var aLabel = FindViewById<TextView>(Resource.Id.helloLabel); var aButton1 = FindViewById<Button>(Resource.Id.aButton1); var aButton2 = FindViewById<Button>(Resource.Id.aButton2); var aButton3 = FindViewById<Button>(Resource.Id.aButton3); aLabel.Text = entity.AProperty; aButton1.Click += (sender, e) => { entity.AProperty = "Hello from the button1"; aLabel.Text = entity.AProperty; }; aButton2.Click += (sender, e) => { entity.AProperty = "Hello from the button2"; aLabel.Text = entity.AProperty; }; aButton3.Click += (sender, e) => { entity.AProperty = "Hello from the button3"; aLabel.Text = entity.AProperty; }; Avant la démo … UI Android Mvvm Cross
  24. 24. Demo Quickstart
  25. 25. MvvmCross Avancé
  26. 26. ‒ Customisation de la présentation public interface IMvxViewPresenter { void Show(MvxViewModelRequest request); void ChangePresentation(MvxPresentationHint hint); } MvvmCross avancé Presenter Mvvm Cross
  27. 27. public interface IMvxMessenger { MvxSubscriptionToken Subscribe<TMessage>(Action<TMessage> deliveryAction, ...) MvxSubscriptionToken SubscribeOnMainThread<TMessage>( Action<TMessage> deliveryAction, ...) void Unsubscribe<TMessage>(MvxSubscriptionToken subscriptionId) void Publish<TMessage>(TMessage message) where TMessage : MvxMessage; //... } MvxMessenger MvvmCross avancé Messenger Mvvm Cross Publisher Publisher MvxMessage MvxMessage Subscriber Subscriber Subscriber Subscriber Publisher
  28. 28. Demo MvvmCross Avancé
  29. 29. ‒ MvvmCross c’est génial ! ‒ La communauté est réactive ‒ Le Framework a un bel historique ‒ Pas mal de tutoriaux › Mais … ‒ Le Framework évolue et donc change rapidement (comme Xamarin) ‒ Tout n’est pas documenté et les erreurs sont parfois peu explicites ‒ Induit une complexité applicative qu’il faut gérer ‒ Le ticket d’entrée sur l’apprentissage de ce Framework n’est pas négligeable Conclusion Alors j’achète ? Mvvm Cross
  30. 30. Références Mvvm Cross ‒ Github (source et doc) • https://github.com/MvvmCross/MvvmCross ‒ Wiki • https://github.com/MvvmCross/MvvmCross/wiki ‒ Blogs • http://mvvmcross.blogspot.fr/ • http://slodge.blogspot.fr/ ‒ Extension Ninja coder • https://visualstudiogallery.msdn.microsoft.com/618b51 f0-6de8-4f85-95ce-a50c658c7767 ‒ Tutoriaux Video • https://www.youtube.com/user/MrHollywoof ‒ Twitter • @slodge ‒ Code des demos • https://github.com/anthyme/MvvmCross-QuickStart ‒ Slides • http://www.slideshare.net/AnthymeCaillard/mvvm- cross-quickstart
  31. 31. Titre du document Questions ? Anthyme Caillard anthyme.caillard@viseo.com @anthyme

×