Comunidad de diseño web y desarrollo en internet

Tutorial del componente Datagrid de Flash

DataGrid es un potente componente que nos permite crear un entramado de celdas. Estas celdas son altamente personalizables al poder modificar una gran cantidad de propiedades, pudiendo hacer que sean desde una simple rejilla de información, hasta una compleja aplicación donde poder modificar datos dentro de las celdas.

Para este tutorial utilizaremos el mismo XML que en el tutorial anterior, así que el código inicial de la carga del XML es practicamente igual:

import mx.controls.gridclasses.DataGridColumn;
//Cargamos el XML
calendario = new XML();
calendario.ignoreWhite = true;
calendario.onLoad = function(success) {
if (success) {
//Creamos los arrays donde iran los datos
largo = calendario.firstChild.childNodes.length;
tareas = new Array(largo);
dias = new Array(largo);
indice = new Array(largo);
//Llenar los arrays
for (i=0; i<largo; i++) {
tareas[i] = calendario.firstChild.childNodes[i].attributes.tarea;
dias[i] = calendario.firstChild.childNodes[i].attributes.fecha;
indice[i] = i;
}
llenarDataGrid();
} else {
trace("No se pudo cargar el XML");
}
};
calendario.load("DataGrid.xml");

Con respecto al tutorial anterior hemos cargado una librería de Flash MX que sirve para controlar las columnas del DataGrid y también hemos creado un array nuevo que se encargará de controlar el indice de los registros.

Nuestra función para llenar el DataGrid, también cambiará un poco, veámosla:

/************* FUNCIONES ****************/
function llenarDataGrid() {
//Atacheamos nuetro componente
attachMovie("DataGrid", "misCeldas", 1);
//Propiedades
misCeldas.setSize(350, 200);
misCeldas.editable = true;
misCeldas.headerHeight = 16;
misCeldas.resizableColumns = true;
misCeldas.selectable = true;
misCeldas.showHeaders = true;
misCeldas.sortableColumns = false;
//Le asignamos un proveedor de datos
losDatos = new Array();
misCeldas.dataProvider = losDatos;
//Metemos los datos en el ComboBox
for (i=0; i<tareas.length; i++) {
losDatos.addItem({Tarea:tareas[i], Fecha:dias[i], Indice:indice[i]});
}
//Propiedades de las columnas
misCeldas.getColumnAt(0).width = 200;
misCeldas.getColumnAt(1).width = 75;
misCeldas.getColumnAt(2).width = 50;
}

Para empezar vemos un montón de propiedades nuevas, en este cuadro las explicaremos todas:

Property

Description

DataGrid.columnCount

Número de colunas que se estan mostrando. Sólo lectura.

DataGrid.columnNames

Un array con los nombres de las columnas que se estan mostrando.

DataGrid.dataProvider

Proveedor de datos para nuestro DataGrid.

DataGrid.editable

Booleano que puede ser "true" o "false", y que nos indica si el contenido de la tabla puede ser modificada por el usuario

DataGrid.focusedCell

Define la celda que esta seleccionada por defecto.

DataGrid.headerHeight

Altura de los encabezamientos en píxeles.

DataGrid.hScrollPolicy

Nos indica cuando se muestra la variable siempre ("on"), nunca ("off") o cuando sea necesario ("auto").

DataGrid.resizableColumns

Un booleano que nos indica si se puede modificar el ancho de la columna o no. "True" se puede, "False" no.

DataGrid.selectable

Un booleano que nos indica si se puede seleccionar el contenido de las celdas o no. "True" se puede, "False" no.

DataGrid.showHeaders

Un booleano que nos muestra o no los encabezamientos de las columnas. "True" las muestra, "False" no.

DataGrid.sortableColumns

Un booleano que nos indica si se puede ordenar la columna o no. "True" se puede, "False" no.

Una vez configuradas las propiedades del DataGrid a nuestro gusto, procedemos a asignarle un dataProvider, y lo llenamos con los arrays de Tareas, Dias e Indice que hemos creado anteriormente. En el tutorial anterior hemos visto como con dataProvider podemos llenar un ComboBox, en este ejemplo aprenderemos a jugar con la API dataProvider, que nos permite añadir y eliminar registros facilmente, y en este caso solo utilizaremos los arrays para llenar nuestro DataGrid, luego todos los cambios los efectuaremos sobre el dataProvider.

Por último, le ponemos las propiedades a las columnas del DataGrid. Las columnas en este componente tienen unas propiedades únicas, que van separadas del componente DataGrid, esto es así, porque las columnas son una subclase de la clase DataGrid, y como tal, puede tener sus propias propiedades.

He aquí el listado con las propiedades de DataGridColumn:

Property

Description

cellRenderer

Identificador de un símbolo que será usado como una celda en la columna seleccionada. Todos los símbolos construidos para este caso se tendrán que hacer mediante la API CellRenderer.

