Aplicaciones Web MVVM con Kendo UI y NodeJS (ft. bootstrap) – Parte 2

Buenas noches (o tardes?) a todos :D.

En esta ocasión seguiré con la ahora serie de posts de NodeJS y Kendo UI, ya que es continuación del post anterior te recomiendo que la leas antes de seguir en este.

Lo que busco hacer en esta entrada es seguir viendo como funciona MVVM incluyendo ahora operaciones clásicas “CRUD” utilizando la funcionalidad del Data Source de Kendo. Lo que haremos es siguiendo el mismo ejemplo de la entrada anterior el poder crear, leer, actualizar y eliminar elementos de nuestro listado realizando los requests HTTP necesarios. No usaremos bases de datos, tal vez lo extendamos después. También decidí incluir Bootstrap en este ejemplo y básicamente esta será la actualización de nuestro proyecto:

Screen Shot 2015-04-03 at 10.52.41 PM

La idea es poder hacer un CRUD de productos, entonces necesitamos crear nuevas rutas con distintos metodos HTTP. Primero crearemos la ruta /products de tipo GET.Modificaremos nuestra ruta index.js:

Screen Shot 2015-04-03 at 10.56.49 PM

Simplemente estamos regresando una respuesta en JSON, y lo que regresamos será un arreglo estático global como se muestra en la siguiente imagen:

Screen Shot 2015-04-03 at 10.56.56 PMAl inicio de la ruta index, agregamos dos variables globales; una será un array de objetos y la otra simplemente es un contador para simular los ProductId´s que iremos agregando, ya que no usaremos ninguna base de datos por ahora.

Ahora crearemos la ruta para crear, será /products también pero con método POST:

Screen Shot 2015-04-03 at 11.00.58 PM

Esta ruta POST lo que hará es simplemente agregar el elemento recibido en el body al arreglo dummyProducts. Algo importante es el req.body, si no utilizaste el generador de proyectos de Express, esta linea no te funcionará ya que utiliza de un módulo para parsear los datos que vengan en el body de una solicitud.

Es importante que al “crear” un objeto (en este caso es dummy) regresar el Id que ahora le pertenece al objeto, ya que Kendo UI lo necesita para saber si son objetos ya creados o nuevos.

Para actualizar y eliminar objetos usaremos las siguientes rutas:

Screen Shot 2015-04-03 at 11.04.14 PM

Usamos el mismo truco “splice” que habíamos utilizado en el post anterior, ya que sigue siendo javascript. El Update no hace nada mas que un recordatorio en el TODO por si llegamos a usar una base de datos.

De esta forma tenemos nuestro CRUD muy dummy. Ahora nos es necesario actualizar tanto el HTML y el Javascript.

Nuestro View Model tendrá cambios no tan fuertes pero lo veremos en partes, antes teníamos un array products, ahora éste se convertirá en un objeto de la clase Data Source de Kendo UI para que nos ayude a manejar el CRUD de una manera más fácil:

Screen Shot 2015-04-03 at 11.07.04 PM

Al constructor de Data Source le estamos pasando un objeto con dos objetos principales; transport schema. Transport como se puede deducir, estamos indicando las direcciones de ahora nuestra “API” dando los URLs, el tipo de método y el tipo de dato que se quiere manejar. En esta ocasión la URL es la misma para todos, pero con los métodos HTTP diferenciamos cada acción que vamos a desear hacer. Schema es para indicar los meta datos de nuestro data source, solamente lo usamos para decirle que propiedad es el ID (si un objeto en el data source no tiene ID, significa que es nuevo y debe crearlo) y ya que por default maneja todas las propiedades como string, le indicamos lo contrario en los campos price quantity.

El método que antes teníamos para eliminar objetos (removeProduct) lo eliminamos y actualizamos el método addProduct a la siguiente forma:

Screen Shot 2015-04-03 at 11.12.25 PM

(parseFloat está de más) Como ya no es un array, ya no usamos el método push, ahora utilizamos el add para agregar objetos al data source. También al final indicamos que nuestro data source debe sincronizarse, y si hay objetos sin ID, el data source se encargará de mandarlos al URL correspondiente (método POST).

Los métodos total, totalprice y totalUnits tendrán ligeros cambios:

Screen Shot 2015-04-03 at 11.14.05 PMYa que ya no estamos trabajando con un array sino con un data source, con el método data obtenemos el array de los objetos actualmente en el data source.

Por último, un nuevo método tenemos que agregar que se ejecutará cuando intentemos eliminar un objeto de nuestro listado, simplemente para prevenir una acción irreversible:

Screen Shot 2015-04-03 at 11.15.28 PMEstos son los cambios hechos en el View Model. Al final pondré el repositorio para que lo puedas ver completo.

Los cambios en la vista son fuertes, de hecho el View Model cambio solo el array products, pero nuestra vista sí cambiará mucho más ya que ahora vamos a utilizar Bootstrap.

Los cambios en layout.jade son sencillos, solo hemos agregado el cdn de bootstrap dentro de la etiqueta head:

link(href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”, rel=”stylesheet”)

Dentro de index.jade hemos implementado bootstrap y ahora utilizaremos un Widget de Kendo UI llamado ListView. Lo que habíamos usado antes era simplemente un “repeater” por así decirlo con templates, pero ahora usaremos un widget que nos facilitará con la creación del CRUD:

Recuerdan los templates? hemos modificado el rowTemplate en la parte de los botones, para tener un botón de edición y el que ya teníamos (el de eliminar) pero estos tienen clases CSS de kendo que ayuda al ListView saber que tipo de acción realizan:

Screen Shot 2015-04-03 at 11.23.32 PM

Lo que nos importa acerca de bootstrap son las clases btn, btn-sm y btn-primary/danger. Lo que hacen es dar estilos al enlace de que parezcan botones de diferentes colores. k-edit/delete-button son las clases CSS que kendo usa para diferenciar que tipo de acción va a realizar ese elemento.

El footer sigue igual, solo se cambió el orden de las columnas para que luciera mejor.

Agregamos también un nuevo Template, y su función es de “Que se mostrará cuando estés editando un Row”

Screen Shot 2015-04-03 at 11.25.08 PM

Al igual, usa clases de bootstrap y de kendo para ver que tipo de comando es (en Update y Cancel) pero los inputs que ahora utilizamos son diferentes (2do y 3ro). Estos son widgets de Kendo que su función es convertir un input tradicional en un elemento más dinámico, en este caso un Numeric TextBox, que su función es ser un text box en el cual solo se pueden introducir números. En este caso lo logramos con la propiedad data-role y propiedades extras que nos ayudan a configurarlo como queramos. He aquí la referencia. k-update y k-cancel nos sirven para que Kendo sepa que acción tomar, similar a los ya vistos.

Recuerdan el div donde estaba el formulario que nos ayudaba agregar elementos? quedará de la siguiente forma (utilizará bootstrap y numeric textboxes para lucir mejor)

Screen Shot 2015-04-03 at 11.30.00 PM

Para visualizarlo mejor, pondré el resultado HTML:

Screen Shot 2015-04-03 at 11.32.37 PM

Cada div con clase form-group representa un conjunto de Label-Input y todos deben estar dentro de form-horizontal porque todos juntos representan un formulario. El sistema de columnas de bootstrap es muy interesante y util, para aprender más ve aquí. La clase form-control nos permite darle una mejor vista a nuestros inputs, cosas que ofrece bootstrap es poder dar estilos a nuestros elementos sin ningún esfuerzo.

Para finalizar, nuestro Table quedará de esta forma:

Screen Shot 2015-04-04 at 12.14.32 PM

Primero que nada, nuestro table es ahora hijo de un div con clase panel y panel-default. Lo que hacen es crear como su nombre lo dice, paneles y en este caso solo estamos agregando el título “Products” e inmediatamente tenemos la tabla. Aquí la referencia. También ahora nuestra tabla tiene las clases table, table-bordered y table-striped, que son clases helpers de bootstrap para hacer más vistoso nuestro table. Aquí la referencia.

Agregamos el data-role, que nos permite decir el tipo de Widget de Kendo que será. También se agregó data-edit-template para indicar qué template se utilizará cuando el comando Edit se llame.

El resultado de todo esto, será como ya lo vimos al inicio:

Screen Shot 2015-04-03 at 11.41.08 PM Screen Shot 2015-04-03 at 11.41.14 PM

Si notan en la imagen superior, ese es el propósito del Edit Template. Muestra los elementos que nosotros queramos al querer editar un Row.

Espero les interesen más estas tecnologías, que a mi me han funcionado de maravilla (hablando de Kendo y bootstrap) e interesantes (hablando de NodeJS).

Saludos!

Repositorio Github

Anuncios

Un comentario sobre “Aplicaciones Web MVVM con Kendo UI y NodeJS (ft. bootstrap) – Parte 2

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s