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:
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
