Diplomado de Windows Phone 8

devmasters.com.mx

Mdulo 3: El Patrn de Diseo Model-ViewViewModel (MVVM)

Qu es MVVM?
Patrn de Diseo natural para plataformas de XAML
Aprovecha al mximo el Enlace de Datos {Binding}

Ventajas
Separacin de preocupaciones Pruebas Unitarias Mantenimiento de cdigo Consistencia Desacoplamiento Flujo de trabajo entre diseadores y desarrolladores Reutilizacin de cdigo y ms!
devmasters.com.mx

Model-View-ViewModel
View

ViewModel

Model
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

Diplomado de Windows Phone 8

devmasters.com.mx

Model-View-ViewModel
Vista

View

ViewModel

Define la Interfaz de Usuario Define la estructura y apariencia de lo que el usuario ve en la pantalla Estilos, Recursos UserControl, PhoneApplicationPage, DataTemplate El Contexto de Datos es el ViewModel Poco o nada de code-behind
Solo cdigo que no necesite Pruebas Unitarias

Model
devmasters.com.mx

Comportamientos Actualizada a travs de Bindings

Model-View-ViewModel
Modelo de la Vista

View

ViewModel

Model
devmasters.com.mx

Es una abstraccin de la Vista Implementa la Lgica de Presentacin Adapta el Modelo a la Vista Mantiene el estado Expone propiedades a las que se enlaza la Vista (datos y Comandos) Expone mtodos que los Comportamientos de una Vista pueden invocar Desacoplamiento y Testability es el objetivo principal

Model-View-ViewModel
View Modelo
Tu dominio Objetos de datos
DTO, POCO Modelo de datos generado Modelo de proxy generado

ViewModel

Model
devmasters.com.mx

Capa de Servicios Repositorios Objetos de Negocio

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

Diplomado de Windows Phone 8

devmasters.com.mx

Model-View-ViewModel
Cardinalidad
Generalmente, una Vista tiene un ViewModel Un ViewModel puede ser usado en una o ms Vistas Un Model puede ser usado en uno o ms ViewModels
View
ViewModel

View
ViewModel

View
ViewModel

View

View
ViewModel

View
ViewModel

Model

devmasters.com.mx

Model-View-ViewModel
Estrategias para relacionar View con ViewModel
Primero la Vista (View First)
La Vista crea el ViewModel (en XAML o code-behind) La Vista tiene inyectado el ViewModel (propiedad o constructor)

Primero el ViewModel (ViewModel First)

El ViewModel crea la Vista, se enlaza as mismo a la Vista

devmasters.com.mx

Pensando en MVVM
Para cambiar una Vista, siempre implementas una propiedad en el ViewModel
Para deshabilitar un botn: enlaza una propiedad Para cambiar el estado de la Vista: enlaza una propiedad Para iniciar una animacin: enlaza una propiedad Para mostrar errores de validacin: enlaza una propiedad

Para que la Vista ejecute cdigo

Los controles de la Vista se enlazan a propiedades de tipo ICommand Los Comportamientos de la Vista pueden invocar mtodos o enlazar un evento a un Comando
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

Diplomado de Windows Phone 8

devmasters.com.mx

Pensando en MVVM
INotifyPropertyChanged Enlace de Datos

View

Comandos

ViewModel

Model

Notificaciones
Code-behind

devmasters.com.mx

Pensando en MVVM
INotifyPropertyChanged Enlace de Datos

View

Comandos

ViewModel

Model

Notificaciones
Code-behind

Pruebas Unitarias

devmasters.com.mx

Model-View-ViewModel
Recapitulando
La Vista es XAML La Vista puede tener code-behind
Solo aquel cdigo relacionado con la lgica de la IU

La Vista mantiene una referencia al ViewModel (no siempre) La Vista se enlaza al ViewModel La Vista utiliza Comandos para invocar mtodos en el ViewModel La Vista utiliza Comportamientos para invocar mtodos en el ViewModel El ViewModel mantiene una referencia al Modelo
devmasters.com.mx

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

Diplomado de Windows Phone 8

devmasters.com.mx

Flujo de trabajo en MVVM

Los diseadores utilizan Blend
Pueden trabajar de manera individual No necesitan tocar el cdigo fuente Pueden enlazarse a las propiedades del ViewModel Pueden crear datos de ejemplo para el tiempo de diseo Pueden crear animaciones Utilizan Comportamientos para subsanar las faltantes en XAML
devmasters.com.mx

Demo: Implementando el Patrn de Diseo MVVM

Resumen

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.

Diplomado de Windows Phone 8

devmasters.com.mx

Preguntas?

Este documento se distribuye con una licencia de tipo Atribucin-CompartirIgual 3.0 Unported. Para ms informacin consulta http://creativecommons.org/licenses/by-sa/3.0/deed.es Microsoft, el logo .NET, Silverlight, Visual Studio, Expression Blend, Expression Studio, ASP.NET, SharePoint y Windows Phone son marcas registradas del grupo de compaas Microsoft.