Color de celdas de un Datagrid determinado por el labelFunction

Hace poco creía que la única forma de darle color a una celda dentro de un datagrid era creando un itemrenderer que dibujara un rectángulo y a este ponerle un fondo, etc. y todo este proceso me parecía incómodo, pero en Flex 4 las cosas mejorar mucho, Flash Builder te da la facilidad de crear un itemrenderer al vuelo, pero sigue existiendo el problema de que la información para dicernir un color de otro debe estar quemada dentro del temrenderer o usando un singleton, y en el peor de los casos, haciendo referencia a la aplicación principal y por lo mismo inutilizando el renderer para ser utilizado eficazmente en otras aplicaciones.

Fue entonces cuando encontré una solución un poco artesanal, pero que funciona muy bien y no tiene un impacto grande en el rendimiento.

El código de la aplicación es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="0" minHeight="0"
height="400" width="600">

<fx:Script>
<![CDATA[

import mx.collections.ArrayCollection;
import renderers.DatagridCellColorByValue;

[Bindable] private var _lista:ArrayCollection = new ArrayCollection([
{tons:50},
{tons:120},
{tons:28},
{tons:87}]);

private function campo1label(item:Object,columna:DataGridColumn):String
{
return "0xFF4544"+item.tons;
}

private function campo2label(item:Object,columna:DataGridColumn):String
{
return "0xffff55"+item.tons;
}

private function campo3label(item:Object,columna:DataGridColumn):String
{
return "0x80ff8C"+item.tons;
}

]]>
</fx:Script>
<mx:DataGrid id="lista"
width="100%" height="100%"
dataProvider="{_lista}">
<mx:columns>

<mx:DataGridColumn headerText="campo1" itemRenderer="renderers.DatagridCellColorByValue" labelFunction="campo1label"/>
<mx:DataGridColumn headerText="campo2" itemRenderer="renderers.DatagridCellColorByValue" labelFunction="campo2label"/>
<mx:DataGridColumn headerText="campo3" itemRenderer="renderers.DatagridCellColorByValue" labelFunction="campo3label"/>
</mx:columns>
</mx:DataGrid>
</s:Application>

y el itemrenderer:

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true" creationComplete="updateCompleteHandler(event)"
updateComplete="updateCompleteHandler(event)">

<fx:Script>
<![CDATA[

import mx.events.FlexEvent;

[Bindable] private var _color:uint = 0x000000;
[Bindable] private var _texto:String = "";

protected function updateCompleteHandler(event:FlexEvent):void
{
_color = uint(dataGridListData.label.substr(0,8));
var maximo:int = dataGridListData.label.length - 8;
_texto = dataGridListData.label.substr(8,maximo);
}
]]>
</fx:Script>
<s:Label backgroundColor="{_color}" id="lblData" width="100%" height="100%" text="{_texto}"
verticalAlign="middle"/>
</s:MXDataGridItemRenderer>

Como podrán ver, simplemente utilizo un labelFunction para determinar el color de la celda y envío el color dentro del string, luego dentro del renderer uso un componente Label al que asigno el color y muestro el resto del texto.
Una solución muy sencilla y poco ortodoxa, pero que me permite tener el mismo itemrenderer para el datagrid y que la lógica para decidir el color sea independiente.

Si tienen una solución mejor, me encantaría que me la hicieran saber   ^_^

Advertisement