Jasmine. Matchers (III) - toThrow, toThrowError

Artículos anteriores:
Jasmine. Introducción. Creando el primer test
Jasmine. Matchers (I) - toBe, toEqual, toMatch, toBeDefined, toBeUndefined, toBeNull
Jasmine. Matchers (II) - toBeTruthy, toBeFalsy, toContain, toBeLessThan, toBeGreaterThan, toBeCloseTo

En este artículo voy a mostrar el funcionamiento de dos matchers de Jasmine un tanto especiales, se trata de matchers que, en lugar de comprobar que nuestro código no falla, nos ayudan a comprobar que nuestro código falla cuando debe de fallar y de la forma que debe de fallar.

Son los matchers toThrow y toThrowError que nos permiten comprobar que las funciones producen errores cuando esperamos que los produzcan, generalmente cuando reciben parámetros no válidos.

Jasmine. Matchers (II) - toBeTruthy, toBeFalsy, toContain, toBeLessThan, toBeGreaterThan, toBeCloseTo

Artículos anteriores:
Jasmine. Introducción. Creando el primer test
Jasmine. Matchers (I) - toBe, toEqual, toMatch, toBeDefined, toBeUndefined, toBeNull

En este artículo sigo repasando los diferentes matchers que nos proporciona el framework de Jasmine. Concretamente veremos los matchers toBeTruthy, toBeFalsy, toContain, toBeLessThan, toBeGreaterThan, toBeClose.

Jasmine. Matchers (I) - toBe, toEqual, toMatch, toBeDefined, toBeUndefined, toBeNull

Artículos anteriores:
Jasmine. Introducción. Creando el primer test

Jasmine implementa un importante número de funciones de comprobación o matchers.

Los matchers nos permiten comprobar si un valor cumple una condición determinada, o si no la cumple anteponiendo la palabra clave not al matcher.

Vamos a repasar estos matchers viendo ejemplos de su funcionamiento.

Jasmine. Introducción. Creando el primer test

Jasmine es uno de los frameworks de pruebas de código JavaScript más utilizados. Como sus propios creadores indican no depende de ninguna otra librería JavaScript y no requiere de un DOM para ejecutarse.
Este articulo pretende ser el primero de una serie en la que iré explicando desde cómo descargar el framework y crear nuestro primer test hasta cómo personalizar las características del framework o utilizar el plugin jasmine-ajax que permite simular llamadas Ajax en los tests.

SlickGrid. DataView (y IV) - Paginación

Artículos anteriores:

SlickGrid. Ejemplo básico (I) - Creando el primer grid

SlickGrid. Ejemplo básico (y II) - Añadiendo funcionalidad

SlickGrid. Dando formato a las celdas (I) - Formato básico

SlickGrid. Dando formato a las celdas (y II) - Formato avanzado
SlickGrid. Habilitando la edición (I) - La teoría
SlickGrid. Habilitando la edición (y II) - Creando los editores
SlickGrid. Carga asíncrona de celdas (I) - La propiedad asyncPostRender
SlickGrid. Carga asíncrona de celdas (y II) - Generando una caché de datos
SlickGrid. Proveedor de datos (I) - Creando un proveedor de datos
SlickGrid. Proveedor de datos (y II) - El método getItemMetadata
SlickGrid. DataView (I) - Introducción y uso
SlickGrid. DataView (II). Ordenación simple y múltiple
SlickGrid. DataView (III) - Filtros de datos

El objeto DataView provee también soporte para paginación en cliente, es decir si, como en nuestro ejemplo, tenemos el conjunto de datos completo descargado en cliente.

Para gestionar la paginación el objeto DataView dispone de dos métodos

• getPagingInfo(): método que devuelve el estado actual de la paginación. Devuelve un objeto con cuatro propiedades:
• pageSize: número de filas por página
• pageNum: número de página actual. Es un índice basado en cero, es decir la primera página tiene un pageNum igual a cero.
• totalRows: número total de filas del grid, sumando las de todas las páginas.
• totalPages: número total de páginas. La última página se correspondería con un pageNum igual a totalPages menos uno.
• setPagingOptions(args): método que establece las opciones de paginación. Recibe un objeto que puede tener dos propiedades:
• pageSize: establece un nuevo tamaño de página (número de filas a mostrar por página). Si pageSize es cero todas las filas se muestran en una única página.
• pageNum: establece la página actual. Un valor de 0 desplaza el grid a la primera página, mientras que un valor de (getPagingInfo().totalPages - 1) desplazará el grid a la última página.

