19
Corrado Cavalli SSDE @ ibvsolutions.com @corcav blog.corradocavalli.com [email protected]

MVVM Cross

Embed Size (px)

Citation preview

Page 1: MVVM Cross

Corrado CavalliSSDE @ ibvsolutions.com

@[email protected]

Page 2: MVVM Cross

• Xamarin

• MVVM

• MvvmCross

Di cosa parleremo

Page 3: MVVM Cross

• Ci permette di usare C# e i tools che usiamo da sempre

• E’ di Microsoft

• E’ gratis

• Ci permette di condividere codice tra i vari sistemi operativi

• Xamarin Forms vs Xamarin Classic

• Per condividere bisogna usa ModelViewViewmodel

Perché Xamarin?

Page 4: MVVM Cross

• Metodologia basata sulla separazione dei ruoli

• 3 ruoli: Model, View e un ‘mediator’ a.k.a ViewModel

MVVM in a slide

Vie

w

Mo

de

l

Vie

wM

od

el

Property changed events

Invoke

Data

Interaction

Model events

Databinding!

Page 5: MVVM Cross

• MVVM richiede Databinding

• Nessun problema se usate Xamarin Forms

• Concetto inesistente in Android e iOS

• Voglio condividere più codice possibile con la massima flessibilità

• Xamarin Forms = Prism

• Xamarin Classic…

• MvvmLight

• MvvmCross

• Monocross (MVC)

MVVM vs Xamarin

Page 6: MVVM Cross

• Nato a novembre 2012 come fork di Monocross

• Stuart Slodge @slodge

• Dal 2013

• Tomasz Cielecki @cheesebaron

• Martijn van Dijk @Martijn00

• www.mvvmcross.com

• https://github.com/MvvmCross/MvvmCross/issues/1415

• Supporta Android, iOS, Windows (UWP/WPF/WP), Xamarin Forms

e Mac

MvvmCross

Page 7: MVVM Cross

• Flexible architecture

• PCL based

• Inversion of Control

• Dependency injection

• Value Converters

• Bindings

• Testable

• Plugins

• Pro:

• Completo, altamente configurabile, supporto community

• Contro:

• Curva di apprendimento elevata, poca documentazione

MvvmCross

Page 8: MVVM Cross

DEMOTicketNow

Page 9: MVVM Cross

• PCL (.NET Standard in v 6.0)

• Models/Interfacce

• ViewModels

• Converters

• …

• App

• Inizializza il motore di IOC e registrazione tipi (via Mvx)

• Inizializzazione del ViewModelLocator

• RegistrerAppStart

• AppStart

• Implementa IMvxAppStart

• Determina il viewmodel di avvio (anche dinamicamente)

Architettura - Core

Page 10: MVVM Cross

Architettura - Startuppublic class CustomAppStart : MvxNavigatingObject, IMvxAppStart

{

private readonly ILoginService _service;

public CustomAppStart(ILoginService service)

{

_service = service;

}

public void Start(object hint = null)

{

if (!_service.IsLoggedIn)

{

ShowViewModel<LoginViewModel>();

}

else

{

ShowViewModel<MainViewModel>();

}

}

}

Page 11: MVVM Cross

• Setup class nei progetti nativi

• Bootstrapper dell’intera app e MvvmCross engine

• Offre una serie di metodi virtual CreateXXX e InitializeXXX

• CreateApp e InitializeIoc

• Da usare per inizializzare implementazioni platform specific

• Android

• Eredita da MvxAndroidSetup

• Si crea una SplashScreenActivity

• RegistraAppStart

• iOS

• AppDelegate eredita da MvxApplicationDelegate

• Inizializzazione in FinishedLaunching

Architettura – Startup (platform)

Page 12: MVVM Cross

• I viewmodels ereditano da MvxViewModel

• RaisePropertyChanged

• ShowViewModel<SecondViewModel>

• Individua la View (\Views)

• Istanzia, crea ViewModel e associa a DataContext

• La visualizza secondo l’eventuale presenter

• Close(this)

Architettura - Core

Page 13: MVVM Cross

• ShowViewModel<SecondViewModel>(selectedItem)

Architettura - Navigazione

public class SecondViewModel : MvxViewModel

{

public void Init(MyType selectedItem)

{

}

}

• Il tipo passato deve essere serializzabile

Page 14: MVVM Cross

• Le view sono sempre più complesse, no 1 VM vs 1 View

• I presenters indicano come i ViewModel mappano sulle Views

• Setup.CreateViewPresenter / CreateIosViewContainer

• Permette di specificare come rappresentare i ViewModels

dentro le rispettive Views

• Ogni piattaforma può personalizzare il modo in cui i Viewmodels

vengono visualizzati.

Architettura - Presenters

Page 15: MVVM Cross

• Simile al Databinding di Windows

• INPC, ICommand, Converters…

• Android

• Permette di definire il binding nel .axml

• Converters

• Collections

DataBinding

xmlns:local="http://schemas.android.com/apk/res-auto" local:MvxBind="Text ArtistName, Mode=TwoWay"

local:MvxBind="Text Date, Converter=DateTimeToString"

<Mvx.MvxListViewlocal:MvxItemTemplate="@layout/item_search_result" local:MvxBind="ItemsSource Events; ItemClick ShowEventCommand" />

Page 16: MVVM Cross

• iOS

• I controller ereditano da MvxController

• Va descritto nel controller via codice usando fluent syntax

• Invocare set.Appy()!

DataBinding

var set = this.CreateBindingSet<SearchByNameView, SearchByNameViewModel>();

set.Bind(ArtistNameTextField).For(source => source.Text).To(vm => vm.ArtistName).Mode(MvxBindingMode.TwoWay);

set.Bind(BuyMessageLabel).To(vm => vm.BuyMessage);

set.Bind(DateLabel).To(vm => vm.Event.Date).WithConversion(new DateTimeToStringConverter());

Page 17: MVVM Cross

• Helpers di supporto a MVVM

• MvxTableSource, MvxObservableCollection, MvxPickerModel

• Serie di plugin NuGet che estendono MvvmCross

Architettura - PlugIns

bit.ly/mvvmcrossplugins

Page 18: MVVM Cross

• MvvmCross è la migliore soluzione MVVM su Xamarin Classic

• Maturo, supportato da community / Stack Overflow

• Copre scenari di utilizzo ‘reali’

• Estensibile

• Non immediato

• Documentazione non chiara e lacunosa

• https://mvvmcross.com

• https://github.com/MvvmCross/MvvmCross/wiki

Recap

Page 19: MVVM Cross

THANK YOU!