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.!
Nota: Esta desarrollado este ejemplo en VS2010 SP1
Comentarios
Aún no hay comentarios.