Código Metrópoli

Programación para Super Héroes

Componente DataGrid

El componente DataGrid nos permite listar información dentro de un control formado por renglones y columnas. Tiene la propiedad de añadir un scrollbar horizontal o vertical en caso de que la información no se muestre completamente dentro de las dimensiones establecidas del DataGrid. Este componente es ideal para mostrar objetos que tienen varias propiedades, por ejemplo un arreglo que contiene la información obtenida de un query o consulta a una base de datos.

Este control tiene las siguientes propiedades:

• Columnas con diferente o igual tamaño
• Columnas cuyo tamaño el usuario puede agrandar o disminuir en tiempo de ejecución
• Columnas que el usuario puede reordenar en tiempo de ejecución
• Las cabeceras de las columnas pueden ser personalizables
• Usar un "Item Renderer"específico para mostrar datos, que no sean texto, dentro de cualquier columna. Por ejemplo, podemos crear un Item Rendender para mostrar botones, combobox, botones de radio, iconos, etc. dentro de una columna.
• Ordenar la información mostrada en el DataGrid de acuerdo al criterio de alguna columna en específico.

Si deseas conocer todos los métodos y propiedades que conforman la clase DataGrid, ingresa a la siguiente página y de lado inferior izquierdo, dentro de la lista "All Classes" busca la clase DataGrid. Esta clase pertenece al paquete mx.controls, por lo que también podrías llegar a la información de la clase DataGrid haciendo click en la parte superior izquierda (Packages) en donde dice mx.controls.

Tutorial

Abre el programa Flex Builder 3 y crea un nuevo proyecto (Flex Project) con el nombre DataGridControl. No olvides seleccionar la opción "Web application" como tipo de aplicación (Application type).
En el panel Components, dentro de la sección Controls, busca el control DataGrid y arrástralo al área de trabajo. Selecciona el DataGrid que tienes en el área de trabajo y dentro del panel Properties asígnale el ID de productos_dg.

Haz click en el botón Source para cambiarte de la vista de diseño a la vista de código. Observarás que el programa creó automáticamente el código del DataGrid; este código es similar a:

Como podrás darte cuenta, este DataGrid recién creado está formado por tres columnas (cada DataGridColumn que se encuentra dentro de los tags mx:columns). El encabezado por default de estas columnas es Column 1, Column 2 y Column 3. Agrega una nueva columna y cambiales el nombre por Producto, Precio Unitario, Cantidad y Total. El código quedará de la siguiente forma:

En el código anterior podrás ver que también le cambié el valor de la propiedad dataField a cada columna.
La propiedad dataField es el nombre del campo o propiedad a la que hace referencia en el arreglo o colección que contiene la información que llenará el DataGrid. A este arreglo o colección de datos se le conoce como Data Provider (proveedor de datos o de información).

Existen varias formas de llenar de información el dataProvider. La forma más sencilla y menos dinámica es usando el siguiente código:

El código anterior deberás colocarlo dentro de los tags <mx:DataGrid>  y </mx:DataGrid>, ya sea antes del código de las columnas o bien después.

Si corres la aplicación verás la información en el DataGrid similar a la siguiente imagen:

De la imagen anterior, podemos ver que automáticamente el ancho de las columnas del DataGrid es el mismo para las cuatro columnas. Para las columnas de Precio y Año es mucho desperdicio de espacio ya que la información de estas columnas es poca. Cambia el código por lo siguiente para ajustar las columnas:

Después de realizar los cambios anteriores, la aplicación se verá igual a la siguiente imagen:

Los títulos de los DVDs y los protagonistas se pueden leer mejor, sin embargo la información no se muestra completa. Si le das click en el borde derecho de cada columna (dentro del área del encabezado) podrás ajustar el ancho de las columnas.

