Comunidad de diseño web y desarrollo en internet online

Tutorial de uso del componente DataSet de Flash MX 2004

El componente DataSet es un gran desconocido para la mayoría de la gente, e incluso algunos piensan que sólo se puede usar con lenguajes de servidor tipo ASP o PHP, craso error. DataSet se puede usar para albergar datos que vengan de XML, para luego meterlos en un DataGrid y realizar operaciones con ellos, en este caso, filtrar y ordenar.

Preparando la escena

Antes que nada vamos a preparar la escena y el archivo XML, luego pasaremos a la programación, que si bien es corta, puede ser algo densa. Crea dos capas una llamada Objetos y otra Acciones, sitúate en la capa Objetos y coloca un componente DataGrid, un DataSet y un Button, mira el cuadro para colocar las propiedades correctas.






Componente
Nombre de instancia
_x
_y
Ancho
Alto
Parametros
Escenario --- --- --- 360 285 ---
DataGrid procesos_grid 0 0 360 230 false, false, 20
DataSet datos 370 0 --- --- ---, true, true
Button filtrar_btn 5 258 100 22 ---, Filtrar, right, false, true

Coloca también un campo de texto Input que se llame "maxMem_txt" en la posición x:288 e y:265. Al lado pon un campo de texto estático que ponga "Mostrar los procesos que ocupan una memoria superior a:", posicionalo en x:5 e y:265. El resultado debe ser similar a esto:

Ahora ya puedes bloquear la capa Objetos, no la vamos a volver a usar más, colócate en la capa acciones y abre el editor de ActionScript pulsando F9.

Antes de continuar descarga el archivo XML aquí

Declaración de variables

Antes de cargar el XML hay que importar clases, definir estilos y declarar variables, vamos a ponernos con ello. Primero de todo esto:

//Importamos las clases para el Iterator y los Estilos
import mx.data.components.datasetclasses.DataSetIterator;
import mx.styles.CSSStyleDeclaration;
Con los import podemos usar clases que de por sí no vienen con los componentes pero que son útiles. Con DataSetIterator podemos hacer ordenaciones en nuestros DataSet, y con CSSStyleDeclaration creamos estilos CSS para nuestros componentes, en este caso, lo usaremos simplemente para alinear al centro los textos de la cabecera del DataGrid. Si no queréis que esté centrado no pongáis este código:
//Estilo de la cabecera del grid
var headerStyles = new CSSStyleDeclaration();
headerStyles.setStyle("textAlign", "center");
procesos_grid.setStyle("headerStyle", headerStyles);
procesos_grid.setStyle("themeColor", "haloBlue");
Por último, una vez importadas las clases y definidos estilos, sólamente nos queda declarar variables.
//Declaramos variables
var ordenarHacia:String = new String("asc");
var ordenarPor:String = new String();
var miXML:XML = new XML();
var datosProcesos:Array = new Array();
var alOrdenar:Object = new Object();
var alClicar:Object = new Object();

La variable ordenarHacia tiene un valor inicial de "asc", porque la primera dirección en la que se ordena es ascendente, es decir, de 9 (abajo) a 0 (arriba).

Cargando el XML y llenando nuestro DataSet

Ahora cargaremos el XML que alimentará el DataSet y el DataGrid, una vez hecho esto cambiaremos unas propiedades de las columnas como el tamaño por ejemplo, para que adquiera una mejor forma

//Cargamos el XML
miXML.ignoreWhite = true;
miXML.onLoad = function(success){
//Cargamos y llenamos el array
if (success){
for (i=0; i<miXML.firstChild.childNodes.length; i+=3){
datosProcesos.addItem({Proceso: miXML.firstChild.childNodes[i].firstChild,
//Utilizamos parseInt() para convertir los textos a número
ID: parseInt(miXML.firstChild.childNodes[i+1].firstChild),
Memoria: parseInt(miXML.firstChild.childNodes[i+2].firstChild)});
}
//Asignamos al DataSet y al DataGrid
datos.items = datosProcesos;
datos.filtered = false;
procesos_grid.dataProvider = datos.dataProvider;

//Propiedades del DataGrid
procesos_grid.resizableColumns = false;
procesos_grid.getColumnAt(0).width = 215;
procesos_grid.getColumnAt(1).width = 45;
procesos_grid.getColumnAt(2).width = 100;
procesos_grid.getColumnAt(0).setStyle("textAlign", "left");
procesos_grid.getColumnAt(1).setStyle("textAlign", "right");
procesos_grid.getColumnAt(2).setStyle("textAlign", "right");
//Deshabilitamos ordenación de las columnas, pero no las columnas
for (i=0; i<3; i++){
procesos_grid.getColumnAt(i).sortOnHeaderRelease = false;
}
}
}
miXML.load("procesos.xml");

