MVVM y UWP desde 0


Muchos cambios han surgido con la llegada de Windows 10 y la Universal Windows Platform. Pero si algo no ha cambiado es la posibilidad de seguir desarrollando con el patrón de diseño más utilizado en la plataforma, MVVM (Model View View-Model).  Por eso, vamos a recordar cómo implementarlo y dejar nuestras apps preparadas para codificar siguiendo buenas prácticas.

 

Como estructura básica, el patrón MVVM consta de tres partes fundamentales:
- Model: es la capa de datos de la aplicación, como pueden ser las clases o los servicios.
- View: es la apariencia de la aplicación, las diferentes pantallas que la componen.
- View-Model: contiene la lógica de la aplicación y permite el paso de datos para mostrar en las View. Hay una ViewModel por cada View.

El principal motivo de dividir la estructura en tres partes diferenciadas es dotar de independencia a cada una de ellas y mantener así un gran nivel de abstracción que permita minimizar el trabajo y el coste cuando se requieran realizar modificaciones.
Otra parte fundamental son los servicios, clases que creamos para gestionar el uso de componentes propios del dispositivo o de elementos externos a la app, como por ejemplo una API, que nos va a suministrar datos externos y debemos procesarlos para usarlos en la viewmodel. Los servicios forman parte de la capa Model.

1- Lo primero que debemos hacer es crearnos un nuevo proyecto en Visual Studio de aplicación universal vacía.

Captura1

2- Una vez creado, vamos a crear el conjunto de carpetas necesarias que van a contener la estructura del patrón.

Captura2

3- Ahora vamos a empezar creando el “model”. Para ello añadimos una clase nueva a la carpeta Model que se llame “Starship”. Dentro de la clase vamos a darle las propiedades que serás visibles desde fuera de la clase. ID, Name, Size e Image.

Captura3

4- Una vez hecho, vamos a crear la View. En este caso deberíamos crear una clase nueva en la carpeta “View”, pero como tenemos implementado de serie un “MainPage.xaml”, lo seleccionamos y lo metemos dentro de la carpeta “View”. No hay que olvidarse de ir al archivo “App.xaml.cs” y añadir la referencia a la carpeta View, utilizando “using Proyecto_MVVM.View;”.
Con esto ya tendríamos creada nuestra view, pero en el caso de querer agregar más, tan solo debemos pulsar botón derecho en la carpeta, le damos a Agregar->Agregar Nuevo Elemento y ahí seleccionamos “Página en blanco”.

Captura4

5- Lo siguiente que debemos hacer es crear la View-Model asociada para cada View. Para ello, dentro de la carpeta “ViewModel” creamos una clase nueva que se llame “MainPageViewModel”. Dentro de la clase vamos a ir poniendo la lógica que queramos que lleve nuestra app y lo prepararemos para el binding de datos con la View.

Captura5

6- Ahora, vamos a necesitar una clase que nos ayude a “localizar” las ViewModel para asociarlas con las View y además nos va a servir para localizar los servicios que vayamos necesitando. Dicha clase la vamos a llamar “VMLocator” y la vamos a crear en la carpeta “Services” (Creada previamente). Vamos a dejar preparada la clase para en un futuro hacer la app cross-platform, y por ello vamos a usar el patrón de diseño Inyección de Dependencias mediante Unity.

Captura7

Para poder disponer de Unity, debemos instalar su paquete de NuGet.

Captura6

 

7- Para poder hacer binding de los comandos en las View, vamos a crearnos una clase llamada DelegateCommand, dentro de la carpeta “ViewModel->Base”.

Captura8

8- Por último, necesitamos una clase que nos permita actualizar en la View las propiedades que vamos modificando. Para ello creamos la clase BindableBase, que gracias al método “SetProperty”, nos irá actualizando automáticamente en la View el contenido de las propiedades.

Captura9

 

Con todo esto ya disponemos de la estructura básica del patrón MVVM. Ahora tenemos que terminar de enlazar la viewmodel con la view:
En el archivo App.xaml vamos a añadir un recurso que haga referencia al Locator de nuestra aplicación.

Captura10

Y a continuación, en el MainPage.xaml, tenemos que añadir el datacontext que nos permita obtener los datos desde la viewmodel:

Captura11

Una vez realizado, ya podemos empezar a desarrollar nuestra app. Vamos a ver como, por ejemplo, si quisiéramos mostrar datos en la pantalla principal traídos desde la viewmodel, debemos realizar Binding de datos. El Binding no es más que enlazar propiedades y comandos con los diferentes controles de la interfaz de usuario de manera que puedan mostrar los datos o ejecutar las diferentes funcionalidades de nuestra app.
Para ello, tenemos que crearnos las propiedades a exponer en la viewmodel:

Captura12

Una vez con las propiedades públicas creadas, en la View correspondiente creamos los controles necesarios para mostrar el contenido de las propiedades. Dentro del control, tenemos que utilizar {Binding NombrePropiedad} con el cual enlazamos los datos.

Captura13

Al ejecutar la app ya podemos ver los resultados de este sencillo Binding de datos.

Captura14

Siguiendo este simple ejercicio de buenas prácticas ya tenemos la estructura MVVM creada y podemos centrarnos en el contenido de la app, creando todo tipo de interfaces de usuario, clases, servicios, viewmodels...

 

Rubén Asensio García

@butcher086

Technical Evangelist Intern.

Comments (3)

  1. Juan Pablo says:

    Bien genial la manera de comenzar MVVM con Unity. estaría bien un GitHub o un PasteBin de este ejemplo, no por mí, pero como son capturas y alguna un poco cortada (DelegateCommand simple), quizas eche un poco para atrás a alguien que quiera comenzar con estos ejemplos.
    Y ya que has comenzado con Unity estaría genial continuar con el y ver sus características, saludos, @juanpaexpedite

  2. xamiell says:

    Muy Buena explicacion pues es informacion muy compleja de encontrar.
    Pero solo falto algo, trabajar con el Model, Starship.cs solo existe pero nunca fue usado..

  3. Luis Lorenzo says:

    Es sencillo, pero práctico. Lo que noto a faltar es relacionar el Model con el ViewModel. Has creado un Model que no estás utililizando.

Skip to main content