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   ^_^

Anuncios

, , ,

  1. #1 por Rafael Barradas el abril 10, 2012 - 3:12 am

    Este import de que es? es que no lo entiendo: import renderers.DatagridCellColorByValue;
    Saludos!!

    • #2 por Xyrer el abril 10, 2012 - 10:34 am

      DatagridCellColorByValue es el nombre del renderer que esta escrito abajo, “renderers” es el paquete

  2. #3 por elmerdeve el septiembre 4, 2012 - 3:28 pm

    Ante todo, gracias por este código… Es justo lo que estoy buscando… Ahora, tengo una consulta parecida a la que hicieron más arriba… No estoy pudiendo importar el renderer… Lo has guardado de alguna forma en particular?
    Saludos, Hernán!

    • #4 por Xyrer el septiembre 11, 2012 - 10:40 pm

      nada en especial, hay un package llamado renderers, dentro está la clase DatagridCellColorByValue que es el componente que está de segundo, puedo revisar tu codigo si quieres, lo compartes en algun link y puedo mirar si hay algun error o corregir y enviarlo de vuelta, pero en realidad es muy sencillo.

      • #5 por elmerdeve el septiembre 12, 2012 - 7:14 am

        Disculpá, no te respondí porque no encontraba el link de esta web… Quería avisarte que resolví ese inconveniente y el código me ha resultado a la perfección… Lo usé para colorear filas si un campo de la misma cumple determinada condición… Me salvaste después de haber pasado un gran tiempo dando vueltas con esto… Mil gracias!
        Saludos, Hernán!

  3. #6 por Adhara Web el junio 18, 2013 - 7:28 pm

    muy buen blog colega, un abrazo grande

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: