[Windows 8] Apps Metro para desarrolladores Windows Phone 7.5 (2 de N)

Hola a todos!

En el primer artículo de esta serie pudimos ver como la implementación del patrón MVVM no había sufrido demasiadas variaciones y también como el apartado de Navegación había variado notablemente. Hoy quiero dedicar este segundo artículo de la serie a los mecanismos a usar para conectar nuestras Views con sus respectivas ViewModels.

Enlazando Views y ViewModels

Tras ver como podíamos usar el patrón MVVM perfectamente en una aplicación Windows 8 Metro, quiero explorar las opciones que tenemos para “casar” nuestra View con su ViewModel correspondiente, de la forma más limpia y organizada que sea posible. Para empezar, vamos a ver como lo haríamos en Windows Phone 7.5:

En Windows Phone 7.5 el enlace entre View y ViewModel lo haríamos a través de 3 pasos fundamentales. En primer lugar podríamos usar IoC para tener un mecanismo que resuelva nuestras ViewModels a partir de su Interface. Tras esto, podríamos usar una clase Locator que se encargaría de exponer propiedades, una por cada ViewModel, para que finalmente podamos asignar mediante enlaces de datos estas propiedades al DataContext de nuestra View. El proceso seguiría el siguiente esquema:

image

La ventaja de esta forma de trabajar es que obtenemos un único punto donde se resuelve la ViewModel a usar para cada View, además, al trabajar centrándonos en Interfaces para resolverlas podemos cambiar la implementación de forma sencilla y sin afectar a la View.

En una aplicación Metro, los pasos son casi idénticos, la mayor diferencia con Windows Phone es que, debido a que la plataforma es muy nueva, no existen todavía implementaciones de los IoC más usados como puede ser Unity o NInject por lo que esta parte, al menos por ahora deberemos resolverlo de otra forma. Salvo esto, el resto de pasos son iguales.

Para nuestro ejemplo crearemos un nuevo proyecto de C# + XAML en blanco (Windows Metro Style > Blank Application). Vamos a tener una ViewModel muy sencilla que herede de una clase base donde se implemente el interface INotifyPropertyChanged (como ya vimos en el artículo anterior) y que simplemente exponga una propiedad HelloMessage:

ViewModel VMStartPage
  1. public class VMStartPage : VMBase
  2. {
  3.     public VMStartPage()
  4.     {
  5.         HelloMessage = “Hi! Windows 8”;
  6.  
  7.         RaiseChange(“HelloMessage”);
  8.     }
  9.  
  10.     public String HelloMessage { get; set; }
  11. }

Como podemos ver es muy sencilla, también tendremos una página inicial que mostrará la cadena de texto de HelloMessage en el centro de la pantalla:

Pagina BlankPage.xaml
  1. <Page
  2.     x:Class=”Win8MetroMVVM.BlankPage”
  3.     xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
  4.     xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
  5.     xmlns:local=”using:Win8MetroMVVM”
  6.     xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
  7.     xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
  8.     mc:Ignorable=”d”>
  9.  
  10.     <Grid Background=”{StaticResource ApplicationPageBackgroundThemeBrush}“>
  11.         <TextBlock Text=”{Binding HelloMessage} FontSize=”122″ Foreground=”White”
  12.                    VerticalAlignment=”Center” HorizontalAlignment=”Center”>
  13.         </TextBlock>
  14.     </Grid>
  15. </Page>
 

Como se puede apreciar, hemos indicado en la propiedad Text del textblock que use la propiedad HelloMessage de nuestra ViewModel, pero no le hemos dicho cual es la ViewModel que deseamos usar, eso a continuación!

Implementar ViewModelLocator

Una vez que tenemos nuestra View y su ViewModel creadas, vamos a crear un Locator, esta clase será la encargada de exponer la instancia de nuestra ViewModel cada vez que la View la necesite. Realizaremos esto usando por un lado una variable privada del tipo Lazy<T> y una propiedad pública del tipo de nuestra ViewModel, de esta forma la primera vez que se pida la ViewModel se creará y en consecuentes peticiones ya tendremos creada nuestra instancia:

Clase ViewModelLocator
  1. public class ViewModelLocator
  2. {
  3.     Lazy<VMStartPage> startPage;
  4.  
  5.     public ViewModelLocator()
  6.     {
  7.         startPage = new Lazy<VMStartPage>(() => { return new VMStartPage(); });
  8.     }
  9.  
  10.     /// <summary>
  11.     /// Returns the active instance of startPage viewmodel
  12.     /// </summary>
  13.     public VMStartPage StartPage
  14.     {
  15.         get
  16.         {
  17.             return startPage.Value;
  18.         }
  19.     }
  20. }

Como podemos ver es una clase muy sencilla. Ahora solo tenemos que acabar de atar todos los cabos, vamos a por el enlace a datos!

Realizar los Bindings

En primer lugar vamos a compilar nuestra aplicación (sin ejecutar) y abrimos el archivo App.xaml, donde vamos a añadir una referencia al namespace de nuestro ViewModelLocator (línea 5) y un nuevo recurso que sea el propio ViewModelLocator (línea 11):

App.xaml
  1. <Application
  2.     x:Class=”Win8MetroMVVM.App”
  3.     xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
  4.     xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
  5.     xmlns:vmLocator=”using:Win8MetroMVVM.ViewModels”
  6.     xmlns:local=”using:Win8MetroMVVM”>
  7.  
  8.     <Application.Resources>
  9.         <ResourceDictionary>
  10.             
  11.             <vmLocator:ViewModelLocator x:Key=”Locator”></vmLocator:ViewModelLocator>
  12.             
  13.             <ResourceDictionary.MergedDictionaries>
  14.                 <ResourceDictionary Source=”Common/StandardStyles.xaml”/>
  15.             </ResourceDictionary.MergedDictionaries>
  16.  
  17.         </ResourceDictionary>
  18.     </Application.Resources>
  19. </Application>

Ahora podemos ir a nuestra página BlankPage.xaml y añadir a la definición de la página la propiedad DataContext, enlazada a nuestro nuevo recurso Locator:

Cabecera BlankPage.xaml
  1. <Page
  2.     x:Class=”Win8MetroMVVM.BlankPage”
  3.     xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
  4.     xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
  5.     xmlns:local=”using:Win8MetroMVVM”
  6.     xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
  7.     xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
  8.     mc:Ignorable=”d”
  9.     DataContext=”{Binding StartPage, Source={StaticResource Locator}}“>

Si hemos seguido todos los pasos correctamente, podremos ejecutar la aplicación y veremos un resultado que debería parecerse a este:

image

BONUS: Lo mejor de todo es que hemos realizado todo esto y tenemos nuestra ViewModel funcionando sin escribir ni una sola línea de Code Behind!!

Conclusión

Con lo visto en estos dos primeros artículos de la serie, ya podemos empezar a plantear nuestras aplicaciones Metro, usando MVVM, resolviendo nuestras ViewModel con una clase Locator y realizando enlace a datos. Como de costumbre, aquí os dejo el proyecto de ejemplo para que podáis jugar con el hasta el próximo artículo!

Un saludo y Happy Coding!

Deja un comentario

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