Si haces click sobre el título de la columna Título DVD verás que la información es ordenada alfabéticamente de forma ascendente de acuerdo a los títulos DVD. Si vuelves a hacer click sobre el título de la misma columna la información se mostrará en orden alfabético descendente. Si queremos evitar que una columna se pueda ordenar (en ocasiones esto es necesario cuando usamos ítem renderers en la columna), agrégale la propiedad sortable con el valor de false:

Ahora haz click sobre la columna Precio y, sin soltarlo, arrastra la columna y ponla en medio de la columna Título DVD y Protagonistas. Las columnas, por default, tienen la opción draggable activada, para desactivarlo agrega esta propiedad con el valor de false:

 

Otra forma de pasarle la información al DataGrid es creando un arreglo y llenándolo con la información que contendrá el DataGrid. Arrastra otro control DataGrid al área de trabajo y ponle de ID productos2_dg. A este nuevo DataGrid ponle la misma cantidad de columnas y propiedades. El código de este DataGrid quedaría:

Para crear y llenar el arreglo, añade el siguiente código a tu aplicación:

A pesar de que en este ejemplo estamos poniendo la información directamente en el código y no lo estamos obteniendo dinámicamente, te puedes dar cuenta que de esta segunda forma podemos obtener la información dinámicamente metiendo el código de push dentro de un ciclo for que recorra los registros regresados por un query.

Este post es para explicar a grandes rasgos la finalidad y funcionalidad de un DataGrid. Este post nos servirá como entrada a una serie de tutoriales que pondré en unos días sobre cómo crear, almacenar y eliminar registro de una base SQLite con AIR. Dentro de estos tutoriales usaremos DataGrids para mostrar la información obtenida de la base de datos.

 

Evento ListEvent.CHANGE

Este evento es uno de los más importantes cuando se está trabajando con DataGrids. Este evento es disparado cuando un usuario selecciona alguno de los registros del DataGrid. Para ejemplificar su uso, mostraremos la imagen del DVD que el usuario seleccionó (sí, para eso le agregamos al arreglo data_provider el nombre de la imagen de cada DVD).
Después de la línea productos2_dg.dataProvider = data_provider; agrega las siguientes líneas:

En la línea anterior de código le estamos diciendo al programa que cada vez que el evento CHANGE se ejecute, llame a la función muestraImagen.
Al finalizar la función llenaDataGrid, crea la función muestraImagen con el siguiente código:

En este código estamos recibiendo como parámetro un evento de tipo ListEvent. Este parámetro nos permite saber sobre qué registro del DataGrid el usuario hizo click (event.target.selectedItem). Además, estamos obteniendo la propiedad imagen (que nosotros establecimos en el dataProvider) de ese registro (event.target.selectedItem.imagen). Recuerda, que además de la propiedad imagen puedes obtener la propiedad event.target.selectedItem.titulo, event.target.selectedItem.precio, event.target.selectedItem.fecha, etc. Genial ¿no? De esta forma podríamos pasarle a cada registro su ID en la base de datos para cuando queramos modificarlo o eliminarlo.
Ya que tenemos la propiedad imagen, se lo pasamos a la propiedad source de image_dvd. Pero… ¿qué es imagen_dvd? imagen_dvd es un componente de tipo Image el cual nos permite cargar y mostrar imágenes en él. Este componente, al igual que el DataGrid,  se encuentra de la sección Control.

A continuación te muestro el código de este control. Antes de cerrar el tag Application (</mx:Application) inserta el siguiente código:

Por último nos queda llamar a la función llenaDataGrid, esta función la llamaremos cuando el segundo DataGrid se haya creado. Para eso usaremos la propiedad creationComplete:

¡Listo! Con las líneas que acabamos de crear estamos insertando un control Image para desplegar los JPGs de cada DVD.

¿Te perdiste? No te preocupes, aquí va el código completo de la aplicación.

Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.

Creado con Wordpress | Tema WP Remix traducido por Fernando.
Copyright © 2008. Código Metrópoli. México, D.F.

 Esta obra está bajo una licencia de Creative Commons