clicko-informatica-arquitectura-mvvm-programacion

En el blog de hoy describiremos el uso básico y la funcionalidad del patrón MVVM en WPF con el lenguaje C# de .NET.Pero primero de todo, para los recién llegados, vamos a introducir de forma resumida todos estos conceptos y siglas:

  • WPF por sus siglas en inglés de Windows Presentation Foundation, es una tecnología de Microsoft que permite el desarrollo de interfaces de interacción en Windows tomando características de aplicaciones de Windows Forms y de aplicaciones web.
  • .NET. Simplificando mucho se podría definir como un conjunto de herramientas, tecnologías y servicios que facilita la construcción de todo tipo de aplicaciones, tanto programas de escritorio, aplicaciones web, como aplicaciones para dispositivos móviles.
  • C# es un lenguaje de programación multiparadigma desarrollado y estandarizado por Microsoft como parte de su plataforma .NET. Combina las mejores características de lenguajes preexistentes como Visual Basic, Java y C++.

Arquitectura de software MVVM

Cuando estamos creando una aplicación, a todos nos gusta tener nuestro código limpio y organizado, y que cualquier cambio o añadido de funcionalidad sea lo más ágil posible llevarlo a cabo. Además, vemos la necesidad de que cualquier otro desarrollador (ya sea de nuestro equipo, externo o nosotros mismos pasado un cierto tiempo) tengamos una rápida comprensión de cómo está construido el sistema, y que continuar o desarrollar nuevo código no sea una tarea tediosa. Es aquí donde entran en juego los patrones de diseño de software.

Estas son algunas de las características más importantes que conseguimos cuando usamos un patrón de diseño en nuestros desarrollos:

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

¿Qué es el patrón MVVM?

El patrón Model-View-ViewModel (MVVM) nos ayuda a separar la lógica de negocio de la interfaz de usuario, facilitando las pruebas, mantenimiento y la escalabilidad de los proyectos. MVVM es una forma de crear aplicaciones cliente que aprovecha las características principales de la tecnología WPF

Existen tres componentes que nos ayudan a lograrlo:

  • MODEL: Un modelo representa un objeto real del dominio de la lógica de negocio del sistema. Por ejemplo: una factura o un usuario. Es el responsable de exponer los datos de una manera que WPF pueda consumir fácilmente.
  • VIEW: una vista se define en XAML (lenguaje de marcado de WPF), y no debe tener ninguna lógica en el código subyacente. Se une al ViewModel solo mediante el enlace de datos (binding).
  • VIEWMODEL: es un modelo para las vistas de la aplicación, es decir, se trata de una abstracción de los datos de las vistas. Conecta únicamente los datos que requieren las vistas y realiza la lógica necesaria para la preparación de dichos datos. Además de exponer los datos relevantes para la vista, también expone los comportamientos de las vistas, generalmente con comandos.

Esquema de la arquitectura MVVM

En la siguiente captura se muestra el esquema general de la arquitectura MVVM aplicando un sencillo ejemplo. Nuestra aplicación representada en el esquema mostraría un listado de usuarios en la cual podemos seleccionar uno de ellos. Del usuario seleccionado se mostraría su nombre en un campo de texto.

clicko-informatica-programacion-arquitectura-mvvm

Como vemos, el modelo Usuario es el que representa a un usuario “real” con sus atributos nombre y apellidos.

El ViewModel contiene los datos que requiere la vista, que son los usuarios y el usuario actualmente seleccionado. Este último contiene el atributo nombre del usuario seleccionado. Estos datos preparados por el ViewModel están conectados (bindeados) con las propiedades correspondientes de las estructuras de la vista: ListView y TextBox. De esta manera, cada vez que se selecciona un usuario del listado, el campo de texto lincado a la propiedad Usuario_Seleccionado muestra el nombre del usuario correspondiente. Esto es posible por la conexión del ViewModel con la Vista a través de la propiedad DataContext, que asigna un viewModel (conjunto de datos y comportamiento) a una vista.

Mediante la implementación de Interficies del core de .NET, podemos conseguir que esta conexión de datos sea bidireccional y reactiva, es decir, que el muestreo de datos en las vistas sea en tiempo real y que se reflejen los cambios si los datos en la fuente (base de datos) ha cambiado.

Seguiremos esta serie en el Blog de CLiCKO y veremos cómo se implementa en la práctica esta conexión de datos entre las vistas y los modelos.

Twitter
Visit Us
Follow Me
LinkedIn
Share