Para ilustrar el ejemplo, vamos a ver una captura del resultado final:
Como puede observarse, la columna Type (tipo) visualiza el tipo de lote (batch) mediante un simple gráfico: entrada (verde) o salida (rojo).
No voy a exponer cómo cargar los datos en el DataGrid, pues aquí, lo que nos ocupa es precisamente cómo cargar esas imágenes dependiendo del valor de la columna.
En este caso, sólo hay dos valores posibles, por lo que en la tabla de la base de datos sólo almacena en el campo "input_batch" los valores true o false, y para los mismos valores se han creado dos imágenes de 20x20, llamadas "true.png" y "false.png".
Por defecto, los DataGrids y las listas muestran la información en formato texto. Pero Flex/AIR puede permitir representar la información en formato gráfico. Para ellos existen lo que se denominan renderers (presentadores). Existen varios tipos de renderers, como cellRenderer o itemRenderer. Para nuestro ejemplo vamos a utilizar un itemRenderer de forma muy sencilla:
<mx:DataGrid id="dgBatches"
dataProvider="{batchesList}"
left="18" right="18" top="50" bottom="18">
<mx:columns>
<mx:DataGridColumn dataField="date" headerText="Date" width="80"/<
<mx:DataGridColumn dataField="id_batch" headerText="Batches"/>
<mx:DataGridColumn dataField="input_batch" headerText="Type" width="50">
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="100%" horizontalAlign="center">
<mx:Image source="/resources/batches/{data.input_batch}.png" />
</mx:HBox>
/mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
El punto clave está en la columna "input_batch", la cual recoge el tipo de lote (entrada (true) o salida (false). Esta columna contiene un elemento de tipo "itemRenderer", que es el encargado de presentar el valor de dicha celda. En su interior se crea un componente simple, compuesto únicamente por un HBox como contenedor, y como contenido tendrá una imagen que apuntará a la imagen a cargar. En este caso se encuetra en el directorio "/resources/batches/" y el nombre del archivo es el propio valor del campo (data.input_batch" con la extensión ".png".
Este mismo ejemplo podría servir para cargar imágenes ya predefinidas, en lugar de dos valores únicos de tipo true/false. También podrían residir en una URL concreta en lugar de en el disco duro.
Los renderers son muy flexibles y potentes, y permiten también introducir elementos de interfaz de usuario, como listas desplegables, campos numéricos, de texto, checkboxes, etc.
