Ensamblando la infraestructura de Vistas a Vista Modelo en MVVM usando Windows Phone

Bueno, siendo que en el post anterior ya tomamos decisiones de diseño, es el momento de empezar a ensamblar nuestro proyecto, vamos a crear una aplicación con base en la plantilla de panorama

Bueno ahora voy a proponerles una estructura para un proyecto, primero se los enseño y luego hago las aclaraciones.

Como pueden ver, yo creo dos proyectos o assemblies, RssReader.UI el cual es nuestro proyecto de tipo panorama y RssReader.UI.Logic el cual es una librería de clases. Si bien puede trabajarse todo en un solo proyecto, varias razones me parecen agradables de acostumbrarse a trabajar así, si quisieramos trasladarnos a una libreria portable para Windows 8 y Windows Phone 8, seguro desde esta estructura sería más provechoso que empezar a serapar las vistas de ambas aplicaciones, y tambien cuando trabajamos de mano de un diseñador, es más facil establecerle los limites, los lugares que no debe tocar, y el espacio donde el es totalmente libre. Por otro lado simplemente es personal, a mi me parece más ordenado.

Otra cosa que podrán notar es que en el proyecto panorama se han creado unas carpetas por defecto, lo que podemos hacer para no perder la estructura creada es pasar las clases a la libreria en la carpeta correspondiente ViewModels, añadir la referencia entre los assemblies.

No se olviden de completar los namespace de las clases, por RssReader.UI.Logic.ViewModels

Además habrán 2 errores de código que corregiremos haciendo referencia al nuevo espacio de nombres al que pertenece la clase.

En este punto estamos listos para crear nuestras propias clases Vista Modelo, del post anterior

Si llegaramos a observar las clases MainViewModel e ItemViewModel que fueron creadas por la plantilla, vamos a notar que ambas además de heredar de INotifyPropertyChanged implementan la interfaz a través de un evento y un método que es el responsable de notificar los cambios a la interfaz.

Ya que este método es común para esas y todas las Vista Modelo que creemos, lo que podemos hacer es crear una clase adicional que implemente este método y que todas nuestras Vista Model hereden de ella. Hablando en UML esto sería más o menos así:

Como ven, es mi costumbre adicionar 2 propiedades adicionales en esta clase comun, estas nos ayudarán más adelante a comunicar mensajes desde la vista modelo mientras se está realizando una operación. Si miramos nuestra clase en código habrá quedado de esta forma:

Como pueden ver al método NotifyPropertyChanged le fue alterado el alcance para que sea protegido, esto es para que las clases hijas de BindableBase puedan acceder a el.

Además debemos tener en cuenta que las propiedades que deseemos usar para enlazar con nuestras Vistas deben ser full properties o propiedades completas e invocar en el set de la propiedad el nombre de la propiedad que se está cambiando.

La invocación a la notificación de cambio puede realizarse desde otros sitios, esta es la forma general, ya que el cambio se notificará cuando se establezca o cambie el valor de la propiedad. Para Windows 8 y Windows Phone 8 existe una forma de no "quemar" o dejar fijo el nombre de la propiedad, y lo pueden leer en el post de Walter Novoa.

No olviden cambiar el lugar de donde hereda MainViewModel e ItemViewModel para que sea BindableBase.

Siguendo estas indicaciones y el diagrama UML para el siguiente post, debemos tener ya nuestras Vistas Modelo implementadas. No olviden fijarse bien en el diagrama y que las listas deben ser de tipo ObservableCollection.

Una última anotación para finalizar tiene que ver con el código de ejemplo que encontrarán en las clases que se crearon por defecto tiene algo adicional en el set, y es que verifican que el valor de la variable asociada haya cambiado para notificar el cambio.

En algunos escenarios cuando movemos mucho los objetos en memoria nos puede pasar que al enlazar algún objeto no se refresque un dato, y podemos tardar un buen tiempo en identificar que esta es la razón, la elección es de escenario, si vamos a dejarlo como lo proponen en este código auto generado, es bueno ser conscientes de que ahí está.