03 Model-View-ViewModel

03 Model-View-ViewModel

Temas del curso Creación de aplicaciones para Windows 8 y Windows Phone 8 Jump Start 01 Comparando Windows 8 y Windows Phone 8 02 Conceptos básicos de modelos de vista 03 MVVM ( (Model-View-ViewModel) 04 Código compartido B

Model-View-ViewModel

Agenda Introducción a MVVM (Model View-ViewModel) Librerias MVVM Arquitectura Q&A Pros y contras Código compartido con MVVM.NET portable class library Mejores prácticas MVVM Light Toolkit

Introducción a MVVM

Introducción a la arquitectura: Qué es MVVM? MVVM es un patrón de arquitectura de software Al igual que muchos patrones, promueve la reutilización de código a través de separaciones de preocupaciones y modularidad Una aplicación MVVM se divide en tres partes principales: El Modelo almacena y mantiene los datos del programa En la vista se presentan los datos y recibe el usuario de entrada a través de una interfaz de usuario de la plataforma personalizada y UX El ViewModel presenta una interfaz para enlazar los datos a los dictámenes Cada parte se acopla de manera muy informal Reutiliza el modelo y ViewModel a través de plataformas, pero no la vista

Arquitectura View Enlace de datos Comandos View Eventos /Mensajes ViewModel ViewModel Mensajes, rellamadas Modelo

Pros y Contras No todas las aplicaciones deben utilizar MVVM... Sopesar los pros y los contras y decidir el mejor enfoque para su escenario Pros Contras Se puede reutilizar el código del modelo y el modelo de vista a través de plataformas Un montón de código repetitivo El código tiene una estructura claramente definida Prueba el ViewModel con pruebas unitarias Mantenibilidad Puedes mostrar los datos en tiempo de diseño en Expression Blend y el diseñador de Visual Studio Puede ser más poderosa de lo necesario para ciertas aplicaciones El desacoplamiento pierde una fuerte comprobación de tipos

Código compartido usando MVVM

MVVM y Código Compartido En esta sección se examinan algunos de los detalles de MVVM Además, un vistazo a la biblioteca de clases portátiles Por último, algunas de las mejores prácticas al utilizar MVVM Incluye una descripción general de cada parte de MVVM Model, View, and ViewModel El énfasis en aquellas partes que facilitan el intercambio de código Enlace de datos Comandos Mensajes

Model El Model, o el Data Model, almacena los datos persistentes para una aplicación Puede ser bases de datos, archivos de almacenamiento locales, ajustes, o cualquier otro dato persistentes Responsable de crear, recuperar, actualizar y eliminar operaciones Model no debe saber nada acerca de View o ViewModel Por lo general, la parte más portátil de la aplicación Windows Phone 8 es compatible con una base de datos local de SQL Server CE Windows 8 no es así, pero las bibliotecas SQLite están fácilmente disponibles

Model public class CommonDataItem public DataItem(string uid) Uid = uid; public string Uid get; private set; // Other properties... public interface IDataService void GetItem(Action<CommonDataItem> callback, string uid); public class DataService : IDataService public void GetItem(Action<CommonDataItem> callback, string uid) // Retrieve the data from the actual source //... var item = new DataItem(...); callback(item);

View Un View debe presentar al usuario una interfaz para ver y manipular los datos Una aplicación puede tener muchos Views Views están definidos por XAML El enlace de datos se conecta de Views a ViewModels Aún posible escuchar manualmente los cambios y actualizar las Views y el Model desde el código subyacente - No es la mejor manera de mantener un View hasta al día En MVVM, la View no se ocupa de las acciones del usuario Esa es la responsabilidad del ViewModel

ViewModel Un ViewModel, o PresentationModel, es responsable de: La presentación de datos a la vista En respuesta a las manipulaciones de usuario de la vista El enlace de datos puede aliviar la labor de actualización de la vista El ViewModel mantiene la lógica empresarial de la aplicación Desconectada de View Permite a los desarrolladores trabajar en el ViewModel mientras que los diseñadores trabajan en la Vista

ViewModel Una aplicación puede tener muchos ViewModels Por lo general, un uno-a-uno entre Views y ViewModels Un ViewModel está vinculado a un View mediante el establecimiento de DataContext propiedad de un elemento de View Esta unión es heredado por todos los elementos secundarios

ViewModel public class MainViewModel : ViewModelBase private readonly IDataService _dataservice; public const string Title_PropertyName = "Title"; private string _title = string.empty; public string Title get return _title; set if (_title == value) return; _title = value; RaisePropertyChanged(Title_PropertyName); // Constructor... public MainViewModel(IDataService dataservice) _dataservice = dataservice; _dataservice.getdata( (item) => Title = item.title; );

Sobre la demostración La demostración de esta presentación utiliza la aplicación PhotoManager. Presenta MVVM bien. El PhotoManager también se utilizará para demostraciones en la siguiente presentación. PhotoManager.Win8 PhotoManager.WP8 PhotoManager.Core.Win8 PhotoManager.Core.WP8 Shared

Demo: MVVM

Enlace de datos El enlace de datos es crítico para el patrón MVVM Vincula el View a el ViewModel Puede ser una sola vez, de una sola vía, o el enlace de dos vías Ventajas: Escribe menos código para actualizar la vista Más fácil de probar la unidad El acoplamiento débil evita chocar la aplicación Puede proporcionar datos en tiempo de diseño para el diseñador

Comandos En MVVM, los comandos permiten la vista de decirle al ViewModel para ejecutar código como respuesta a una acción del usuario Sustituye el paradigma de registro de eventos en la vista. Implementa la interfaz System.Windows.Input.ICommand Los comandos se pueden activar y desactivar - Levanta el evento CanExecuteChanged cuando esto sucede

Comandos class AddItemCommand : ICommand ViewModel _viewmodel; public AddItemCommand(ViewModel viewmodel) _viewmodel = viewmodel; public event EventHandler CanExecuteChanged; public bool CanExecute(object parameter) return true; public void Execute(object title) _viewmodel.additem(title as string); En el fragmento de XAML, asegúrate de que el DataContext se establece en una instancia de la clase ViewModel. La clase ViewModel expone una propiedad AddCommand de tipo AddItemCommand El ViewModel es responsable de tener que añadir un nuevo elemento <Button Command="Binding AddCommand" CommandParameter="Untitled" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>

Mensajes Los mensajes son una forma de enviar información entre objetos. Remitente y el receptor Útil para la comunicación entre ViewModels A menudo, una devolución de llamada para cuando se hace el receptor manipular un mensaje No incorporada en la API, pero algunas bibliotecas MVVM proporcionan apoyo Por qué enviar mensajes? Supongamos que dos ViewModels están asociadas a una sola vista - Cada ViewModel se encarga de una parte de la view Quieres acciones recibidas por uno ViewModel que se pasan a otro

Mensajes public abstract class BaseViewModel : INotifyPropertyChanged private IMessenger _messenger; public IMessenger Messenger get return _messenger; set if (_messenger!= null) Unsubscribe(); _messenger = value; Subscribe(); protected virtual void Unsubscribe() protected virtual void Subscribe() protected void PublishMessage<TMessage>(TMessage message) if (Messenger!= null) Messenger.Publish<TMessage>(message); //... public interface IMessenger void Subscribe<TMessage>(Action<TMessage> handler); void Unsubscribe<TMessage>(Action<TMessage> handler); void Publish<TMessage>(TMessage message);

Mensajes public class MessageRecipient public MessageRecipient() Messenger.Default.Register<MyMessage>(this, async (msg) => var dlg = new MessageDialog(msg.Content); await dlg.showasync(); ); public class MyMessage : MessageBase public string Content get; set; var _recipient = new MessageRecipient(); //... Messenger.Default.Send<MyMessage>(new MyMessage() Content = "Hello World!" );

.NET Portable Class Library Visual Studio 2012 proporciona una plantilla de biblioteca de clases portátiles Sólo lcross-platform.net APIs disponibles Compila en una biblioteca independiente (.dll) Sólo el código administrado Sólo está disponible en las ediciones no Express de Visual Studio 2012

Mejores Prácticas Aplicaciones de diseño para la portabilidad entre plataformas Usa MVVM para ayudar a lograr este Mantenga los componentes de una aplicación imprecisa La separación de las preocupaciones - Cada componente tiene un papel único bien definido Evita dependencias entre Model, View, ViewModel Plan de actualizaciones, rediseños y pruebas Una vez más, considera MVVM u otra arquitectura de acoplamiento flexible

Mejores Prácticas El enlace de datos debería eliminar gran parte del código en el archivo de código subyacente Algunos de código subyacente está bien, pero buscar la manera de utilizar los comandos de enlace de datos y sustituir este código. Evita la unión de la misma colección grande varias veces en la misma página XAML Esto se aplica a los pivotes así. Evite duplicar enlaces a diferentes páginas dinámicas que forman parte de la misma dinámica. El enlace incurre en la memoria y la sobrecarga de la CPU, así que ten cuidado con la cantidad de datos está enlazado a una página.

Mejores Prácticas Las grandes colecciones con destino a la lista controles deben ser virtualizados Usted puede utilizar el VirtualizingStackPanel en lugar del StackPanel Tu puedes reducir el alcance del contexto de datos de la unión en el documento XAML. Por ejemplo: Un objeto Car expone un objeto Engine a través de una propiedad llamada "CarEngine" Un coche expuesto por la propiedad "MyCar" (de la vista de modelo) es el contexto de datos para un elemento XAML Los elementos secundarios de ese elemento XAML pueden cambiar de contexto de datos a la CarEngine estableciéndola en MyCar.CarEngine. Esto ayuda a evitar los caminos de propiedad largas.

Librerias MVVM

Numerosas herramientas disponibles Source: Wikipedia Jan, 2013

MVVM Light Toolkit Marco de código abierto creado y mantenido por GalaSoft Las librerias incluyen plantillas de Visual Studio Descarga en: http://mvvmlight.codeplex.com / Admite una aplicación ligera del patrón MVVM Adecuado para medianas y grandes proyectos Dos partes de la libreria Esenciales: RelayCommand, Messenger, ViewModelBase Extras: EventToCommand, DispatcherHelper

Resumen

Resumen MVVM significa Model-View-ViewModel El Model almacena los datos persistentes La View presenta al usuario una interfaz para ver y manipular datos Un ViewModel presenta datos a la vista y responde a las acciones del usuario MVVM es un patrón útil para Windows Phone 8 (y Windows 8) que permite reutilizar gran parte de la lógica de negocio de las aplicaciones Evite causar el caos en el ViewModel cuando reemplace la Vista MVVM funciona bien con otras estrategias de reutilización de código entre plataformas: Librerias portátiles, la herencia, las clases parciales, archivos de código compartido, #si los bloques

Q&A