MvvmCross Quickstart

1. Titre du document
MvvmCross
Quickstart
Anthyme Caillard
anthyme@gmail.com
@anthyme

3. Ah oui, on recrute !
:-)
https://techblog.betclicgroup.com/
http://jobs.jobvite.com/betclic/

4. 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

5. MVVM, Kesako ?

6. 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

7. MVVM
Flux des interactions
Mvvm Cross

8. public interface ICommand
{
event EventHandler CanExecuteChanged;
bool CanExecute(object parameter);
void Execute(object parameter);
}
MVVM
Actions utilisateur
Mvvm Cross

9. public interface INotifyPropertyChanged
{
event PropertyChangedEventHandler PropertyChanged;
}
public class PropertyChangedEventArgs : EventArgs
{
public string PropertyName { get; }
}
MVVM
Interface INotifyPropertyChanged
Mvvm Cross

10. private bool _isSearching;
public bool IsSearching
{
get { return _isSearching; }
set
{
_isSearching = value;
RaisePropertyChanged("IsSearching");
}
}
MVVM
Propriétés publiques sur les ViewModels
Mvvm Cross

11. 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

12. MVVM
Composants dans les interactions
Mvvm Cross

13. Pourquoi
MvvmCross ?

14. 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

15. 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

16. ‒ 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

17. MvvmCross
Composants & Co

18. MvvmCross
Data Binding
Mvvm Cross

19. 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

20. ‒ 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

21. ‒ 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();
}
}

22. ‒ « 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

23. ‒ 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

24. 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

25. Demo Quickstart

26. MvvmCross
Avancé

27. ‒ Customisation de la présentation
public interface IMvxViewPresenter
{
void Show(MvxViewModelRequest request);
void ChangePresentation(MvxPresentationHint hint);
}
MvvmCross avancé
Presenter
Mvvm Cross

28. 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

29. Demo
MvvmCross
Avancé

30. ‒ 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

31. 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

32. Titre du document
Questions ?
Anthyme Caillard
anthyme.caillard@viseo.com
@anthyme