[SL]Empezando con SL, Datos y MVVM

Introducción

En el post anterior estuvimos viendo, una de las formas que tenemos, para consultar los datos de nuestra BD y explotarlos desde Silverlight.

El objeto de este POST, es empezar a adoptar el patrón de diseño MVVM.

MVVM

Hay muchos post abierto acerca del patrón MVVM(Model-View-ViewModel, pero os recomiendo que os leais el tercer capítulo del libro de WP7 de Josue Yeray (al igual que el primero y segundo).

Me gustaría indicar que este patrón aplica tanto a Silverlight (incluyendo WP7) como WPF.

Componentes de MVVM

Los componentes de MVVM son los siguientes:

Model: son los datos que se van a manejar.

View: Va a ser el control donde se va a visualizar la información aportada desde el ViewModel.

ViewModel: Es el encargado de relacionar la vista con el modelo.

En este patrón entra en juego el conocer el estado de los objetos, a través de la interfaz “INotifyPropertyChanged” de la cual ya hable hace un tiempo.

Dentro de MVVM tienen mucha importancia las propiedades y los comandos, que veremos en próximos posts.

Aplicando el patrón a Nuestro Proyecto

En el ejemplo del post anterior teniamos una estructura como la siguiente:

– Client.Aplicacion (Aplicación Silverlight)

– Client.Aplicacion.Web (Aplicación base para alojar la primera)

– Server.Datos (Proyecto con las clases del modelo de EF)

– Server.Servicios (Domain Services para comunicar con la BD)

Nuestro Domain Services va a actuar como “Model” dentro de MVVM.

Vamos a agregar dos nuevos proyectos a nuestra solución de Visual Studio:

  1. Proyecto del Tipo: Silverlight Class Library, al que llamaremos Client.ViewModels.
    Dentro de este proyecto vamos a agregar una nueva clase que va a servir de base para todas las ViewModels de nuestra aplicación.
       1: using System.ComponentModel;

       2:  

       3: namespace Client.ViewModels

       4: {

       5:     public class vmBase : INotifyPropertyChanged 

       6:     {

       7:  

       8:         public event PropertyChangedEventHandler PropertyChanged;

       9:         public void CambiarPropiedad(string propiedad)

      10:         {

      11:             if (PropertyChanged != null)

      12:                 PropertyChanged(this, new PropertyChangedEventArgs(propiedad));

      13:         }

      14:     }

      15: }

  2. Proyecto del Tipo: Silverlight Class Library, al que llamaremos Client.Views.

    Dentro de este proyecto vamos a alojar todas las vistas de la aplicación.

Al igual que en nuestro proyecto anterior vamos a mostrar por pantalla los datos relativos a las Categorias.

El primer paso será establecer en las propiedades del proyecto Client.ViewModels el enlace a WCF Ria Services link, que en este caso será “Server.Servicio”.

A continuación, vamos a crear un ViewModel que herede de la clase base que definimos anteriormente, para que tengamos como propiedades todas las características que queramos exponer. En el caso que nos atañe queremos tener un listado de las Categorías de nuestra BD

   1: using System.ServiceModel.DomainServices.Client;

   2:  

   3: namespace Client.ViewModels

   4: {

   5:     public class vmCategorias : vmBase 

   6:     {

   7:         Server.Servicio.dServicio context;

   8:         public vmCategorias()

   9:         {

  10:             context = new Server.Servicio.dServicio();

  11:             context.Load(context.GetCategoriesQuery());

  12:             Categorias = context.Categories;

  13:         }

  14:         private EntitySet<Server.Datos.Categories> _Categorias;

  15:         public EntitySet<Server.Datos.Categories> Categorias

  16:         {

  17:             get { 

  18:                 return _Categorias; 

  19:             }

  20:             set { 

  21:                 _Categorias = value;

  22:             CambiarPropiedad("Categorias");

  23:             }

  24:  

  25:         }

  26:     }

  27: }

Una vez definida la ViewModel que nos indicará los datos que vamos a visualizar, ahora vamos a definir como queremos visualizarlos a través de una Vista.

A continuación vamos a agregar la referencia del proyecto “ViewModels” al proyecto “Views”, para poder comunicarlos.

Para ello, vamos a agregar al proyecto “Client.Views” un nuevo UserControl, y vamos a definir su código XAML como:

   1: <UserControl x:Class="Client.Views.uCategorias"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   6:     mc:Ignorable="d"

   7:     d:DesignHeight="300" d:DesignWidth="400">

   8:     <Grid x:Name="LayoutRoot" Background="White">

   9:         <ListBox x:Name="lCategorias" ItemsSource="{Binding Categorias}">

  10:             <ListBox.ItemTemplate>

  11:                 <DataTemplate>

  12:                     <Grid>

  13:                         <Grid.ColumnDefinitions>

  14:                             <ColumnDefinition/>

  15:                             <ColumnDefinition/>

  16:                         </Grid.ColumnDefinitions>

  17:                         <TextBlock Grid.Column="0" Text="{Binding CategoryName}"/>

  18:                         <TextBlock Grid.Column="1" Text="{Binding Description}"/>

  19:                     </Grid>

  20:                 </DataTemplate>

  21:             </ListBox.ItemTemplate>

  22:         </ListBox>

  23:     </Grid>

  24: </UserControl>

Y vamos a realizar el enlace con la ViewModel que definimos anteriormente desde el Code Behind:

   1: using System.Windows;

   2: using System.Windows.Controls;

   3: using System.ComponentModel;

   4:  

   5: namespace Client.Views

   6: {

   7:     public partial class uCategorias : UserControl

   8:     {

   9:         public uCategorias()

  10:         {

  11:             InitializeComponent();

  12:             this.Loaded += new RoutedEventHandler(uCategorias_Loaded);

  13:         }

  14:  

  15:         void uCategorias_Loaded(object sender, RoutedEventArgs e)

  16:         {

  17:             if (DesignerProperties.IsInDesignTool)

  18:                 return;

  19:             this.DataContext = new ViewModels.vmCategorias();

  20:         }

  21:     }

  22: }

Tal como comente en otro post anterior, para evitar un error realizo la comprobación de si estamos en diseño.

 

Una vez definida nuestros ViewModel y View, es el momento de que lo agregemos a nuestra Aplicación principal. Para ello, agregaremos la referencia al proyecto Client.Views (dentro del proyecto principal) y estableceremos el siguiente código XAML:

 

   1: <UserControl x:Class="Client.Aplicacion.MainPage"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   6:              xmlns:vistas="clr-namespace:Client.Views;assembly=Client.Views"

   7:     mc:Ignorable="d"

   8:     d:DesignHeight="353" d:DesignWidth="553">

   9:  

  10:     <Grid x:Name="LayoutRoot" Background="White">

  11:         

  12:               <vistas:uCategorias HorizontalAlignment="Left" Margin="270,99,0,0"

  13:  Name="uCategorias1" VerticalAlignment="Top" />

  14:     </Grid>

  15: </UserControl>

Bueno espero que os sea de utilidad y nos vemos en los próximos posts!.

 

Saludos!

3 comentarios en “[SL]Empezando con SL, Datos y MVVM”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *