Proyecto Kinect: uso de Model-View-ViewModel (MVVM)

Model-View-ViewModel (MVVM) es un patrón de diseño de aplicaciones para desacoplar código de interfaz de usuario y código que no sea de interfaz de usuario. Con MVVM, es definida la interfaz de usuario de forma declarativa (mediante lenguaje XAML) y se usa el marcado de enlace de datos para vincularla a otras capas que contengan datos y comandos de usuario. La infraestructura de enlace de datos proporciona un acoplamiento débil que mantiene sincronizados la interfaz de usuario y los datos vinculados.

El patrón MVVM organiza el código de tal manera que es posible cambiar partes individuales sin que los cambios afecten a las demás partes. Esto presenta numerosas ventajas de cara al uso del patrón:

• Acelera el proceso de desarrollo.
• Simplifica las pruebas unitarias.
•  Mejora la estabilidad y rendimiento de la aplicación.
•  Reduce los riesgos del proyecto.

Cuando se hace uso del patrón MVVM, una aplicación se divide en las siguientes capas:

• La capa de modelo (Model) es la responsable de todos los datos de la aplicación y de la lógica de negocios relacionada. Esta capa es completamente independiente de las capas de vista y modelo de vista. Habitualmente hay un solo modelo por aplicación.
•  La capa de vista (View) define la interfaz de usuario que utiliza marcado declarativo (XAML). El marcado de enlace de datos (Data Binding) define la conexión entre los componentes específicos de la interfaz de usuario y diversos miembros del modelo de vista.
•  La capa de modelo de vista (ViewModel) proporciona los destinos de enlace de datos para la vista. Expone los datos del modelo de tal forma que sea fácil usar Bindings en la vista.

En este proyecto se hace un guiño a este patrón MVVM. El uso que se hace de él es proporcionar un enlace de datos, que vaya desde la interfaz de la aplicación (View) al modelo de datos (Model) hospedado en el servidor web, pasando por el modelo-vista (ViewModel) capaz de enlazar los datos y actualizarlos cuando en la vista o en el modelo se produzcan cambios. El esquema del patrón seguido es como indica el siguiente esquema:

Esquema de relaciones en el patrón MVVM

Un ejemplo reducido de la infraestructura en tres capas del patrón MVVM que aplicamos para nuestra aplicación es como sigue:

1. - En nuestra aplicación se hace uso de un servidor web que tiene hospedado el modelo de datos. En él se definen los contratos del modelo, lo cual define las propiedades que se van a enviar. En la siguiente imagen se muestra el código reducido del modelo:

Código C# de parte del modelo de la entidad Paciente

2. - En la aplicación cliente se debe hospedar el modelo-vista. Un ejemplo reducido de él es como se muestra en la siguiente imagen:

Código C# de parte del modelo-vista de la entidad Paciente

Como ya dijimos, el modelo-vista aparte de enlazar datos también los actualiza. Es por ello que se puede ver cómo se implementa la interfaz INotifyPropertyChanged, siendo la encargada de lanzar el evento PropertyChanged cada vez que el valor de alguna propiedad cambia. En la siguiente imagen se detalla el evento mencionado:

Código C# del evento PropertyChanged

3. - En la interfaz se define la vista, siendo esta detallada con código XAML. Siguiendo el ejemplo reducido de nuestra aplicación, puede verse un enlace de datos en la siguiente imagen:

Código XAML con Binding

Como se puede ver en la vista, la propiedad Text de los TextBlock es bindeada (Binding) con las propiedades UsuarioPaciente y ContrasenaPaciente del modelo-vista. 

La forma en que el patrón MVVM ayuda a WPF a enlazar los datos con suma facilidad es lo que le hace ser una gran elección para su utilización en el desarrollo de proyectos como este.

Con este post finalizo los posts relacionados con las tecnologías y entornos utilizados y aplicados al proyecto Kinect.

¡Saludos!

Álvaro Alcolea