y un evento:

• onPagingInfoChanged: que se lanza cada vez que cambia el estado actual de paginación, ya sea porque se cambian las opciones o se cambia la página actual.

SlickGrid. DataView (III) - Filtros de datos

Artículos anteriores:

SlickGrid. Ejemplo básico (I) - Creando el primer grid

SlickGrid. Ejemplo básico (y II) - Añadiendo funcionalidad

SlickGrid. Dando formato a las celdas (I) - Formato básico

SlickGrid. Dando formato a las celdas (y II) - Formato avanzado
SlickGrid. Habilitando la edición (I) - La teoría
SlickGrid. Habilitando la edición (y II) - Creando los editores
SlickGrid. Carga asíncrona de celdas (I) - La propiedad asyncPostRender
SlickGrid. Carga asíncrona de celdas (y II) - Generando una caché de datos
SlickGrid. Proveedor de datos (I) - Creando un proveedor de datos
SlickGrid. Proveedor de datos (y II) - El método getItemMetadata
SlickGrid. DataView (I) - Introducción y uso
SlickGrid. DataView (II). Ordenación simple y múltiple

Para realizar el filtrado de datos el DataView proporciona dos métodos:

• setFilter(filterFunction): método que permite establecer la función de filtrado. La función pasada como parámetro es llamada para cada uno de los elementos del origen de datos y recibe a su vez dos parámetros:
  • item: con el elemento de datos a filtrar
  • args: con un objeto con los valores del filtro
  La función devuelve true si el elemento cumple las condiciones del filtro, en otro caso devuelve false.
• setFilterArgs(args): método que nos permite establecer un objeto con los valores a aplicar al filtro y que recibirá como parámetro la función definida mediante el método setFilter.

SlickGrid. DataView (II). Ordenación simple y múltiple

Artículos anteriores:

SlickGrid. Ejemplo básico (I) - Creando el primer grid

SlickGrid. Ejemplo básico (y II) - Añadiendo funcionalidad

SlickGrid. Dando formato a las celdas (I) - Formato básico

SlickGrid. Dando formato a las celdas (y II) - Formato avanzado
SlickGrid. Habilitando la edición (I) - La teoría
SlickGrid. Habilitando la edición (y II) - Creando los editores
SlickGrid. Carga asíncrona de celdas (I) - La propiedad asyncPostRender
SlickGrid. Carga asíncrona de celdas (y II) - Generando una caché de datos
SlickGrid. Proveedor de datos (I) - Creando un proveedor de datos
SlickGrid. Proveedor de datos (y II) - El método getItemMetadata
SlickGrid. DataView (I) - Introducción y uso

Para habilitar la ordenación con el DataView deberemos seguir estos dos sencillos pasos:

• Definir por qué columnas se va a poder ordenar el grid estableciendo la propiedad sortable de éstas a true en la definición de columnas.
• Suscribirse al evento sort del SlickGrid con una función que llame a la ordenación del DataView. La ordenación del DataView se genera invocando el método sort que recibe dos parámetros:
• comparer: una función comparadora que recibe como parámetros dos elementos de datos y devuelve 1 si el primero es mayor que el segundo o -1 en caso contrario
• sortAsc: valor booleano que indica si la ordenación es ascendente

El evento de ordenación onSort del SlickGrid devuelve un objeto args que contiene, si no está habilitada la ordenación por múltiples columnas, dos propiedades que definen la ordenación a realizar:

• sortCol: definición de la columna sobre la que se va a realizar la ordenación
• sortAsc: valor booleano que indica si la ordenación es en orden ascendente

SlickGrid. DataView (I) - Introducción y uso

Artículos anteriores:

SlickGrid. Ejemplo básico (I) - Creando el primer grid

SlickGrid. Ejemplo básico (y II) - Añadiendo funcionalidad

SlickGrid. Dando formato a las celdas (I) - Formato básico

SlickGrid. Dando formato a las celdas (y II) - Formato avanzado
SlickGrid. Habilitando la edición (I) - La teoría
SlickGrid. Habilitando la edición (y II) - Creando los editores
SlickGrid. Carga asíncrona de celdas (I) - La propiedad asyncPostRender
SlickGrid. Carga asíncrona de celdas (y II) - Generando una caché de datos
SlickGrid. Proveedor de datos (I) - Creando un proveedor de datos
SlickGrid. Proveedor de datos (y II) - El método getItemMetadata

