Compartiendo Código: Móvil + Web + Escritorio (1/2)

Introducción

Desde hace mucho tiempo, una de las principales preocupaciones de todo programador es la reutilización del código escrito a través de distintos proyectos.

Hasta hace relativamente poco, un proyecto en el que tuviesemos que realizar aplicaciones de escritorio (Windows forms), web (asp.net) y móvil (compact framework) requería reescribir en cada proyecto gran parte de nuestro código, salvando la lógica de negocio y acceso a datos, casi todo lo demás se escribía en exclusiva para cada plataforma.

Con las nuevas tecnologías de desarrollo a nuestro alcance (WPF, Silverlight, Silverlight Mobile) y haciendo uso del patrón MVVM este escenario cambia radicalmente, pudiendo compartir y reutilizar la mayoría de nuestro código entre los distintos tipos de aplicaciones.

A esta reutilización más eficiente de nuestro código debemos añadir el hecho de que, al independizar nuestro código de nuestra capa de visualización, el trabajo de Unit Testing se simplifica en gran manera.

¿Que es MVVM?

MVVM es un patrón de diseño creado por Jhon Grossman, uno de los arquitectos de WPF en Microsoft y desvelado por primera vez en 2005.

Este patrón se compone del Model, la representación de nuestros datos, el ViewModel, un adaptador intermedio que hace nuestro modelo apto para ser consumido por la vista y por último la View, la vista, nuestra capa de presentación.

Gracias al magnífico Binding de WPF / Silverlight este patrón es muy sencillo de usar y en combinación con los comandos, puede reemplazar totalmente a los eventos y desplazar la mayoría del código de la vista al viewmodel, haciéndolo totalmente independiente de la vista en si misma. A continuación tenéis un esquema de esto:

MVVM

Este es un resumen de lo que es MVVM, podéis encontrar una explicación más detallada aquí.

Un ejemplo básico de MVVM

Ahora vamos a ver un ejemplo muy básico de una aplicación MVVM que muestre dos cadenas de texto en una ventana WPF.

Para ello creamos un nuevo proyecto WPF Application, vamos a tener dos clases en este proyecto: BasicModel y BasicViewModel, y vamos a renombrar nuestra ventana MainWindow a BasicView, al terminar deberíamos tener una estructura parecida a esta:

image

Vamos a empezar por definir nuestro modelo, en este caso simplemente tenemos dos métodos públicos que devuelven cadenas de texto y un constructor de clase:

 

 

    class BasicModel
    {
        public BasicModel() { }

        public string SayHello()
        {
            return "Hello Brain";
        }

        public string SayBye()
        {
            return "Bye bye Brain!! (the best WP7 game ever...)";
        }
    }

 

 

Como podéis ver es extremadamente simple, pensad que en el modelo, en vez de devolver simplemente una cadena, consultaríamos la base de datos, etc…

Ahora vamos a por nuestro ViewModel, es muy sencillo también:

 

    class BasicViewModel 
    {
        private BasicModel Model { get; set; }

        public BasicViewModel() 
        {
            Model = new BasicModel();
        }

        public string SayHello
        { 
            get
            {
                return Model.SayHello();
            }
        }

        public string SayBye
        {
            get
            {
                return Model.SayBye();
            }
        }
    }

 

Como podéis ver nuestro ViewModel simplemente actua de intermediario entre nuestra vista final y nuestro modelo, de esta forma conseguimos independizar ambos extremos y nos resultará más sencillo el mantenimiento en ambos puntos.

Finalmente vamos a definir el código xaml que enlazará con nuestro ViewModel para mostrar los datos:

 

<Window x:Class="BasicMVVM.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Basic="clr-namespace:BasicMVVM"
        Title="MainWindow" Height="171" Width="285">
        
    <Window.Resources>
        <Basic:BasicViewModel x:Key="BasicVM"></Basic:BasicViewModel>
    </Window.Resources>

    <Grid DataContext="{StaticResource BasicVM}">
        <TextBlock Text="{Binding Path=SayHello}"></TextBlock>
        <TextBlock Text="{Binding Path=SayBye}" Margin="0,27,0,0"></TextBlock>   
    </Grid>
