#mvvm cross

[korbert]

Servicios

Imagino que alguna vez habréis tenido que "lidiar" con proyectos de clases portables (PCL). Estas maravillas, cargada de magia y veneno por igual, permite crear código mantenible y altamente reaprovechable, sin embargo, dependiendo de cuanto de portable quieres que sean, el soporte de funciones va escaseando, llegando a limitar cosas tan de uso común como el ToString o algunas funciones LINQ.

Las PCL son de uso muy recurrido cuando usamos el patrón MVVM, ya que reaprovecharemos mucho código entre plataformas, ya sea entre Windows 8 y Windows Phone, o incluso con Android, iPhone y WPF. Esto lo podremos realizar, por ejemplo, mediante el uso de MVVM Cross y Xamarin, poniendo todo el código del ViewModel, Business Layer y Database Layer en clases portables, de forma que tan solo tengamos las vistas, assets y estilos en la capa de la plataforma. Sin embargo, además de las vistas, tendremos algunas funciones que bien por estar trabajando en PCLs, o bien por implementarse de forma diferente en las distintas plataformas no podremos implementar en nuestro ViewModel o incluso en la Business Layer.

Para estos casos lo más práctico es usar servicios. Un servicio no es más que la implementación, en la capa de cada una de las plataformas, de una interfaz que usaremos desde una capa portable.

¿Cómo creo un servicio?

Lo más cómodo es usar algún sistema de inyección de dependencias, en mi caso actualmente uso el IoC que trae Mvvm Cross, pero si usáis otros no variará la forma de implementarlo, tan solo la forma de registralo. Al final de la entrada dejo un enlace a un post de Josué Yeray, con registro de servicios usando Autofac como IoC Container.

Registrando los servicios en MVVM Cross

Capa MVVM - App.cs En la capa de los ViewModels, en el App.cs, creamos un método que nos permita registrar cada uno de los servicios a su interfaz.

public void RegisterType(Type tInterface, Type tService) { Mvx.RegisterType(tInterface, tService); }

Capa de Windows 8 - Setup.cs En el Setup.cs de cada plataforma registramos cada uno de los servicios. En este caso, para simplificar, registramos tan solo el servicio de Notificaciones.

public class Setup : MvxStoreSetup { public Setup(Frame rootFrame) : base(rootFrame){ } protected override IMvxApplication CreateApp() { var app = new Apps.Core.Mvvm.App(); app.RegisterType(typeof(SNotificationService), typeof(INotificationService)); return app; } protected override IMvxTrace CreateDebugTrace() { return new DebugTrace(); } }

Capa de Windows Phone - Setup.cs Más de lo mismo...

public class Setup : MvxPhoneSetup { public Setup(PhoneApplicationFrame rootFrame) : base(rootFrame){ } protected override IMvxApplication CreateApp() { var app = new Apps.Core.Mvvm.App(); app.RegisterType(typeof(SNotificationService), typeof(INotificationService)); return app; } protected override IMvxTrace CreateDebugTrace() { return new DebugTrace(); } }

Y eso es todo, ahora solo queda crear la interfaz y su implementación.

Creamos interfaz

Capa MVVM - INotificationService.cs

