[Xamarin.Forms] Utilizando Messaging Center

Mail Next-WFIntroducción

En el desarrollo de aplicaciones móviles multiplataforma con Xamarin es habitual utilizar el patrón MVVM para separar la vista de la lógica de negocio de la aplicación. De esta forma, podemos conseguir objetivos claves fundamentales como:

  • Nos permite dividir el trabajo de manera muy sencilla (diseñadores – desarrolladores)
  • El mantenimiento es más sencillo.
  • Permite realizar Test a nuestro código.
  • Permite una más fácil reutilización de código.
  • Compartir más código.

Xamarin.Forms incluye un completo sistema de enlace a datos y servicio de dependencias que nos permite realizar una completa implementación del patrón con facilidad. Sin embargo, en ocasiones, necesitamos ciertas “piezas” que nos permitan solucionar problemas existentes manteniendo la arquitectura intacta. En ocasiones realizamos cambios en un elemento de una vista que afecta a otro elemento correspondiente de otra. En este caso, debemos notificar de una viewmodel a otra del cambio.

¿Cómo lo hacemos?

Mensajes

Si has desarrollado previamente utilizando el patrón MVVM utilizando (o no) un framework posiblemente hayas utilizado lo que se conoce como sistema de mensajes. Basicamente la mensajería de basa en el patrón de diseño publish/subscribe. Contamos con tres grandes protagonistas:

  • Mensajes: Información a enviar normalmente relacionada con la lógica de negocio.
  • Publicadores: Cuando un evento ocurre, ya sea un simple click de un botón o una lógica compleja, los publicadores toman la información a enviar y publican el mensaje.
  • Subscriptores: En el lado opuesto, tenemos a los subscriptores que esperan la publicación de un mensaje de un tipo específico para captarlo con toda la información enviada y actuar en consecuencia.

Messaging Center

Xamarin.Forms cuenta con MessagingCenter para permitir la comunicación entre viewmodels u otros componentes sin que tengan que tener referencias entre ambos utilizando el patrón publish/subscribe.

Para probar MessagingCenter vamos a crear una aplicación Xamarin.Forms sencilla donde tendremos dos vistas. La primera vista mostrará un mensaje y un botón además de suscribirse a un mensaje de cambio. El mensaje se modificará utilizando MessagingCenter mientras que el botón permitirá navegar a la segunda vista. Al navegar a la segunda vista se publicará el mensaje de modo que, al regresar a la primera vista el mensaje será modificado.

Definimos la interfaz de la primera vista:

<StackLayout Padding="10" Spacing="10">
     <Label Text="{Binding Info}" />
     <Button 
          Text="Navigate to Second View"
          Command="{Binding NavigateCommand}"/>
</StackLayout>

El resultado:

Nuestra interfaz

Nuestra interfaz

En la viewmodel correspondiente a la vista definimos la propiedad que utilizaremos para mostrar el mensaje:

public string Info
{
     get { return _info; }
     set
     {
          _info = value;
          RaisePropertyChanged();
     }
}

Y el comando que permitirá la navegación a la segunda vista:

private ICommand _navigateCommand;

public ICommand NavigateCommand
{
     get { return _navigateCommand = _navigateCommand ?? new DelegateCommand(NavigateCommandExecute); }
}

public void NavigateCommandExecute()
{
     _navigationService.NavigateTo<SecondViewModel>();
}

En la primera vista vamos a suscribirnos a un mensaje. En Xamarin.Forms contamos con MessagingCenter que cuenta con dos partes fundamentales:

  • Suscripción (Subscribe): Se suscribe a un mensaje concreto para lanzar una acción.
  • Envío (Send): Publica un mensaje para ser captado por suscriptores. Si no existiese ningún subscriptor, el mensaje es ignorado.

La clase MessagingCenter es una clase estática que cuenta con varias sobrecargas del los métodos Subscribe y Send.

Podemos subscribirnos a un mensaje simple con una cadena:

Xamarin.Forms.MessagingCenter.Subscribe<FirstViewModel>(this, "Change", (sender) =>
{
     Info = "Changed from Messaging Center";
});

La viewmodel de la primera vista se subscribe a un mensaje de tipo string con el mensaje “Change”.

Navegamos a la segunda vista:

Segunda vista

Segunda vista

En la viewmodel de la segunda vista procedemos a enviar un mensaje de tipo cadena con el valor “Change”:

Xamarin.Forms.MessagingCenter.Send(App.Locator.FirstViewModel, "Change");

Al regresar a la vista anterior, el mensaje ha cambiado con la lógica ejecutada en la subscripción del mensaje:

Mensaje recibido

Mensaje recibido

Sencillo, ¿cierto?

Pasar parámetros como argumento

Podemos pasar un argumento como parámetro del método Send:

MessagingCenter.Send(App.Locator.FirstViewModel, "Change", "Argument");

En la subscripción podemos capturar el parámetro de forma sencilla:

MessagingCenter.Subscribe<FirstViewModel>(this, "Change", (sender, arg) => {
    // Acceso a 'arg' para obtener el parametero
});

Podéis encontrar en GitHub el ejemplo de este artículo:

Ver GitHub

Recordad que cualquier duda o sugerencia la podéis dejar en los comentarios del blog.

Más información

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s