[email protected]

Asunción, PARAGUAY

Ingeniería y desarrollo de software, emprendimiento, cursos

23 de julio de 2015

[C#] Entendiendo el patrón MVVM

Introducción

En este artículo deseo aplicar el patrón MVVM de manera simple. Para ello debemos entender qué es el patrón MVVM.
Model-View-ViewModel (MVVM) es un patrón de diseño de aplicaciones para desacoplar código de interfaz de usuario y código que no sea de interfaz de usuario. Con MVVM, defines la interfaz de usuario de forma declarativa (por ejemplo, mediante XAML) y usas el marcado de enlace de datos para vincularla a otras capas que contengan datos y comandos de usuario. La infraestructura de enlace de datos proporciona un acoplamiento débil que mantiene sincronizados la interfaz de usuario y los datos vinculados, y que enruta todas las entradas de usuario a los comandos apropiados.


Capas de la aplicación

Cuando se usa el patrón MVVM, una aplicación se divide en las siguientes capas: La capa de modelo (Model) incluye todo el código que implementa la lógica principal de la aplicación y define los tipos requeridos para modelar el dominio de la aplicación. Esta capa es completamente independiente de las capas de vista y modelo de vista. La capa de vista (View) define la interfaz de usuario que utiliza marcado declarativo. El marcado de enlace de datos define la conexión entre componentes específicos de la interfaz de usuario y diversos miembros de modelo de vista (y, en ocasiones, de modelo). La capa de modelo de vista (ViewModel) proporciona destinos de enlace de datos para la vista. En muchos casos, el modelo de vista expone el modelo directamente o proporciona miembros que encapsulan miembros de modelo específicos. El modelo de vista también puede definir miembros para realizar un seguimiento de los datos que son relevantes para la interfaz de usuario pero no para el modelo, como el orden de visualización de una lista de elementos.
-Sitio MSDN de Microsoft .

Manos a la obra

Creamos un proyecto WPF con soporte para controles Telerik: Nuevo proyecto

Seleccionamos el origen de las librerías Telerik: Origen de librerías

Seleccionamos las librerías Telerik que utilizaremos en el proyecto: Librerías Telerik En este caso seleccionaremos las siguientes librerías:
  1. Telerik.Windows.Controls.
  2. Telerik.Windows.Data.
  3. Telerik.Windows.Controls.GridView.
Creamos la estructura de carpetas, definidas de la siguiente forma:
  1. Model
  2. ViewModel
  3. Views
En el explorador de soluciones veremos una estructura similar a esta: Estructura MVVM

Modelo (Model)

Simplemente representa la clase con sus tipos de datos asociados. En nuestro ejemplo lo definimos así:
/// 
/// Clase que representa a un País
/// 
public class Pais
{
 /// 
 /// Obtiene o establece el código del País
 /// 
 public int Id
 {
  get;
  set;
 }

 /// 
 /// Obtiene o establece el nombre del País
 /// 
 public string Nombre
 {
  get;
  set;
 }
}

Modelo de Vista (ViewModel)

Representa el enlace entre el modelo (clase) y la vista que se utilizará para interactuar con el modelo. Generalmente, todos los procesos se realizan en esta capa. Nuestro ViewModel quedaría de esta forma:
/// 
/// Clase para el ViewModel, hereda de ViewModelBase 
/// para realizar las notificaciones a la Vista (View)
/// 
public class PaisViewModel : ViewModelBase
{
 private Pais pais_;
 /// 
 /// Obtiene o establece el objeto seleccionado en la grilla
 /// 
 public Pais Pais
 {
  get
  {
   return this.pais_;
  }
  set
  {
   this.pais_ = value;
   OnPropertyChanged(()=>Pais);
  }
 }

 private ObservableCollection paises_;
 /// 
 /// Obtiene o establece la lista de países asociadas a la grilla
 /// 
 public ObservableCollection Paises
 {
  get
  {
   if (this.paises_ == null)
    this.paises_ = new ObservableCollection();

   return this.paises_;
  }
  set
  {
   this.paises_ = value;
   OnPropertyChanged(()=>Paises);
  }
 }

 /// 
 /// Constructor del ViewModel
 /// 
 public PaisViewModel()
 {
  //Cargamos la lista manualmente. 
  //Normalmente se obtiene de un origen de datos real.
  this.Paises.Add(new Pais()
  {
   Id = 1, Nombre = "Argentina"
  });
  this.Paises.Add(new Pais()
  {
   Id = 2, Nombre = "Brasil"
  });
  this.Paises.Add(new Pais()
  {
   Id = 3, Nombre = "Chile"
  });
  this.Paises.Add(new Pais()
  {
   Id = 4, Nombre = "España"
  });
  this.Paises.Add(new Pais()
  {
   Id = 5, Nombre = "Paraguay"
  });
  this.Paises.Add(new Pais()
  {
   Id = 6, Nombre = "Uruguay"
  });
 }
}

Vista (View)

Es la capa visual de una aplicación, en este caso, es nuestro archivo xaml para WPF y realizaríamos estos pasos:
  1. Agregamos las librerías Telerik y la instancia de nuestro ViewModel que utilizaremos.
  2. Asignamos el DataContext, que será nuestro ViewModel.
  3. Enlazamos los controles a las propiedades del ViewModel para que se puedan visualizar los cambios.
De esta manera, nuestra Vista quedaría de la siguiente forma:
<Window x:Class="TelerikMVVM.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
  xmlns:data="clr-namespace:TelerikMVVM.ViewModel"
  Title="Paises" Height="350" Width="525">
 
 <Window.DataContext>
  <data:PaisViewModel />
 </Window.DataContext>
 
 <Grid>
  <Grid.RowDefinitions>
   <RowDefinition Height="Auto" />
   <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <StackPanel Orientation="Horizontal" Margin="5">
   <TextBlock Text="Pais seleccionado: " />
   <!--La propiedad Pais define que elemento de la grilla está seleccionado-->
   <TextBlock Text="{Binding Pais.Nombre}" />
  </StackPanel>
  
  <telerik:RadGridView Margin="5" Grid.Row="1" ItemsSource="{Binding Paises}" SelectedItem="{Binding Pais}"
        IsReadOnly="True" RowIndicatorVisibility="Collapsed" CanUserDeleteRows="False"
        CanUserInsertRows="False" NewRowPosition="None" IsFilteringAllowed="False"
        ShowGroupPanel="False" AutoGenerateColumns="True" />
 </Grid>
</Window>

Resultado

Al seleccionar una fila de la grilla, mediante la propiedad Pais, obtenemos el nombre del país seleccionado:
Resultado

Conclusión

El patrón MVVM es muy simple y nos facilita el desarrollo de aplicaciones, sobretodo aquellas que por su tamaño se tornan difíciles de controlar. Con este patrón, se logra la reutilización de la que tanto se habla en Programación Orientada a Objetos (POO) haciendo muy simple su implementación.

Este proyecto se encuentra en GitHub.

Hey, we've just launched a new custom color Blogger template. You'll like it - https://t.co/quGl87I2PZ
Suscribíte al boletín