En este, mi primer Post, vamos a ver cómo preparar tu Universal app de Windows para que funcione con MvvmCross, dar la posibilidad a que tu proyecto sea Multiplataforma en un futuro, y funcione tanto en plataformas Windows, iOS o Android, compartiendo la mayor parte del código.

 

¿Qué es MvvmCross?

MvvmCross es un Framework de código abierto para el desarrollo de aplicaciones multiplataforma basado en tecnología C# y .NET. Desarrollado a partir del Framework MonoCross, que se basaba en el patrón MVC, MvvmCross lleva el patrón MVVM (Model-View-ViewModel) al desarrollo de aplicaciones multiplataforma.
3919206

Instalando MvvmCross

Con un proyecto Universal App ya creado en nuestra solución, procederemos a instalar MvvmCross, se puede hacer de dos formas, desde ‘Package Manager Console’, ponemos ‘Install-Package MvvmCross.Core‘ o desde el buscador de paquetes de NuGet, buscando por el nombre ‘mvvmcross’.

 

Configurando MvvmCross

Una vez instalado MvvmCross, y para tener la estructura que nos permita hacer nuestro proyecto Multiplataforma, seguiremos los pasos básicos para configurar la aplicación:

Lo primero que haremos será crear un proyecto nuevo en la solución, que sea una ‘Portable Class Library’ y se llame como tu proyecto Windows, añadiendole ‘.Core’ al final, quedando así: ‘NombreProyecto.Core’. Este proyecto será el corazón de nuestra app, donde se va a compartir todo el código con las diferentes plataformas, tendremos nuestros Converters, Servicios, ViewModels, Helpers, etc. En este proyecto incluiremos también los paquetes de MvvmCross, como hicimos en nuestro proyecto Universal de Windows.

 

Con los dos proyectos creados en su estado inicial por defecto, empezaremos a configurar ambos para que sean proyectos MvvmCross.

 

Primero en el proyecto universal, borramos ‘MainPage.xaml’, no lo necesitaremos. y creamos una nueva clase, que llamaremos ‘Setup.cs’, esta clase irá en la raíz del proyecto y nos permitirá inicializar MvvvmCross y nuestra aplicación. Esta clase heredará de la clase base que nos ofrece MvvmCross ‘MvxWindowsSetup’, y nos quedará en su estado inicial de la siguiente forma:

Ahora modificaremos la clase ‘App.xaml.cs’, la clase principal de cualquier proyecto de Windows Universal. Para que funcione MvvmCross en nuestro proyecto nos centraremos en el evento ‘OnLaunched‘ y reemplazaremos la siguiente linea de código:

por

donde se produce la inicialización de la clase ‘Setup.cs’ y la navegación a la primera vista de nuestro proyecto, que la crearemos en el siguiente paso.

 

Nota: Para seguir la nomenclatura que ofrece MvvmCross, creamos una carpeta llamada ‘Views’ en el proyecto Universal, y una carpeta ‘ViewModels’ en el proyecto ‘Core’.
Esto nos va a permitir que se enlacen automáticamente las vistas con los ViewModels. Siguiendo una serie de convenciones.
La primera es el nombre de las carpetas, como dije antes, y lo segundo que la vista y el ViewModel tienen que llamarse igual, y acabar respectivamente con View y ViewModel.
Por ejemplo, si nuestra vista principal se llama MainView, su ViewModel se tiene que llamar MainViewModel.

 

Una vez tomado nota de esto, creamos nuestra primera vista en el proyecto de universal, y la configuramos para que sea una vista de MvvmCross.
La creamos dentro de nuestra carpeta Views. Vamos dentro del código de la vista, la clase ‘.xaml.cs’. y cambiamos la herencia por defecto que nos hace de ‘Page‘ por la clase base de vistas de MvvmCross, ‘MvxWindowsPage’ quedando nuestra clase así:

Lo siguiente que haremos, será modificar nuestro ‘.xaml’ de la vista para indicarle también que es una vista de MvvmCross. Quedaría de esta forma:

Como veis añadimos esta linea xmlns:views=”using:MvvmCross.WindowsUWP.Views” para que nuestra vista pueda heredar de la clase base y convertirse en una vista MvvmCross. Igual que en el archivo anterior del código de la vista, quitamos la herencia de ‘Page‘ por ‘MvxWindowsPage‘.

 

Con esto tendremos listo nuestro proyecto de Windows para que funcione con MvvmCross, pero nos falta completar la parte del ‘Core‘ para que todo esté listo. Al crear nuestra vista, necesitaremos crear al mismo tiempo su ViewModel, con lo que será lo primero que hagamos. Creamos su respectivo ViewModel, con la nomenclatura que hablamos anteriormente, así se hará la conexión automáticamente entre ambos. Tenemos que meterlo dentro de su carpeta correspondiente, en este caso, la carpeta ViewModels. Y le diremos que herede de la clase base de ViewModels de MvvmCross, ‘MvxViewModel‘. Para la configuración inicial no hace falta que hagamos nada más en esta clase.

Por último crearemos la clase principal de nuestro proyecto Core, por convención se suele llamar ‘App.cs’ y va en la raíz del proyecto. Nuestra clase va a heredar de ‘MvxApplication‘, y se va a encargar de registrar las interfaces de nuestro proyecto, decir que ViewModel va a empezar a mostrarse en el inicio de la App, controlar la localización de los ViewModels, etc. Para la configuración inicial nos bastaría con tener algo parecido a lo siguiente:

Con Estos pasos ya tenemos configurada nuestra solución y nuestro proyecto para que funcione con MvvmCross, y si queremos llevar nuestra App a distintas plataformas, solo hará falta crear y trabajar sobre las vistas nativas de cada sistema operativo. Ya que la lógica de negocio, modelos, servicios, etc. se compartirían dentro del proyecto Core.

 

Conclusión

Espero que os sirva este Post para iniciaros en el desarrollo de aplicaciones multiplataforma, en futuros Post intentaré mostraros más sobre MvvmCross y el desarrollo tanto en Windows como en otras plataformas, y ver como con la misma lógica y distintas vistas funciona en todas las plataformas.

 

Saludos!!

Carlos Sánchez (@CarlosKlsOne)