Introducción a Kendo MVVM

Pequeña introdución al framework Kendo MVVM. Qué es el patron MVVM. Además realizamos nuestro primer ejemplo basado en esta librería Javascript.
Para aquellos que no lo conocen, Kendo es un framework Javascript que cuenta con soporte para las distintas plataformas de desarrollo (JAVA, PHP, ASP.NET y ASP.NET MVC) y que nos aporta una más que interesante colección de controles, simplificándonos el desarrollo de nuestra interfaz de usuario, y algo que está bastante de moda ahora es la utilización del patrón MVVM.

¿Qué es el patrón MVVM (Model-View-ViewModel)?

Es un patrón de diseño que fue definido por John Grossman, uno de los arquitectos que crearon WPF y Silverlight, como una variante del patrón MVP y que se asemeja al patrón MVC.

Podríamos decir que este patrón viene a aunar las ventajas provenientes del patrón MVC con el potente enlace a datos que presentan WPF o Silverlight.

Las piezas que entran en juego dentro de MVVM son:

  • Model: Es el objeto que contiene los datos que queremos visualizar, podríamos decir que es una objeto del dominio, o un DTO con la información necesaria para presentar los datos.
  • View: Es la vista donde se van a representar los datos de nuestro modelo, y donde estarán además los controles que faciliten la interacción entre el usuario y la persistencia del objeto.
  • View-Model: Esta “capa” es un objeto intermedio que realiza la función de enlazar los datos entre la vista y nuestro modelo. A través de la definición de propiedades en nuestro ViewModel podemos enlazarlas dentro de nuestra Vista para que se modifique la información, o para que se guarden los datos en una Base de Datos a través de pulsar un botón por ejemplo.

Kendo MVVM

Existen diferentes frameworks de Javascript que permiten utilizar el patrón MVVM de forma sencilla en entornos web, como pueden ser knockoutjs o angularjs, pero en este artículo vamos a ver cómo realizar la implementación de MVVM con Kendo.

Para empezar a utilizar Kendo es necesario que lo descarguemos desde su web oficial www.kendoui.com/download.aspx, donde encontraremos varias versiones de pago (con prueba de 30 días) y una versión de código abierto más reducida y sin tiques de soporte. Para este artículo voy a utilizar la versión OpenSource del mismo que ocupa aproximadamente 19 Mb.

Una vez descargado Kendo, vamos a empezar a escribir nuestro primer ejemplo con el editor que más nos guste.

Dentro de nuestro fichero HTML vamos a agregar las referencias Javascript a jQuery y al fichero kendo.web.min.js que hemos descargado.
Bien, una vez añadidas las referencias vamos a definir un viewModel sencillo:

var viewModel = kendo.observable({
Name: 'Javier Torrecilla',
Age: 30,
Description: 'Software Developer'
});

A continuación definiremos la vista que vamos a utilizar y veremos cómo gracias al atributo "data-bind" enlazaremos a nuestro viewModel.

<div id="example">
Name: <label data-bind='text: Name'></label> <br />
Age: <label data-bind='text: Age' ></label> <br />
Description: <label data-bind='text: Description' ></label><br />
</div>

El valor establecido dentro del atributo indica la propiedad del elemento HTML que vamos a utilizar, en este ejemplo la propiedad "text", y el elemento de nuestro "viewmodel" con el que se va a enlazar.
Por último será necesario que a través de Javascript indiquemos el enlace entre el viewModel y la vista, para ello utilizaremos el método "bind":

kendo.bind($("#example"), viewModel);

El primer parámetro es el contenedor que vamos a enlazar, en este caso es un "div" llamado "example", y el segundo parámetro es nuestro viewmodel.

Si visualizamos nuestra página web de ejemplo en cualquier navegador podremos ver algo similar a esta imagen:

A continuación vamos a definir una función en nuestro viewModel y un botón en la vista para invocar dicha acción:

var viewModel = kendo.observable({
Name: 'Javier Torrecilla',
Age: 30,
Description: 'Software Developer',
Greeting: function () {
alert('Good Morning');
}
});

<div id="example">
Name: <label data-bind='text: Name'></label> <br />
Age: <label data-bind='text: Age' ></label> <br />
Description: <label data-bind='text: Description' ></label><br />
<input type='button' data-bind="click:Greeting" value="Say Hello"/>
</div>

Si refrescamos nuestro navegador, veremos el nuevo botón en la página, y si presionamos dicho botón se ejecutará el código de la función que hemos definido en la función "Greeting".

Como podéis observar en el tag data-bind, hemos indicado que el elemento que se va a enlazar es el evento clic del botón.

En el próximo artículo veremos más de las características de este interesante framework para desarrollo de aplicaciones web con MVVM.