Como comenté en el ejemplo sobre proveedores de datos, el paquete de descarga de SlickGrid incluye una implentación de un proveedor de datos con características muy útiles que no están implementadas en el SlickGrid por defecto, como pueden ser:

• Paginación
• Ordenación por múltiples columnas
• Búsquedas
• Filtros
• Agrupaciones de filas y totales
• Expandir y contraer grupos de filas

Esta implementación de proveedor de datos está encapsulada en el objeto DataView y se encuentra en el archivo slick.dataview.js del paquete de descarga de SlickGrid.

El DataView es un proveedor de datos que se ajusta a la mayoría de los escenarios que nos encontraremos en nuestros desarrollos y, para los casos en los que no se ajuste, puede servirnos como ejemplo o como base para nuestros propios proveedores de datos.

Vamos a ver cómo utilizar el proveedor DataView y sus características.

SlickGrid. Proveedor de datos (y II) - El método getItemMetadata

Artículos anteriores:

SlickGrid. Ejemplo básico (I) - Creando el primer grid

SlickGrid. Ejemplo básico (y II) - Añadiendo funcionalidad

SlickGrid. Dando formato a las celdas (I) - Formato básico

SlickGrid. Dando formato a las celdas (y II) - Formato avanzado
SlickGrid. Habilitando la edición (I) - La teoría
SlickGrid. Habilitando la edición (y II) - Creando los editores
SlickGrid. Carga asíncrona de celdas (I) - La propiedad asyncPostRender
SlickGrid. Carga asíncrona de celdas (y II) - Generando una caché de datos
SlickGrid. Proveedor de datos (I) - Creando un proveedor de datos

Tras haber creado nuestro proveedor de datos en este artículo vamos a ver cómo podemos proporcionar información adicional para particularizar la visualización y el comportamiento de cada elemento. Esta información adicional la proveeremos al grid a través del método getItemMetadata del proveedor de datos.

El método getItemMetadata devolverá un valor null si no es necesaria ninguna particularización sobre el elemento y un objeto con las propiedades a particularizar en caso de que sea necesaria.

SlickGrid. Proveedor de datos (I) - Creando un proveedor de datos

Artículos anteriores:

SlickGrid. Ejemplo básico (I) - Creando el primer grid

SlickGrid. Ejemplo básico (y II) - Añadiendo funcionalidad

SlickGrid. Dando formato a las celdas (I) - Formato básico

SlickGrid. Dando formato a las celdas (y II) - Formato avanzado
SlickGrid. Habilitando la edición (I) - La teoría
SlickGrid. Habilitando la edición (y II) - Creando los editores
SlickGrid. Carga asíncrona de celdas (I) - La propiedad asyncPostRender
SlickGrid. Carga asíncrona de celdas (y II) - Generando una caché de datos

El SlickGrid es muy flexible a la hora de consumir datos. Los datos se pasan al grid a través del constructor y éstos se pueden proporcionar en un array, como hemos visto hasta ahora, o en un objeto proveedor de datos que nos permita tener un control total sobre la forma en la que SlickGrid muestra la información.

El paquete de descarga de SlickGrid contiene una implementación de un proveedor de datos en el archivo slick.dataview.js. Este proveedor de datos, al que se puede acceder a través de SlickGrid.Data.DataView, implementa un importante número de funcionalidades y puede ajustarse a las necesidades de un gran número de escenarios que nos podamos encontrar en el desarrollo de nuestras aplicaciones. Además resulta un código de ejemplo muy valioso para los casos en que necesitamos definir nuestro propio proveedor.

Dado que el objetivo de este ejemplo es comprender cómo funcionan los proveedores de datos del SlickGrid no voy a utilizar esta implementación, si no que me crearé un proveedor de datos simple al que iré añadiendo funcionalidad para mostrar la potencia que nos puede dar este elemento.

CSS3. Degradados lineales

Degradados lineales

Los degradados en CSS3 permiten realizar transiciones suaves entre dos o más colores.

CSS3 define dos tipos de degradados:

• Degradados lineales (linear-gradient): definen una transición entre dos puntos
• Degradados radiales (radial-gradient): definen una transición a partir de un punto central

A lo largo de este artículo veremos las diferentes opciones que tenemos para definir degradados lineales.

SlickGrid. Carga asíncrona de celdas (y II) - Generando una caché de datos

