Aplicaciones multi plataforma con MVVMCross y Xamarin

Si estás aquí ya debes conocer a estas Alturas que es Xamarin, de lo contrario te recomiendo que les des un vistazo rápido a su sitio antes de continuar para que regreses bien motivado y con muchas ganas de leer esta primera lección de introducción a esta maravillosa tecnología.

Después de esta enorme introducción, vamos a comenzar con nuestro primer ejercicio, lo que haremos en esta serie de cuatro artículos es lo siguiente.

1.- Creación de una biblioteca de clases portables que se pueda reutilizar en los proyectos que estaremos realizando. Su función es sumamente básica, solo unir un par de cadenas en una sola.

2.- Creación de una aplicación de Windows Phone que basándose en la biblioteca de clases portable previamente hecha pueda trabajar con su información y utilizarla de manera rápida.

3.- Creación de una aplicación Windows Store que haga exactamente lo mismo que la anterior pero en esta plataforma.

4.- Creación de una aplicación Android que… bueno, ya sabes ¿no?

¿Comenzamos?

Crear una biblioteca de clases portable

Una biblioteca de clases portable o PCL (Portable Class Library) es un ensamblado que puedes reutilizar en función de la plataforma a la que vayas a apuntar. En este escenario vamos a apuntar a tres plataformas. Lo primero que debes hacer es comenzar por crear un nuevo proyecto en Visual Studio y seleccionar la opción de Portable Class Library.

En la plataforma, selecciona las tres opciones que utilizaremos.

Ya con el proyecto creado, elimina la clase que aparece por defecto y agrega una referencia de NuGet, para poder hacer esto da clic derecho sobre el proyecto y seleccione la opción de Administrar paquetes NuGet.

Consulta la palabra de MVVMCross y selecciona la opción de la imagen.

Al terminar, en la ventana debes poder ver los siguientes paquetes instalados.

Una vez abierto, hasta aquí tu proyecto debe lucir de la siguiente manera.

Primero comienza por abrir App.cs, esta es la clase que asociará a las aplicaciones, que registrará su inicio y que iniciará los posibles servicios que podría utilizar.

using Cirrious.CrossCore.IoC;
using Cirrious.MvvmCross.ViewModels;
 
namespace FirstDemoPCL
{
public class App : MvxApplication
{
public override void Initialize()
{
CreatableTypes()
.EndingWith("Service")
.AsInterfaces()
.RegisterAsLazySingleton();
 
RegisterAppStar<ViewModels.FirstViewModel>();
}
}
}

Borra el código de ejemplo que se encuentra en la clase FirstViewModel.cs para dejar la clase completamente vacía.

using Cirrious.MvvmCross.ViewModels;
 
namespace FirstDemoPCL.ViewModels
{
public class FirstViewModel: MvxViewModel
{
 
}
}

Dentro de la clase crea tres propiedades y estas propiedades deben ejecutar un método llamado RaisePropertyChanged que servirá como notificaciones de cambio de la interfaz. Todo sencillo. Al final tu clase quedará de la siguiente manera.

using Cirrious.MvvmCross.ViewModels;
 
namespace FirstDemoPCL.ViewModels
{
public class FirstViewModel: MvxViewModel
{
private string _firstName;
private string _lastName;
 
public string FirstName
{
get { return _firstName; }
set { _firstName = value; RaisePropertyChanged(() => FirstName); RaisePropertyChanged(() => FullName); }
}
 
public string LastName
{
get { return _lastName; }
set { _lastName = value; RaisePropertyChanged(() => LastName); RaisePropertyChanged(() => FullName); }
}
 
public string FullName
{
get { return string.Format("{0} {1}", _firstName, _lastName); }
}
}
}

Sencillo ¿no es así? Bueno, este es el primero de los ejercicios y el único que es indispensable para continuar con los demás ejercicios. Ahora puedes seguir con los siguientes artículos sin ningún orden en particular.

Desarrollo de la aplicación Windows Phone

Desarrollo de la aplicación Windows Store

Desarrollo de la aplicación Android