public interface INotificationService { /// <summary> /// Mostramos una notificación /// <param name="message">Mensaje que queremos mostrar</param> /// </summary> bool Notify(string message); /// <summary> /// Mostramos una notificación con título /// </summary> /// <param name="message">Mensaje que queremos mostrar</param> /// <param name="title">Título - cabecera de la notificación</param> /// <returns></returns> bool Notify(string message, string title); }

Creamos implementaciones

Capa Plataforma (Windows 8) - SNotificationService.cs

using NotificationsExtensions.ToastContent; using Windows.UI.Notifications; namespace *** public class SNotificationService : INotificationService { IToastNotificationContent toastContent = null; private void ShowToast() { // Create a toast from the Xml, // then create a ToastNotifier object to show the toast ToastNotification toast = toastContent.CreateNotification(); // If you have other applications in your package, //you can specify the AppId of // the app to create a ToastNotifier for that application ToastNotificationManager.CreateToastNotifier().Show(toast); } public bool Notify(string message) { IToastText01 templateContent = ToastContentFactory.CreateToastText01(); templateContent.TextBodyWrap.Text = message; toastContent = templateContent; ShowToast(); return true; } public bool Notify(string message, string title) { IToastText02 templateContent = ToastContentFactory.CreateToastText02(); templateContent.TextHeading.Text = title; templateContent.TextBodyWrap.Text = message; toastContent = templateContent; ShowToast(); return true; } }

Capa Plataforma (Windows Phone) - SNotificationService.cs

using "Project_Name".Resources; using Coding4Fun.Toolkit.Controls; using System.Windows; using System.Windows.Media; namespace *** public class SNotificationService : INotificationService { public bool Notify(string message) { ToastPrompt toast = new ToastPrompt() { Message = message, Background = (SolidColorBrush)Application.Current.Resources["ApplicationPageBackgroundThemeBrush"], Foreground = new SolidColorBrush(Colors.White), TextOrientation = System.Windows.Controls.Orientation.Vertical, TextWrapping = TextWrapping.Wrap }; toast.Show(); return true; } public bool Notify(string message, string title) { ToastPrompt toast = new ToastPrompt() { Title = title, Message = message, Background = (SolidColorBrush)Application.Current.Resources["ApplicationPageBackgroundThemeBrush"], Foreground = new SolidColorBrush(Colors.White), TextOrientation = System.Windows.Controls.Orientation.Vertical, TextWrapping = TextWrapping.Wrap }; toast.Show(); return true; } }

Uso

Tan solo falta llamarlo desde el constructor del ViewModel, IoC ya nos dará la implementación correcta en cada caso.

private INotificationService notificationService; public MyAwesomeViewModel(INotificationService notService)) { this.notificationService = notService; }

Y más adelante, en cualquier método del viewModel.

notificationService.Notify("Service rules", "Awesome");

Y eso es todo... más adelante iré colgando los servicios que más utilizo en Windows 8 y Windows Phone.

Enlaces de interés

Compartiendo codigo en Windows Phone 7 y Windows Phone 8

Estrategias de código portable : #1 PCL - Portable Class Library

Service Locator Pattern in C#: A Simple Example

Using Portable Class Libraries to Reuse Models and ViewModels

[korbert]

Guía de MVVM Cross para Windows 8.1

Esta semana me ha tocado portar una App con un MVVM propio y varias capas a MVVM Cross. El proceso no ha sido trivial así que paso a explicar todos los cambios / añadidos que he hecho. Esto, por supuesto, sirve también para todos aquellos que os queráis meter en el interesante mundo del MVVM Cross comenzando o portando una de vuestras apps.

El ejemplo va para Windows 8, pero no debería ser muy diferente en el resto de plataformas, sobretodo en Windows Phone 8.

Capa de Windows 8

Paso 1: Instalar de nuget el Starter Pack de MVVM Cross.

Paso 2: Setup

La idea es crear una clase Setup que registre lo necesario para la plataforma. En mi caso, como ya trabajaba con Servicios, no he hecho aquí ningún cambio, básicamente he tenido que registrar dichos servicios desde aquí al ViewModelLocator (lo que en MVVM Cross se conoce como App, responsable de inicializar la aplicación y la gestión/inyección de dependencias). He respetado el nombre porque siempre lo habíamos llamado así, pero sed libres de nombrarlo App, de hecho ya se añade con este nombre al instalar el paquete de nuget en la capa del ViewModel.

public class Setup : MvxStoreSetup { public Setup(Frame rootFrame) : base(rootFrame) { } protected override IMvxApplication CreateApp() { var app = new Apps.Core.Mvvm.ViewModel.ViewModelLocator(); app.RegisterType(typeof(SConnectionService), typeof(IConnectionService)); app.RegisterType(typeof(SEncryptionService), typeof(IEncryptionService)); app.RegisterType(typeof(SGeolocationService), typeof(IGeolocationService)); app.RegisterType(typeof(SLaunchersService), typeof(ILaunchersService)); app.RegisterType(typeof(SMapsService), typeof(IMapsService)); app.RegisterType(typeof(SMessagingService), typeof(IMessagingService)); app.RegisterType(typeof(SNavigationService), typeof(INavigationService)); app.RegisterType(typeof(SNotificationService), typeof(INotificationService)); app.RegisterType(typeof(SResourceService), typeof(IResourceService)); app.RegisterType(typeof(SSettingsService), typeof(ISettingsService)); app.RegisterType(typeof(DataAccess), typeof(IDataAccess)); return app; } protected override IMvxTrace CreateDebugTrace() { return new DebugTrace(); } }

Paso 3: Modificar el App.xaml.cs

Al final del launched y antes del Windows.Current.Activate(); hay que añadir lo siguiente...

if (rootFrame.Content == null) { var setup = new Setup(rootFrame); setup.Initialize(); var startup = Cirrious.CrossCore.Mvx.Resolve(); startup.Start(); }

Obviamente tendremos que borrar la línea que hace que se navegue a la primera página.

Paso 4: Vistas

Las vistas han de utilizar el using

xmlns:views="using:Cirrious.MvvmCross.WindowsStore.Views"

y construirse en el XAML como 

views:MvxStorePage

También tendremos que ir al cs de la vista y hacer que la vista herede de MvxStorePage.

Si queremos, no obstante, podemos usar una clase PageBase (que quizás ya usábamos antes) que herede de la clase MvxStorePage.

*Nota: Si tienes algún override y te has cargado el base puede que algo no vaya bien.

Paso 5: UserControls

Podemos crear UserControls con su propio ViewModel. Para ello asignaremos el ViewModel al DataContext (en el XAML, por ejemplo)

DataContext="{Binding IndexViewModel,Source={StaticResource Locator}}

Si además tenemos una DependencyProperty y queremos asignarla a alguna propiedad del ViewModel haremos lo siguiente:

Creamos una propiedad de tipo DependencyProperty

public static readonly DependencyProperty HeaderPropery = DependencyProperty.Register("Header", typeof(string), typeof(UCTopBar), new PropertyMetadata(default(string)));

Creamos una propiedad de tipo el ViewModel que queramos.

IndexViewModel viewModel;

La asignamos en el constructor (en este caso se asigna la que hemos ido a buscar al ViewModelLocator desde la asignación al DataContext del XAML.

this.InitializeComponent(); viewModel = (IndexViewModel)this.DataContext;

Y finalmente enlazamos el DependencyProperty al ViewModel.

public string Header { get { return viewModel.HeaderText; } set { viewModel.HeaderText = value; } }

Desde el XAML, obviamente, enlazaríamos con la propiedad del ViewModel, haciendo un:

Text="{Binding HeaderText, Mode=OneWay}"

Hay que tener en cuenta que al cargar el ViewModel con la llamada al ViewModelLocator no seguirá el ciclo de vida habitual de MVVM Cross, ya que ni siquiera entrará en el InitBundle (lo veremos más adelante).

Capa del MVVM

Paso 1: Archivo ViewModelLocator (el ya nombrado App.cs de MVVM Cross).

Añadimos un método para cargar los servicios desde el Setup de la capa de plataforma.

public void RegisterType(Type tService, Type tInterface) { Mvx.RegisterType(tInterface, tService); }

En el Initialize cargamos las clases que queramos que se nos gestione mediante inyección de dependencias.

Por ejemplo, cargamos los ViewModels de esta capa mediante:

CreatableTypes() .EndingWith("ViewModel") .AsTypes() .RegisterAsLazySingleton();

Podemos cargar archivos de otras capas haciendo algo así:

typeof(IAddressRepository).Assembly.CreatableTypes() .EndingWith("Repository") .AsInterfaces() .RegisterAsLazySingleton();

Y finalmente registramos el ViewModel que queramos como inicio de la App.

RegisterAppStart();

También deberemos hacer un método, como hacíamos con el antiguo ViewModelLocator, para los ViewModels que no carguemos de forma habitual, como por ejemplo lo mencionado anteriormente de los UserControls.

public IndexViewModel IndexViewModel { get { try { return Mvx.Resolve(); } catch (Exception ex) { System.Diagnostics.Debug.WriteLine(ex.Message); } return Mvx.Resolve(); } }

Paso 2: ViewModels

El ViewModel ha de heredar ahora de MvxViewModel, cosa que no impide tener un ViewModelBase si queremos.

En cuanto al constructor, en el caso del ViewModelBase haríamos algo así.

public ViewModelBase(IMessagingService mesService, INotificationService notService, INavigationService navService, IResourceService resService) { this._messagingService = mesService; this._notificationService = notService; this._navigationService = navService; this._resourceService = resService; InitializeCommands(); }

Los commands muy parecidos a los habituales.

private Lazy _cmdGoBack; public ICommand CmdGoBack { get { return this._cmdGoBack.Value; } }

Y el InitializeCommands

private void InitializeCommands() { this._cmdGoBack = new Lazy(() => new MvxCommand(() => { Close(this); })); }

Éste en concreto cierra el ViewModel actual para ir atrás en la navegación.

Un ejemplo de ViewModel más completo que hereda de ViewModelBase

public CustomerViewModel(IConnectionService conService, IGeolocationService geoService, IManagementCustomer customerManagement, IManagementAgent agentManagement, IMessagingService mesService, INotificationService notService, INavigationService navService, IResourceService resService) : base(mesService, notService,navService,resService) { this._connectionService = conService; this._geolocationService = geoService; this._managementCustomer = customerManagement; this._managementAgent = agentManagement; InitializeCommands(); }

Navegación

ShowViewModel(new { LexId = 0 });

Con esto vamos al AddressViewModel pasándole un parámetro con nombre "LexId".

Para recoger estos parámetros...

protected async override void InitFromBundle(Cirrious.MvvmCross.ViewModels.IMvxBundle parameters) { int param = Convert.ToInt16(parameters.Data["LexId"]); await InitializeMapHeaderAndParamDependences(param); base.InitFromBundle(parameters); }

Éste método también nos servirá para inicializar nuestro ViewModel.

Si queremos, no obstante, podemos usar el método Start.

public override void Start() { base.Start(); }

Y para ir atrás se usa el ya citado Close.

Close(this);

Estado de navegación

Si quieres tener algunos datos cargados por si vuelves a la vista...

Usa el SaveStateToBundle para guardar todo lo que quieras (pasará automáticamente por aquí antes de ir a otro ViewModel).

protected override void SaveStateToBundle(IMvxBundle bundle) { bundle.Data["FilterIsVisible"] = _filterIsVisible.ToString(); bundle.Data["GridItem"] = _gridItem.ToString(); bundle.Data["HorizontalOffset"] = _horizontalOffset.ToString(); bundle.Data["SortOption"] = _sortOption.ToString(); bundle.Data["SearchText"] = _searchText; bundle.Data["FirstSortOption"] = _firstSortOption.ToString(); base.SaveStateToBundle(bundle); }

Y luego carga los datos mediante el ReloadFromBundle (pasará por aquí después del InitFromBundle y antes del Start (aunque si tienes algún await en alguno de estos métodos, esto no tiene porqué ser del todo cierto).

protected override void ReloadFromBundle(IMvxBundle state) { FilterIsVisible = Convert.ToBoolean(state.Data["FilterIsVisible"]); GridItem = Convert.ToInt16(state.Data["GridItem"]); HorizontalOffset = Convert.ToDouble(state.Data["HorizontalOffset"]); SortOption = Convert.ToInt16(state.Data["SortOption"]); SearchText = state.Data["SearchText"]; _firstSortOption = Convert.ToBoolean(state.Data["FirstSortOption"]); }

Hay que tener en cuenta que si hacemos un Close de un ViewModel y luego lo volvemos a abrir no pasará por el SaveStateToBundle ni por el ReloadFromBundle.

Convención de nombres

Si la vista se llama CustomerView el ViewModel debe llamarse CustomerViewModel, de no ser

así no lo cargará (a no ser que asignemos un método del ViewModelLocator al DataContext de

la vista, como hemos ejemplificado en el caso los UserControls).

Algunos enlaces de interés

MVVM Cross en Github

High Level Object

Configuración de App y Setup

Ciclo de vida de los ViewModel

Navegación

Wiki, con mucha información