Artículos anteriores:

SlickGrid. Ejemplo básico (I) - Creando el primer grid

SlickGrid. Ejemplo básico (y II) - Añadiendo funcionalidad

SlickGrid. Dando formato a las celdas (I) - Formato básico

SlickGrid. Dando formato a las celdas (y II) - Formato avanzado
SlickGrid. Habilitando la edición (I) - La teoría
SlickGrid. Habilitando la edición (y II) - Creando los editores
SlickGrid. Carga asíncrona de celdas (I) - La propiedad asyncPostRender

Tras ver cómo podemos recuperar la información a mostrar en las celdas de forma asíncrona vamos a ver cómo podemos generar una caché con los datos recuperados de forma que minimicemos las peticiones al servidor y mejoremos la experiencia del usuario al trabajar en nuestra página.

En este ejemplo no utilizo ninguna funcionalidad específica del SlickGrid por lo que se sale un poco del enfoque de tutorial que tienen estos ejemplos, pero me ha parecido interesante incluirlo porque considero que es una carencia del SlickGrid con la que tendrán que lidiar todos aquellos que se decidan a utilizar la carga asíncrona de datos.

Evidentemente la solución que voy a implementar no es la ideal para cualquier caso que se nos pueda presentar, en escenarios complejos seguramente el mejor acercamiento sea el de implementar nuestra propia carga de datos asíncrona obviando la funcionalidad que nos aporta el SlickGrid, sin embargo creo que puede ajustarse a las necesidades de gran número de escenarios sencillos (a parte de servir como ejemplo para otros más complejos).

SlickGrid. Carga asíncrona de celdas (I) - La propiedad asyncPostRender

Artículos anteriores:

SlickGrid. Ejemplo básico (I) - Creando el primer grid

SlickGrid. Ejemplo básico (y II) - Añadiendo funcionalidad

SlickGrid. Dando formato a las celdas (I) - Formato básico

SlickGrid. Dando formato a las celdas (y II) - Formato avanzado
SlickGrid. Habilitando la edición (I) - La teoría
SlickGrid. Habilitando la edición (y II) - Creando los editores

Ya hemos visto cómo dar formato y editar las celdas de los grids. Sin embargo hay una cuestión que todavía no hemos abordado: ¿qué sucede cuando la información que tenemos que mostrar en una celda la debemos recuperar del servidor?

En los ejemplos vistos hasta ahora teníamos un campo de denominación de subcategoría, la cual recuperábamos de un array en cliente. En una aplicación normal no podemos (o al menos no debemos por razones obvias de rendimiento) disponer de toda la información de nuestra base de datos en cliente, por lo que deberemos acceder al servidor para recuperarla.

Podríamos modificar la función de formateo de celda para que realice una llamada al servidor y devuelva la misma información, pero esto ralentizaría enormemente la visualización de los grids provocando que el navegador se bloquee hasta que termina de recuperar toda la información.

Por suerte el SlickGrid nos permite definir una función a través de la propiedad asyncPostRender de la columna que se encargue de obtener la información de la celda de forma asíncrona.

SlickGrid. Habilitando la edición (y II) - Creando los editores

Artículos anteriores:

SlickGrid. Ejemplo básico (I) - Creando el primer grid

SlickGrid. Ejemplo básico (y II) - Añadiendo funcionalidad

SlickGrid. Dando formato a las celdas (I) - Formato básico

SlickGrid. Dando formato a las celdas (y II) - Formato avanzado
SlickGrid. Habilitando la edición (I) - La teoría

En el último artículo explicaba las propiedades que debemos utilizar para habilitar la edición con SlickGrid y las características que debían cumplir los editores personalizados que creemos.

A continuación voy a poner en práctica toda esa teoría creando diferentes editores para el grid de ejemplo que hemos ido construyendo a lo largo de los diferentes artículos.

SlickGrid. Habilitando la edición (I) - La teoría

Artículos anteriores:

SlickGrid. Ejemplo básico (I) - Creando el primer grid

SlickGrid. Ejemplo básico (y II) - Añadiendo funcionalidad

SlickGrid. Dando formato a las celdas (I) - Formato básico

SlickGrid. Dando formato a las celdas (y II) - Formato avanzado

Tras haber creado un grid y haber dado formato a las celdas y cabeceras necesitamos ver cómo podemos editar el contenido de éste.

Para habilitar la edición del SlickGrid vamos a utilizar dos propiedades de las opciones de configuración del grid:

