Pa P t a r t ó r n ó n M V M V V M V

Transcripción

1 Patrón MVVM

2 Quiénes somos? Luis Ruiz Pavón (MVP ASP.NET) Jorge Serrano Pérez (MVP VB)

3 Agenda Explicación teórica de MVVM Demostración práctica de MVVM

4 MVVM, orígenes (1 de 2)

5 MVVM, orígenes (2 de 2)

6 Partes principales de MVVM Model (modelo) [datos, información]: Al igual que en MVC, tiene dos enfoques: Orientado a Objetos - El modelo representa el estado real del contenido. Centrado a Datos - La capa de acceso a datos representa el contenido. View (vista) [UI]: Al igual que en MVC, representa la UI representada por controles (button, label, etc). View Model (vista modelo o modelo de vista) [intermediario]: Abstracción de la vista que se utiliza para mediar entre la vista y el modelo. Es similar al controlador de MVC pero especializado (actúa como convertidor y es el encargado de cambiar la información del modelo a información de la vista, pasando comandos desde la vista al modelo). Para lograr esto, el View Model expone comandos, propiedades y abstracciones.

7 Cómo funciona MVVM (Enlazando datos -1 de 3) <TextBlock x:name="txtfoo" Canvas.Top="20" Canvas.Left="40" Text="Valor Foo" Background="YellowGreen" FontWeight="Bold" /> <TextBox Canvas.Top="80" Canvas.Left="40" Text="Binding Text, ElementName=txtFoo" Width="200" />

8 Cómo funciona MVVM (Enlazando datos -2 de 3) <TextBlock x:name="txtfoo" Canvas.Top="20" Canvas.Left="40" Text="Valor Foo" Background="YellowGreen" FontWeight="Bold" /> <TextBox Canvas.Top="80" Canvas.Left="40" DataContext="Binding ElementName=txtFoo" Text="Binding Text" Width="200" />

9 Cómo funciona MVVM (Enlazando datos -3 de 3) <Canvas DataContext="Binding ElementName=txtFoo"> <TextBlock x:name="txtfoo" Canvas.Top="20" Canvas.Left="40" Text="Valor Foo" Background="YellowGreen" FontWeight="Bold" /> <TextBox Canvas.Top="80" Canvas.Left="40 Text="Binding Text" Width="200" /> <Canvas />

10 Profundizando con MVVM (1 de 2) namespace WpfTest.ViewModel public class FooViewModel public FooViewModel() this.name = "Sin Nombre"; public string Name get; set; <TextBlock x:name="txtfoo" Canvas.Top="20" Canvas.Left="40" Text="Binding Name" Background="YellowGreen" FontWeight="Bold" /> <TextBox Canvas.Top="60" Canvas.Left="40" Text="Nombre:" FontWeight="Bold" /> <TextBox Canvas.Top="80" Canvas.Left="40" Text="Binding Name, Mode =OneWay" Width="200" />

11 Profundizando con MVVM (2 de 2) Mode Default OneTime OneWay OneWayToSource TwoWay <TextBlock x:name="txtfoo" Canvas.Top="20" Canvas.Left="40" Text="Binding Name" Background="YellowGreen" FontWeight="Bold" /> <TextBox Canvas.Top="60" Canvas.Left="40" Text="Nombre:" FontWeight="Bold" /> <TextBox Canvas.Top="80" Canvas.Left="40" Text="Binding Name, Mode=TwoWay" Width="200" />

12 Notificando los cambios (1 de 2) Objetivo: Flujo: Establecer una comunicación para que nuestro ViewModel se comunique con la View. La ViewModel se comunica con la View. La View se da por enterada, evalúa la llamada y recoge la información. Cómo?: En System.ComponentModel encontramos la interfaz INotifyPropertyChanged. La interfaz define un evento llamado PropertyChanged. La View está subscrita a este evento para recibir la notificación.

13 Notificando los cambios (2 de 2) using System; using System.ComponentModel; namespace WpfTest.ViewModel public class FooViewModel : INotifyPropertyChanged public FooViewModel() this.name = "Sin Nombre"; private string name = String.Empty; public string Name get return this.name; set this.name = value; if (PropertyChanged!= null) PropertyChanged(this, new PropertyChangedEventArgs("Name")); public event PropertyChangedEventHandler PropertyChanged;

14 Otras cosas relacionadas con MVVM Notificación reutilizable: Posibilidad de crear una clase base de notificaciones. Converters o convertidores: Posibilidad de devolver datos en un formato más amigable - friendly para el usuario. Implementación de la interfaz IValueConverter. Deberemos implementar Convert (ida) y ConvertBack (vuelta). Finalmente agregaremos nuestro Converter como recurso a nuestra View. Comandos: Se utiliza para que la ViewModel pueda ejecutar un conjunto de instrucciones. Propiedad especial que implementa la interfaz ICommand. Deberemos implementar Execute, CanExecute y el evento CanExecuteChanged.

15 MVVM Frameworks Java, JavaScript,.NET : WPF MVVM Toolkit, Knockout JS, Angular JS, Onyx, MvvmCross, MVVM Light Toolkit, etc.

16 Ventajas y desventajas de MVVM Ventajas: Mayor adaptabilidad a pruebas unitarias. Desacoplamiento de la lógica de la aplicación y la interfaz de usuario. Posibilidad de reutilizar nuestro código. Posibilidad de implementar soluciones parecidas con diferentes UI (multiplataforma). Escribiremos menos código y más interpretable y comprensible. Aporta beneficios en el mantenimiento de nuestras aplicaciones. Desventajas: Al principio cuesta entender bien los conceptos. Dependiendo de la dimensión de la solución puede no ser la mejor solución arquitectónica.