</Window>

 

Simplemente añadimos una referencia al namespace en el que se encuentra nuestra clase ViewModel, creamos con el un recurso de la ventana, usamos el Binding de WPF para establecer nuestro ViewModel como el contexto de datos de la grid y por último enlazamos las propiedades de los textblock a nuestras propiedades.

Y aquí está la mayor virtud de MVVM, como podéis ver, no existe más código en nuestra ventana que el propio xaml para definir los controles y sus bindings, todo el resto del código se encuentra en el Model y el ViewModel, con lo que conseguimos una independencia total de la vista, abriendo el camino hacia la reutilización de nuestro código de una manera más eficiente en diferentes tipos de proyecto.

Si ejecutamos nuestra aplicación veremos que el resultado es el siguiente:

image

 

Conclusiones 1º Parte

Bueno, con esto terminamos la primera parte de este artículo, ya sabemos en líneas generales que es esto del MVVM, de donde viene, las ventajas que aporta y hemos visto un pequeño ejemplo de como usarlo…

En la segunda parte nos centraremos en desarrollar aplicaciones WPF, Silverlight y WP7 que compartan el 80% del código fuente gracias al patrón MVVM.

Espero que os haya resultado entretenido este artículo, a los que ya conocíais MVVM espero que os parezca correcto a los que no lo conocíais espero que os pique la curiosidad por seguir investigando y a todos, muchas gracias por leerme!

Aquí tenéis el código de ejemplo de este artículo, Happy Coding!

9 comentarios sobre “Compartiendo Código: Móvil + Web + Escritorio (1/2)”

  1. Hola Josue:

    ¿ El MVVM View Model pattern va de la mano con WCF RIA Services ? O son dos cosas distintas. Para una aplicación Silverlight cómo intervienen, asi de forma general. Gracias.

  2. Hola Alex, son dos cosas distintas, MVVM es un patrón de diseño, y WCF RIA son servicios web para Silverlight, de hecho tu Model puede estár en un WCF RIA y que el ViewModel se comunique con el y pase la información a tu aplicación Silverlight por ejemplo

    Un gran saludo!

  3. Es cierto, muy sencilla la explicación, pero altamente instructiva ;-). Al paso que vas te vas a convertir en un gran maestro ;-). Cuando te fiche una gran universidad para impartir docencia llamame que me apunto a tus clases ;-).

    Un saludo

  4. Jajaja, gracias Corsario… bueno, lo de gran maestro… por ahora con becario me conformo, queda mucho que recorrer, además lo importante es tener con quien compartir 🙂

  5. Hola Josué:

    Gracias por responder. De hecho estoy por iniciar a desarrollar una aplicación de gestión administrativa, la pienso desarrollar en Silverlight con C#. En un escenario (red local) trabajará fuera del navegador en el desktop y en el escenario de acceso remoto que será través de internet, la misma aplicación se ejecutará dentro del navegador, entonces es aqui donde necesitaré utilizar tanto el patrón de diseño MVVM como también los WCF RIA Services. ¿ Cómo ves ? Espero tus comentarios. Gracias.

  6. Hola muy buena tu página , espero haber encontrado el lugar donde entender mas de este tema. Estoy comenzando a investigar sobre Silverlight, vengo de hacer aplicaciones web con asp net. Distribuyendo los proyectos en capas ( presentación, negocio, Acceso a datos y la capa transversal) para mantener la seguridad y la independencia de datos. Utilizando mis objetos generado en con mis propias clases. Necesitaría saber si existen ejemplos de aplicaciones productivas. Para ver las buenas prácticas, en cuanto a la comunicación entre cliente/Servidor y como puedo desde la capa de presentación ( en este caso silverlight) instanciar objetos de mis clases. Por ejemplo la case cliente, con sus propiedades y métodos.

    No quiero comenzar a desarrollar aplicaciones y que la manera de plantear las capas no sea la correcta. Agradezco desde cualquier ayuda.

    Saludos.

Responder a anonymous Cancelar respuesta

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