Flex Hero: nuevos componentes para Desktop(I): Spark DataGrid

Uno de los componentes más esperados ha sido el Spark DataGrid. Es un componente complejo, bajo desarrollo y que en este post veremos sus particularidades más interesantes.

Introducción

Le diferencian dos características principales de su homólogo Halo:

• Una customización sencilla de la visualización, mediante un contrato muy rico en características en el ámbito de skinning que define Spark.
• Un mayor rendimiento, en cuanto a scrolling e interactividad.

La implementación de la funcionalidad del Spark DataGrid se divide en dos niveles: El primer nivel de funcionalidad se incluye en esta preview release de Hero; el segundo nivel vendrá en las siguientes releases.
Expliquemos en que se centra cada uno de estos niveles:

• Nivel 1: establece el nuevo contrato entre el componente y su skin para poder personalizar cada una de las subpartes del componente. Además, se permite un intercambio del dataprovider dinámicamente en filas de tamaño fijo o variables que se incluyen en el layout y hay comunicación entre los encabezados de las columnas y el área del grid. Dentro de este nivel también se incluye el soporte completo de selección. Se permite la selección de una o múltiples filas. Por último, este nivel añade la navegación mediante teclado y el ratón.
• Nivel 2: Está bajo desarrollo. Introducirá funcionalidades avanzadas sobre columnas como el redimensionamiento y el ordenado, así como la edición a nivel de celda, mejorar el contrato de skinning y conseguir un rendimiento mucho mejor.

Especificaciones

El Spark DataGrid quiere describir el mismo concepto que su predecesor: un componente que muestra una lista de datos y que los visualiza en una tabla o grid, es decir, divide el espacio de visualización en filas y columnas. Cada uno de estos datos forman una fila del componente.
A partir de ahora veremos las diferencias con el mx Datagrid.

Cada celda puede contener un elemento visual, desde un simple elemento gráfico, hasta formas más complejas.

El Spark DataGrid nos permite la selección individual o multiple de filas o celdas. También nos permite la edición de dichos elementos.

El Spark DataGrid soporta grandes cantidades de datos: podemos hacer smooth scrolling a través de miles de filas ( es decir miles de elementos de datos ) y miles de columnas. Aunque la altura de cada fila puede variar, inicialmente se muestra con la altura del typical data item.

El componente Spark DataGrid es skineable. Mediante el skin situaremos los elementos dentro del grid, personalizaremos tanto las cabeceras como el scroller y podremos configurar los elementos gráficos que mostrarán nuestros datos. Un aspecto importante es que la skin puede determinar un item renderer por defecto, que se usará para renderizar el contenido de cada celda, para las colmnas no especifica ninguno.

Las diferencias más notables entre el Spark DataGrid y su homólogo en la versión MX son estas:

• Spark DataGrid no extiende de la clase List. De esta manera permite una implementación más flexible y elimina las restricciones que imponen los components de tipo list.
• El DataGrid MX controlaba con las scrollbars la primera fila visible y el scroll siempre era con incrementos iguales al tamaño de las filas. El Spark DataGrid permite “smooth scrolling”, es decir, scroll a nivel de píxel. Al scrollear cambiamos el pixel que está mostrando el viewport del DataGrid.
• Todos los elementos del Spark DataGrid pueden ser definidos, declarativamente, en MXML, incluyendo los indicadores de las filas y los separadores tanto de filas como de columnas.Con el MX DataGrid requería extender el componente para cambiar estos elementos.
• Para simplificar la gestión de los custom mouse event handlers, Spark DataGrid dispatcha eventos de mouse que suceden sobre el grid, conocidos como GridEvents. Los GridEvents contienen información de la fila y de la columna afectadas y simplifica la gestión del evento de mouse.
• Las columnas del Spark DataGrid no soportan estilos directos como lo hace el MX DataGrid.
• La version actual del Spark DataGrid no soporta filas o columnas bloqueadas ni agrupación de cabeceras. Esto se añadirá en las versiones futuras.
• Spark DataGrid no incluye un soporte directo para errores de tipo ItemPendingError. Esto debe tratarse a parte con la clase ASycnListView que hace de wrapper.

Ejemplo de uso

Definición del componente

El componente Spark DataGrid es en realidad un contenedor con un propósito especial: definir el skin, mediante las skin parts, del grid y de la barra de la cabecera. Debemos tener claro que es el componente Grid quien muestra las filas y columnas, controla la selección y la edición. La Skin del Spark DataGrid se responsabiliza de organizar estos elementos y el Scroller.
En cuanto a estructura, Spark DataGrid es similar al Spark List: delega la responsabilidad de mostrar los elementos a un componente no skinneable como es el DataGroup. El Spark DataGrid maneja los eventos de teclado y mouse que suceden sobre el Grid y la barra de cabeceras de columnas.
El Spark DataGrid tiene como dataProvider un IList que contiene “data items” o “items”, son dos maneras de llamarlos. Cada aspecto de los ítems se representa en cada columna. La intersección de fila y columna define una celda, indexada mediante las propiedades rowIndex y columnIndex. Las columnas, además también definen el item renderer que se usará para la celda. Las columnas también se definen con un IList, donde cada columna debe ser una instancia de elementos visuales concretos relacionados con el Grid.
El DataGrid no se dibuja solo con los item renderers de las columnas, algunos elementos visuals se dibujan por separado. Esto es lo que lo diferencia del component List, en la que son sus item renderers los responsables de determinar todos los aspectos visuals. Para entenderlo mejor pongamos un ejemplo: cuando definimos el modo de seleccion del grid a nivel de filas, no es práctico que cada item renderer ( representación de la celda), intervenga en la representación visual de la fila. En este caso, esta representación se determina mediante las propiedades del DataGroup, como “selectionIndicator” o “caretIndicator”. El Grid crea, recicla y dibuja los IVisualElements como sea necesario.
A continuación vemos las diferentes partes que componen el Spark DataGrid:

Custom Item Renderers

El itemRenderer de una columna es un IVisualElement que implementa la interface IGridItemRenderer. Los Item renderers no requieren el uso del data binding par configurar sus elementos visuales. En lugar de esto, puede ser más eficiente sobreescribir el metodo prepare() de la clase GridItemRenderer, que se lanza después de configurar el ítem renderer y antes de que dibuje. Aquí tenemos un ejemplo:

El parámetro hasBeenRecycled del método prepare(), le informa de si el renderer acaba de ser creado o se está reutilizando. A veces es necesario hacer renderers que se usen una sola vez, asignando recycle=false.

Documentos de especificación

Las especificaciones del Spark DataGrid están divididas en diferentes secciones para que así sea más comprensible.Estas secciones

• Visual: Elementos visuales para el Grid y DataGrid. Este documento trata el Grid, DataGrid, GridColumn, GridItemRenderer, IGridItemRenderer entre otras clases e interfaces.
• Mouse Events: Este documento cubre el evento específico que lanza el componente, el evento GridEvent.
• Selection: Explica el modelo de selección que nos proporciona el componente. Nos expone las clases GridSelectionMode, GridCaretEvent y GridSelectionEvent.
• Geometry: Expone la API para tratar la geometría grid.
• DataGrid Skin:Nos explica como el skin del Spark DataGrid se responsabiliza de organizar el grid, la columnHeaderBar y el scroller.

Más información

videos en el Adobe TV

Spark DataGrid 1
Spark DataGrid 2

Especificaciones

Spark DataGrid
Accesibilidad del Spark DataGrid