Explicaré un poco el código. Al empezar creamos un for que va sumando de tres en tres, ya que los datos van en tres columnas, y en el XML viene todo seguido, se podría agrupar mejor la información en el XML pero para que veáis el ejemplo ya está bien (este es reutilizado :P). Una cosa a remarcar es que usamos parseInt() a la hora de meter la información, esto es para que lo que cogemos del XML sean números y no textos que son números (1234 != "1234"). El DataGrid respecto a esto no nota la diferencia, pero sí el DataSet que identifica diferentes tipos de datos, cosa que nos será de gran ayuda a la hora de hacer las ordenaciones y los filtros.

Bien, una vez hemos llenado nuestro array datosProcesos, lo asignamos al DataSet, y el DataSet lo asignamos al dataProvider del componente procesos_grid. También ponemos la propiedad filtered en false, ya veréis más adelante para que sirve, y así, sólo nos faltan las propiedades de las columnas.

En las propiedades cambiamos que no se pueda modificar el tamaño de las columnas, luego le ponemos un tamaño fijo para que quede todo bien, alineamos si es texto a la izquierda y si són números a la derecha, se hace más legible y por último, y sobretodo MUY importante, deshabilitamos la ordenación de las columnas, así, podremos hacer nuestra propia ordenación basada en el DataSet y no la del DataGrid.

Ahora prueba esto y verás que bonito te ha quedado ;)

Si no te gusta, pues no pasa nada...

Ordenando con DataSet

Como antes hemos desactivado la ordenación al clicar en los encabezados, ahora podremos nosotros crear nuestra propia forma de ordenar al clicar en ellos. Para ordenar con DataSet usaremos los métodos getIterator() para recoger la ordenación actual en el DataSet, y setIterator(), para aplicar el nuevo orden. Veamos el código:

// ORDENAMOS
alOrdenar.headerRelease = function(objeto){
//Creamos la ordenación
miOrdenacion = datos.getIterator();
//Cogemos el nombre de la columna
ordenarPor = objeto.target.getColumnAt(objeto.columnIndex).columnName;

if (ordenarHacia == "asc"){
miOrdenacion.sortOn([ordenarPor], 1);
ordenarHacia = "des";
}
else if (ordenarHacia == "des"){
miOrdenacion.sortOn([ordenarPor], 2);
ordenarHacia = "asc";
}
//Aplicamos el nuevo orden
datos.setIterator(miOrdenacion);
}
procesos_grid.addEventListener("headerRelease", alOrdenar);

En este caso hay que comentar un par de cosas, una cuando recogemos el valor para la variable "ordenarPor". Si os fijáis, lo bueno de este método es que ordenaremos según en la columna en la que cliquemos. Luego con el método sortOn() ordenamos.

Este método recoge dos valores, uno entre corchetes que es la columna por la que se ordenará, y otro un valor numérico que será 1 (ascendente) o 2 (descendente). Una vez hemos ordenado, sólo tenemos que ejecutar el método setIterator() y aplicaremos el nuevo orden.

Filtrando con DataSet

Para filtrar también usaremos cosas nuevas, la propiedad filtered y la función filterFunc, propias del componente DataSet. Filtered es un booleano que se utiliza para saber si el DataSet está filtrado o no, y filterFunc es la función que filtra, ya veréis que es muy sencilla de utilizar (aunque en la ayuda de Flash no lo especifican muy bien )

// FILTRAMOS
alClicar.click = function(){
//Si no hay filtro lo ponemos y cambiamos el texto en el botón
if (datos.filtered == false){
datos.filtered = true;
datos.filterFunc();
filtrar_btn.label = "Quitar Filtro";
}
//Si hay filtro lo quitamos y cambiamos el texto en el botón
else if (datos.filtered == true){
datos.filtered = false;
filtrar_btn.label = "Filtrar";
}

//Función filterFunc de Flash
datos.filterFunc = function(registro:Object) {
return(registro.Memoria >= maxMem_txt.text);
}
}
filtrar_btn.addEventListener("click", alClicar);

Lo más importante de todo esto es el código de la función filterFunc(), en ella hacemos un simple return(registro.Memoria >= maxMem_txt.text); y aunque parezca mentira, con esto se hace automáticamente el filtro. El DataSet utiliza esta función para filtrar, y nosotros dentro del return() sólamente debemos poner el tipo de filtro que queremos.

Para ello hacemos una simple igualdad, como si fuese un if-else, de la misma forma podemos añadir más condicionales, y dejar el return así.

return(registro.Memoria >= maxMem_txt.text && registro.ID >= 1000 ); //Fácil, ¿no?

Así, nosotros podremos filtrar según lo que pongamos en la caja de texto input maxMem_txt, este es un filtro sencillo, luego es cuestión de complicarse. Para quitar el filtro poniendo un simple datos.filtered = false; ya lo tenemos.

Y ya está, ya tenéis vuestro DataGrid con una correcta ordenación y además con filtros

¿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