Listado de productos con diferentes templates – Kendo UI y Bootstrap

Buen día a todos, en esta entrada voy a hablar un poco más de front-end y el patrón de diseño MVVM que ya hemos visto un poco en entradas anteriores utilizando Kendo. Lo que vamos a hacer lo subí en este JSFiddle pero de igual forma ya lo pudieron ver en la imagen destacada de esta entrada.

Crearemos un listado de productos que se cargarán de forma dinámica utilizando Kendo UI MVVM con datos locales y estáticos para dejarlo de una forma simple. La parte interesante del post es que se utilizarán los templates de Kendo para poder intercambiar en tiempo de ejecución la forma en la que se ven los productos (o cualquier cosa) sin tener que hacer un esfuerzo grande y lo importante, sin tener que refrescar completamente la página.

El HTML

Para comenzar no vamos a utilizar ningún lenguaje de servidor (como NodeJS o MVC) y vamos a comenzar con los siguientes archivos (solo tres):

Screen Shot 2015-04-27 at 9.19.37 PM

Dentro de index.html tendremos esta estructura inicial y con los frameworks que necesitamos (jQuery, bootstrap, font awesome y kendo ui):

Screen Shot 2015-04-27 at 9.26.23 PM

Si se dieron cuenta, ya incluimos nuestro archivo styles.css y app.js que tendrán nuestros estilos y nuestro javascript. Todo lo demás son los scripts y estilos css de jQuery, bootstrap (lo usaremos para el posicionamiento de cajas) y kendo ui (que lo usaremos para MVVM) y font awesome (que son iconos vectorizados en css).

Dentro del div#productsView vamos a empezar a escribir nuestra vista (que será nuestro listado de productos). Entonces escribimos en el div#productsView lo que va a ser nuestro título principal, el contenedor de los productos y botones para poder intercambiar el modo en que la lista se muestra:

Screen Shot 2015-04-27 at 9.31.02 PM

Tenemos el div.text-right que lo único que hace es ayudarnos a alinear a la derecha todo el texto que contiene ese div. Para nuestra suerte los buttons están configurados para que se comporten como texto si alguna regla css se les aplica, por lo tanto se alinean a la derecha. También dentro de ellos tenemos la etiqueta i.fa.fa-list-ul e igual en el otro botón. Lo que hacen es desplegar un ícono según el catálogo que podemos ver aquí. Parte importante que se usará más adelante es el atributo data-template, realmente en HTML ya podemos escribir cualquier atributo no estándar que queramos en nuestras etiquetas, el navegador simplemente las va ignorar, por lo tanto podemos usar atributos para recordar cosas para después. En este caso estamos agregando el nombre del template que vamos a crear más adelante, y con jQuery vamos a acceder a ese valor de forma sencilla.

Luego tenemos el div#products que si han seguido mis tutoriales pasados de MVVM  se les será familiar, pero sino, veamos linea por linea. Con data-role estamos indicando que tipo de widget de kendo será, en este caso es un List View que su función es ser un repetidor de código html según un data source y un template. La clase row que le damos es de bootstrap y es para que sus hijos (los productos en este caso) se comporten como columnas (más info aquí). Con data-bind estamos enlazando esta parte de la vista con el view model (que crearemos dentro de app.js) en este caso el View Model tendrá una propiedad llamada products (que será el listado de productos) y con source indicamos que será pues su origen de datos. Con data-template indicamos la forma en que se va a mostrar cada item (los elementos de products) y en este caso le damos uno por default que aun no creamos, pero tendremos dos.

Por ahora no se verá nada más que esto:

Screen Shot 2015-04-27 at 9.35.47 PM

Agregando nuestro primer template

Hasta ahora no hemos hecho nada más que la vista, porque lo que nos falta es el Tempalte y el View Model para arrancar y ver ya resultados. Antes de la etiqueta agregamos el siguiente template:

Screen Shot 2015-04-27 at 10.43.22 PM

¿porqué está dentro de una etiqueta script? La razón es que necesitamos código HTML que podamos reutilizar y que no sea interpretado por el navegador, porque como es un template, no tiene sentido hasta que sea usado. Por eso en el tipo de script le decimos “text/template” que en realidad puede ser cualquier cosa, simplemente necesitamos que el navegador no reconozca el script y no intente ejecutarlo.