columnName

Nombre de la columna. Parámetro de sólo lectura

DataGridColumn.editable

Boolean que puede ser "true" o "false", y que sirve para indicar si la columna se podrá modificar o no.

DataGridColumn.headerRenderer

Nombre de una clase para que muestre un encabezado en esta columna. Todas las clases construidas para este caso se tendrán que hacer mediante la API CellRenderer.

DataGridColumn.headerText

Texto para el encabezado de la columna seleccionada.

DataGridColumn.labelFunction

Función para determinar qué campo se mostrará.

DataGridColumn.resizable

Boolean que puede ser "true" o "false", y que sirve para indicar si la columna se podrá ensanchar o no.

DataGridColumn.sortable

Boolean que puede ser "true" o "false", y que sirve para indicar si la columna se podrá ordenar o no.

DataGridColumn.sortOnHeaderRelease

Boolean que puede ser "true" o "false", y que nos dirá si la columna ha sido ordenada por el usuario.

DataGridColumn.width

Ancho de la columna en píxeles.

Una vez hecho este código, veremos como nuestro DataGrid funciona perfectamente, y en el podemos editar, ordenar, etc... pero, aún se puede hacer mucho más.

Vamos a crear una aplicación sencilla en la cual podremos añadir y eliminar registros a nuestro DataGrid, y posteriormente ver un índice con los números de posición de cada tarea. Para ello vas a tener que usar tres componentes TextInput y cuatro componentes Button. Colócalos como se muestra en esta pantalla:

Yo estoy trabajando a un lienzo a 350x400, y el primer botón está a una altura de 225, a partir de ahí podéis colocaros como más os guste. Ahora ponerles estos nombres de instancia a los componentes de la escena, tal y como sigue:

Button Ver índice --> verIndice
Button Ocultar índice --> ocultarIndice
TextInput Escriba la tarea --> tarea_input
TextInput Escriba el día --> dia_input
Button Añadir --> agregarRegistro
TextInput Escriba el índice --> indice_input
Button Eliminar --> eliminarRegistro

Con esto tendríais que tener todos vuestros componentes nombrados para poder escribirles la programación. Al final de la función llenarDataGrid() pondremos los eventos de los botones.

//Eventos de los botones
verIndice.addEventListener("click", alClicar);
ocultarIndice.addEventListener("click", alClicar);
agregarRegistro.addEventListener("click", alClicar);
eliminarRegistro.addEventListener("click", alClicar);
Y debajo de la función crearemos el listener...
//Cuando pulsamos los botones
alClicar = new Object();
alClicar.click = function(evento){
//Agregamos una columna
if (evento.target == verIndice){
//Añadimos una columna
misCeldas.addColumn("Indice");
//Le ponemos un ancho a la nueva columna
misCeldas.getColumnAt(2).width = 50;
}
//Borramos una columna
else if (evento.target == ocultarIndice){
//Borramos una columna
misCeldas.removeColumnAt(2);
}
//Añadimos un registro a nuestro dataProvider y a los arrays que manejamos
else if (evento.target == agregarRegistro){
losDatos.addItem({ Tarea: tarea_input.text, Fecha: dia_input.text, Indice: losDatos.length });
}
//Eliminamos un registro
else if (evento.target == eliminarRegistro){
losDatos.removeItemAt(indice_input.text);
}
}

De esta forma, estamos aprovechando un unico listener para todos los botones, que es de lo que se trata, ahorrar código y funcionalidad. Cada vez que clicamos un botón se ejecuta este listener que comprueba cual es mediante los if-else, veamos botón a botón, que esta haciendo cada uno.

Botón verIndice: En este botón no estamos modificando el dataProvider, sólo el DataGrid para que nos muestre la columna con el índice, para ello usamos el addColumn("Indice"), que nos crea una columna con el texto Indice como encabezado de la columna. Luego le damos un ancho de 50 pixeles.

Botón ocultarIndice: Mucho más breve es este código en el cual con removeColumnAt(2), lo que hacemos es quitar la columna de la tercera posición (columna 0, columna 1, columna 2, ... columna N).

Botón agregarRegistro: Aquí ya empezamos a modificar el dataProvider. Estamos añadiendo a nuestro proveedor de datos, que se llama "losDatos" un nuevo registro, que será lo que hemos puesto en nuestros componentes TextInput para la Tarea y la Fecha, y como índice cogeremos la longitud de nuestro dataProvider.

Botón eliminarRegistro: Fácil, con removeItemAt(), podemos eliminar el registro que haya en una posición en concreto, en este caso, el número de registro que hayamos escrito en nuestro TextInput "indice_input".

Con esto ya podemos añadir y modificar registros sin ningún problema. En los tutoriales de nivel difícil veremos como usar DataGrid y bases de datos para modificar los registros on-line.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate