MvvmCross Quickstart
32
-
Upload
anthyme-caillard -
Category
Mobile
-
view
88 -
download
0
Transcript of MvvmCross Quickstart
Titre du document
MvvmCrossQuickstart
Anthyme Caillard
@anthyme
Ah oui, on recrute !
:-)
https://techblog.betclicgroup.com/
http://jobs.jobvite.com/betclic/
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
MVVM, Kesako ?
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
MVVM
Flux des interactions
Mvvm Cross
public interface ICommand{
event EventHandler CanExecuteChanged;bool CanExecute(object parameter);void Execute(object parameter);
}
MVVM
Actions utilisateur
Mvvm Cross
public interface INotifyPropertyChanged{
event PropertyChangedEventHandler PropertyChanged;}
public class PropertyChangedEventArgs : EventArgs{
public string PropertyName { get; }}
MVVM
Interface INotifyPropertyChanged
Mvvm Cross
private bool _isSearching;public bool IsSearching{
get { return _isSearching; }set{
_isSearching = value;RaisePropertyChanged("IsSearching");
}}
MVVM
Propriétés publiques sur les ViewModels
Mvvm Cross
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
MVVM
Composants dans les interactions
Mvvm Cross
Pourquoi
MvvmCross ?
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
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
‒ 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
MvvmCross
Composants & Co
MvvmCross
Data Binding
Mvvm Cross
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
‒ 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
‒ 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();}
}
‒ « 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
‒ 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
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
Demo Quickstart
MvvmCross
Avancé
‒ Customisation de la présentation
public interface IMvxViewPresenter{
void Show(MvxViewModelRequest request);void ChangePresentation(MvxPresentationHint hint);
}
MvvmCross avancé
Presenter
Mvvm Cross
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
Demo
MvvmCross
Avancé
‒ 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
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