Dentro del template tenemos un div con un  tamaño de columna de 4 (para dispositivos medium), y si recuerdan, el div principal que tendrá estos templates cuenta con la clase row. Esto es parte de bootstrap.

Luego simplemente agregamos la imagen de la marca, la imagen del producto, su descripción y un row anidado para mostrar el precio, cantidad en stock y botón para comprar. Recuerden, los data-bind funcionan para que Kendo pueda vincular ese elemento en la vista con alguna propiedad del view model (en este caso, los elementos de products). Por ahora sabemos que un producto debe de tener las propiedades: brandImage, productImage, description y price. Para las imágenes estamos utilizando el attribute binding para poder dar un valor a una etiqueta del elemento.

Escribiendo el View Model

Ahora es tiempo de abrir el archivo app.js y escribimos lo siguiente:

Screen Shot 2015-04-27 at 10.56.44 PMPrimero tenemos dos urls acortadas de la imagen de la marca y del producto. Luego declaro de forma floja un arreglo vacío ([ ]) y después creamos 20 objetos dummies que serán nuestros productos para la demostración.

Luego con kendo.observable() creamos nuestro view model, pasándole todas las propiedades que queremos que el view model tenga, estas con las que la vista necesita y deben de ser mostradas. Para terminar con kendo.bind hacemos ese vinculo entre la vista y el view model.

Si corremos, ya podremos ver un listado de productos, pero es necesario agregar ciertos estilos para que esto se vea bien. Dentro de styles.css agregamos lo siguiente:

Screen Shot 2015-04-27 at 11.00.45 PM

OJO: Si esta página la estas corriendo directamente abriendo el HTML, font awesome no te va a funcionar, ya que necesita de un servidor para leer los recursos. Si estás en mac, ya tienes un servidor instalado, solo escribe esta linea en la terminal estando en la carpeta del proyecto:

python -m SimpleHTTPServer 8000

Así ya podras correr en tu navegador la dirección http://localhost:8000 y ver tu código correr. Si estás en windows, tendrás que instalar IIS o Apache para correlo, si de plano no sabes, descarga font awesome o no lo uses en este tutorial ya que no es el objetivo.

El resultado si corremos, será el siguiente:

Screen Shot 2015-04-27 at 11.04.54 PM

Poder elegir entre listado o grid (cambiar de templates)

Ahora lo que nos resta hacer, es hacer otro template que utilice el mismo data source pero que se muestre de forma diferente. Al igual que ahorita, agregamos antes de la etiqueta  lo siguiente:

Screen Shot 2015-04-27 at 11.07.26 PMTodo aquí es similar al template anterior, solo que usamos una columna de tamaño 12 (que es la columna más grande) y hacemos que cada elemento ocupe todo su espacio horizontal. Le pongo xs (extra small) para hacer que desde móviles hasta escritorio aplique esta regla.

También podemos ver una especie de ciclo for, si se dieron cuenta en el view model agregué un array con las supuestas características del producto,  en el grid no se muestra pero como aquí tendremos más espacio, lo mostraremos.

Para intercambiar de templates sin tener que refrescar la página y cambiar la propiedad data-template de nuestro List View, crearemos un evento javascript con jQuery para que nuestros dos botones hagan algo al hacer click, y lo que harán será establecer un nuevo template según su data-template diga. En este evento click, this es el botón actual que hace la llamada del evento (al que le dimos click) y jQuery tiene una función llamada data para obtener cualquier valor que tenga data como prefijo (en nuestro caso data-template). Con kendo.template “compilamos” nuestro template. Posteriormente con data(“kendoListView”) accesamos a la instancia de nuestro Widget List View y accedemos a sus propiedades/métodos para poder actualizar el nuevo template. Al dar refresh se llamará de nuevo el data source pero ahora los renderizará con el nuevo template.
Screen Shot 2015-04-27 at 11.10.09 PM

Para ver mejores resultados agregamos las siguientes reglas css a nuestros estilos:
Screen Shot 2015-04-27 at 11.10.35 PM

Y el resultado final será el siguiente ya pudiendo intercambiar entre Lista y Grid:

Screen Shot 2015-04-27 at 11.11.09 PMEspero les haya gustado y les sea de utilidad 😀

Code4Fun ;D

Anuncios

Un comentario sobre “Listado de productos con diferentes templates – Kendo UI y Bootstrap

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