O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

MvvmCross Quickstart

860 visualizações

Publicada em

MvvmCross Quickstart

Publicada em: Celular
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×