Aplicando el patrón de diseño MVVM

Leomaris Reyes
Dec 21, 2018 · 4 min read

Cuando estamos creando una aplicación, a todos nos gustaría tener nuestro código limpio y organizado, para que cualquier otro desarrollador tenga una más rápida comprensión del mismo. Es aquí en donde entran en juego los patrones de diseño. ¿Pero exactamente por qué lo usamos? Los patrones de diseño nos ofrecen una arquitectura y un conjunto de reglas/principios definidos previamente que deben de ser cumplidos en nuestra App, en este caso les explicaré un patrón de diseño llamado MVVM (Modelo-Vista-Vista-Modelo) aplicado a Xamarin Forms. Antes de comenzar, quiero enumerar algunas de las caracteríticas más importantes que se obtienen al usar patrones de diseño:

  • Código más limpio y organizado.
  • Mayor claridad y mejor comprensión del proyecto frente a otros desarrolladores.
  • Reutilización de código
  • Mantenimiento más rápido

¡Empecemos!

El patrón Model-View-ViewModel (MVVM) nos ayuda a separar la lógica de negocios de la interfaz de usuario, facilitando las pruebas, mantenimiento y la escalabilidad de los proyectos. Existen tres componentes que nos ayudan a lograrlo:

Image for post
Image for post

Creando un escenario ejemplo para aplicar el patrón MVVM

Los requerimientos son los siguientes:

  • La agenda tendrá los siguientes campos: : Name, last name, phone number y gender.
  • Todos los contactos deberán ser mostrados en una lista.
  • La aplicación tendrá un botón principal que cambia la apariencia de colores haciendo un click.
  • El diseño de la pantalla deberá ser como el siguiente Mockup
Image for post
Image for post

Conociendo los componentes del patrón MVVM

El Modelo (Model)

Image for post
Image for post

Ahora, creemos una carpeta llamada: “Models”, dentro agreguemos la clase de contacto con los atributos, como el siguiente ejemplo:


La Vista-Modelo (ViewModel)

Continuando con nuestro ejemplo, definiremos las funcionalidades que necesita la aplicación de la Agenda. ( El segundo, tercer y cuarto requisito definen las funcionalidades a desarrollar).

Image for post
Image for post

Empecemos a codear!

  1. En el primer bloque, implementé la interfaz INotifyPropertyChanged, la cual es responsable de notificar a los clientes que el valor de una propiedad ha cambiado. Puede leer más información aquí.

2. Aquí llenamos la colección con algunos datos de pruebas para poder mostrarlas en el ejemplo de su Agenda Telefónica.

3. Por último, agreguemos la acción “Cambiar apariencia”.

Como podemos ver, en la clase ContactInformationViewModel agregamos las funcionalidades requeridas. En el folder ViewModel, puede agregar tantas clases necesite.


La vista (View)

Image for post
Image for post

Para terminar este ejemplo. Solo tenemos que hacer los siguientes pasos:

  1. Agregue la fuente BindingContext para llenar el XAML. En este caso con la clase ContactInformationViewModel.

2. Puedes llamar todos los atributos que necesitemos agregando la palabra "Binding" seguido del nombre del atributo, como se muestra a continuación:

Los Binding permiten vincular las propiedades de dos objetos. Además de permitirnos mostrar toda la información contenida en el ViewModel. Más información aquí.

3. Por ultimo, en el ejemplo, creé la clase ChangeAppearanceCommand para realizar un cambio en la apariencia de la interfaz de usuario, mediante los Commands. Los cuales nos permiten agregar las acciones que necesitemos del ViewModel, por ejemplo, alguna acción para hacer cuando se hace click en un botón. Más información aquí.

Para concluir la aplicación de agenda telefónica, agregamos el XAML (View).

En el folder Views, puede agregar tantas vistas como necesites.

Buena suerte con tu implementación!😎

Image for post
Image for post

Click to see an example in my GitHub.

Artículo en inglés: https://askxammy.com/applying-mvvm-design-pattern/

Referencia: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/enterprise-application-patterns/mvvm

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store