Patrón

Ejemplo simple del Patrón MVVM y WPF(Conceptos).

WPF es una tecnología fascinante no solo porque te permite hacer grandiosas cosas con las interfaces si no que ofrece mecanismos para poder facilitar el desarrollo de nuestras aplicaciones.

Una breve introducción  sobre que es el patrón MVVM:

Una breve explicación fuera de tecnicismos (que la mayoría de ocasiones confunde en vez de ayudar) es que ofrece la posibilidad de separar prácticamente en su totalidad el código fuente de la interface en otras palabras que uno puede borrar, rediseñar  parcial o totalmente las interfaces que se presentan al usuario final.

El patrón MVVM se divide en 3 principales conceptos que hay que entender antes de implementarlo.

Model(Modelo):

El modelo no es mas que simplemente los datos, por ejemplo los datos de una persona:Nombre ,Apellidos,Ocupación etc.…

ModelView (Vista-Modelo) :

El ModelView es el encargado de en términos vincular los datos de nuestro modelo a la interface, además de reflejar los cambios hechos en la interface hacia el modelo. Yo lo entiendo en términos generales es como el intermediario entre los datos y la interface  esto permite que el código fuente y la interface vivan independientes.

View(Vista):

Como su nombre lo indica son las interfaces  no hay mas que decir solo que los controles o componentes de la interface se enlazaran al ViewModel para que este se encargue de efectuar los cambios al modelo.

 

Claro este es un concepto muy general porque MVVM abarca mas que eso. No estaría mal que investigaran un poco mas sobre ello a mi en lo personal me ha costado mucho tiempo y trabajo entenderlo por eso trato que este artículo sea lo mas sencillo posible.

Vamos a realizar un ejemplo sencillo sobre como trabaja este patrón:

Para esto vamos a crear un simple proyecto de WPF yo en lo personal me gusta mas VB.NET así que este  artículo se basara en este lenguaje.

Para empezar ha que crear el modelo:

Como? simplemente una nueva clase  que llamaremos Game

Esta clase contiene algunas propiedades de un videojuego:

Public Class Game

    Public Property Name As String

    Public Property Description As String

    Public Property Platform As String

End Class

Ahora el siguiente paso es crear el ViewModel que no es mas que otra clase

pero a diferencia de la otra esta implementa la interface INotifyPropertyChanged

Esta interface se usa para notificar que alguna de nuestras propiedades ha cambiado es muy útil en este patrón.

Aquí esta la clase:

Imports System.ComponentModel

Imports System.Collections.Generic

Public Class GameViewModel

    Implements INotifyPropertyChanged

    Public Sub New()

        Dim Game1 As New Game

        Dim Game2 As New Game

        Dim Game3 As New Game

        Game1.Name = "Halo Reach" : Game1.Description = "Shotter" : Game1.Platform = "Xbox 360"

        Game2.Name = "BioShock" : Game2.Description = "Shotter" : Game2.Platform = "Xbox 360"

        Game3.Name = "Devil May Cry" : Game3.Description = "Shotter" : Game3.Platform = "Xbox 360,PS3"

        Games = New List(Of Game)

        Games.Add(Game1)

        Games.Add(Game2)

        Games.Add(Game3)

    End Sub

    Private _Games As List(Of Game)

    Public Property Games As List(Of Game)

        Get

            Return _Games

        End Get

        Set(value As List(Of Game))

            _Games = value

            NotifyPropertyChanged("Games")

        End Set

    End Property

    Public Event PropertyChanged(sender As Object, e As System.ComponentModel.PropertyChangedEventArgs) _

Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged

    Private Sub NotifyPropertyChanged(ByVal info As String)

        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(info))

    End Sub

End Class

En esta clase he creado una lista del tipo Game en ella tendremos nuestra colección de video juegos.

Además cabe decir que la parte mas interesante de esta clase es la manera en que que notificamos algún cambio en las propiedades estas pueden ser cambiadas ya sea por código o por medio de la interface.

  Private Sub NotifyPropertyChanged(ByVal info As String)

        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(info))

    End Sub

Esta rutina es la encargada disparar el evento que notifica cuando una propiedad ha cambiado y para lograr esto simplemente debemos mandarla a llamar en el set de cada propiedad que deseemos actualizar.

 Private _Games As List(Of Game)

    Public Property Games As List(Of Game)

        Get

            Return _Games

        End Get

        Set(value As List(Of Game))

            _Games = value

            NotifyPropertyChanged("Games")

        End Set

    End Property

Por ultimo ahora solo queda enlazar nuestro ViewModel con nuestra interface(View)

Esto se hace en el constructor de la clase del MainWindow.xaml

  Public Sub New()

        ' This call is required by the designer.

        InitializeComponent()

        'Enlazamos el ViewModel con la interface.

        Me.DataContext = New GameViewModel

        ' Add any initialization after the InitializeComponent() call.

    End Sub

Creamos nuestra pequeña interfaz que solo se compone de un DataGrid la parte interesante es como le indicamos al DataGrid que llene la colección de videojuegos esto se logra mediante su propiedad ItemsSource  y para que genera automaticamente las columnas solo basta como poner en True la propiedad AutoGenerateColumns

El código XAML luce así:

 <DataGrid AutoGenerateColumns="True" Height="270" HorizontalAlignment="Left" 

                  Margin="12,29,0,0" Name="DataGrid1"

                  VerticalAlignment="Top" Width="479"

                  ItemsSource="{Binding Games}"/>

y si le damos F5 a nuestro proyecto se debería ver algo así:

Como verán al principio debe ser algo confuso porque tanto para solo agregar una colección de datos , la ventaja principal es que nos brinda la posibilidad de cambiar de controles, o de interfaces hasta reutilizar el código en otras interfaces además utilizando las características de WPF en una aplicación real este patrón brinda una escalabilidad enorme y fácil de mantener.

Por ahora a sido todo espero le haya sido útil este pequeño artículo.

Saludos.!

Decarga el Codigo

Nota: Esta desarrollado este ejemplo en VS2010 SP1