MVVM: Evolución de CodeBehind a ViewModel

Aún me sigo encontrando en la actualidad con colegas que me comentan que en los proyectos donde están trabajando utilizan mucho desarrollo en WPF para la interfaz de usuario y que casi toda la lógica de presentación está muy arraigada a la vista (lo que comúnmente denominamos CodeBehind).  Es entonces cuando yo les hablo del patrón MVVM y ellos me ponen cara de Póker, ¡cómo queriendo hacerme entender que no entienden nada de nada! (es decir, “no les da ni el aire”).

Este problema es más habitual de lo que creemos y os puedo asegurar que existe un porcentaje muy alto de probabilidades de encontrarnos con CodeBehind en proyectos WPF y sucedáneos, que encontrarnos con un extraterrestre Gris en nuestro dormitorio, ¡jejeje!, ¡fuera broma!

En el presente artículo mostraré con ejemplos prácticos muy básicos cómo realizar la evolución de CodeBehind a ViewModel sin entrar en detalles teóricos de MVVM ya que existe mucha teoría que podéis consultar en la World Wide Web:

 

Situación A: View sin MVVM ni Data Bindings

Partimos de la situación inicial donde tenemos la siguiente vista que corresponde a la edición de un empleado.

situacion-1

La vista se define en el código XAML y está compuesta por una serie de controles que permiten visualizar y capturar los datos del empleado.  Además de un botón que permite el guardado de los mismos.

En el código XAML se define el método que se debe de ejecutar al cargar la vista.  En nuestro caso, el método es OnLoaded y se define en el CodeBehind de la vista.

situacion-1b

El método OnLoaded es el encargado de llamar al servicio para recuperar los datos del empleado y asignar a cada uno de los controles de la vista los datos del empleado para que el usuario pueda verlos y/o modificarlos.

situacion-1c

Igualmente observamos en el código XAML que la definición del botón Save tiene asociado un método OnSave que se deberá invocar cuando se hace clic sobre él.

situacion-1d

El método OnSave está definido en el CodeBehind de la vista y es el encargado de obtener los datos introducidos por el usuario en cada uno de los controles e invocar al servicio para persistir dichos datos correspondientes al empleado en edición.

situacion-1e

Hasta aquí nuestro código es correcto en el sentido de que hace lo que tiene que hacer pero, es incorrecto porque no sigue unas buenas prácticas de codificación.  Al estar definido en el CodeBehind de la vista no se puede comprobar y no es reutilizable.

Situación B: View sin MVVM con Data Bindings

A continuación vamos a utilizar una característica que nos proporciona WPF y es la que se denomina Data Bindings.  Con el uso de Data Bindings podremos enlazar nuestros controles y omitir del CodeBehind asociado a la vista todo el código de asignación y de lectura de datos de los controles.

Como ejemplo, modificaremos en el código XAML la propiedad Text del control TextBox para que muestre el FirstName del empleado utilizando el correspondiente Data Binding.

situacion-2

Al incluir en la propiedad Text el valor {Binding FirstName} se le indica a la vista que enlace dicha propiedad Text a la propiedad FirstName que la buscará en su contexto de datos o DataContext.

En el CodeBehind definiremos el DataContext de la vista para que contenga los datos del empleado cargado y de esta manera que los Data Bindings definidos en los controles (código XAML) funcionen correctamente.

situacion-2b

Ahora veremos nuestro CodeBehind bastante más reducido ya que omitiremos de él, el código de asignación y lectura de los controles de la vista.

situacion-2c

situacion-2d

 

Situación C: View transformada en MVVM

Por último, nos queda realizar la transformación completa utilizando el patrón MVVM.  Para ello, crearemos una nueva clase denominada EmployeeEditViewModel que será el ViewModel que servirá como DataContext a nuestra vista EmployeeEditView.

Utilizaremos la librería Prism que ya define una clase BindableBase la cual implementa la interfaz INotifyPropertyChanged.  Igualmente, esta librería define una clase para los comandos denominada DelegateCommand.

situacion-2e

situacion-3b

Seguidamente haremos los siguientes ajustes en el código XAML de la vista, donde definiremos su DataContext y usaremos el comportamiento Blend que nos permite realizar una acción al cargar la vista.  En nuestro caso indicaremos que ejecute el método LoadEmployee para cargar los datos del empleado.

situacion-3c

Y por fin, nuestro CodeBehind quedará impoluto.

codebehind

Espero que pongáis fin a vuestros CodeBehinds.  Nos vemos muy pronto, salu2.

Oscar-FernandezÓscar Fernández González

.NET Architect | Soluciones Microsoft | SOGETI ESPAÑA

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s