• editable: indica si el grid permite la edición del contenido. Por defecto está desactivado.
• autoEdit: indica si la celda entra en modo de edición automáticamente al recibir el foco. De no ser así, el modo de edición se activa al hacer doble click sobre la celda o al pulsar la tecla Enter. Por defecto está activado.

Para poder editar las celdas del grid, además de establecer éste como editable, debemos asignar a la columna que deseamos editar un Editor a través de la propiedad editor de la columna.

SlickGrid. Dando formato a las celdas (y II) - Formato avanzado

Artículos anteriores:
SlickGrid. Ejemplo básico (I) - Creando el primer grid
SlickGrid. Ejemplo básico (y II) - Añadiendo funcionalidad
SlickGrid. Dando formato a las celdas (I) - Formato básico

En el último artículo vimos cómo dar tamaño a las columnas y establecer un estilo personalizado tanto para las celdas de datos como las cabeceras a través de hojas de estilo.

Pero aún podemos ir más allá, en lugar de limitarnos a aplicar un estilo a la celda podemos definir el código html que representa el valor de la celda a través de una función de formateo asociada a la propiedad formatter de la columna. La función de formateo recibe cinco parámetros:

• row: índice de la fila (basado en cero)
• cell: índice de la columna (basado en cero)
• value: valor de la celda
• columnDef: objeto de definición de la columna
• dataContext: objeto de datos de la fila de la celda

JavaScript. Formatear números con un número determinado de decimales

Para convertir un número en una cadena con un número determinado de decimales podemos utilizar el método toFixed.

SlickGrid. Dando formato a las celdas (I) - Formato básico

Artículos anteriores:
SlickGrid. Ejemplo básico (I) - Creando el primer grid
SlickGrid. Ejemplo básico (y II) - Añadiendo funcionalidad

Tras ver cómo crear un grid con funcionalidad básica con SlickGrid vamos a ver cómo podemos aplicar diferentes formatos al grid.

El formato de las celdas lo estableceremos a través de diferentes propiedades de las columnas. Con unas definiremos el tamaño de las columnas, en concreto:

- width: establece el ancho de la columna en pixels
- minWidth: establece el ancho mínimo de la columna en pixels. Por defecto tiene un valor de 30.
- maxWidth: establece el ancho máximo que puede tomar la columna en pixels.
- resizable: establece si el usuario puede cambiar el ancho de la columna. Por defecto tiene un valor de false.

Otras nos servirán para aplicar un estilo a la celda:

- cssClass: establece un nombre de clase que se aplicará a todas las celdas de datos de la columna.
- headerCssClass: establece un nombre de clase que se aplicará a la celda de cabecera de la columna.

Finalmente mostraré cómo utilizar una propiedad que nos permite tener un control total sobre el formato de visualización de los datos:

- formatter: establece una función que se encargará de realizar el formateo de la celda, recibiendo el dato a formatear y devolviendo el código html que representa el dato.

SlickGrid. Ejemplo básico (y II) - Añadiendo funcionalidad

Artículos anteriores:
SlickGrid. Ejemplo básico (I) - Creando el primer grid

Tras haber creado nuestro primer Grid con SlickGrid en este artículo le añadiremos cierta funcionalidad.

Así podremos ver cómo podemos modificar datos del grid, gestionar eventos o establecer una ordenación básica.

SlickGrid. Ejemplo básico (I) - Creando el primer grid

SlickGrid es uno de los grid cliente de software libre más ampliamente utilizados (sino el que más después de que jqGrid haya pasado a ser de pago).
En este artículo mostraré un ejemplo básico del uso del SlickGrid a modo de introducción.

JavaScript. Función sleep

Una función que puede resultar muy útil en muchas ocasiones es una que bloquee el proceso actual durante un intervalo determinado de tiempo.

Así como otros lenguajes pueden implementar un método Sleep que realiza esta función, en JavaScript no tenemos nada parecido. Sí que podemos, a través de un timeout, especificar que un proceso determinado se ejecute al cabo de un intervalo de tiempo, pero esto no bloquea la ejecución del resto del código.

Aunque a primera vista pueda parecer que una función que no haga nada, salvo ralentizar la ejecución del código, no tiene mucha utilidad, resulta muy útil en fases de pruebas y depuración (por ejemplo para simular accesos a información de servidor, o para simular el comportamiento de nuestras páginas en dispositivos escasos de recursos).