Datagrid con un ItemRenderer Propio (Personalizado)

En esta oportunidad vamos a colocar un ItemRenderer personalizado dentro de un DataGrid y que sin embargo los datos se sigan pasando de manera automatica a través del dataSource y utilizando Binding.

El ItemRenderer que vamos a utilizar va a ser un componente flex creado completamente aparte y a nuestro gusto, y le vamos a pasar sus datos a renderizar a través de la propiedad Data que tienen todos los objetos que implementan la interfaz IDataRender.

Para empezar vamos a entender un poco sobre la interfaz IDataRenderer, cualquier objeto que la implemente contiene una propiedad llamada data, por donde recibe toda la información a renderizar (a pintar, graficar, como lo quieran llamar), la única informacion que un objeto de este tipo deberia recibir a través de otras propiedades seria la concerniente a su comportamiento.

En nuestro ejemplo la informacion a renderizar son dos datos:

• url: Contiene la direccion donde se encuentra alojada la fotografia del producto.
• nombre: El nombre del objeto.

El ItemRenderer por defecto en el DataGrid es el componente "Label", aunque a veces no nos damos cuenta. Si queremos cambiar el itemrenderer de una columna solo debemos setearle la propiedad "itemrenderer" igual a la dirección donde se encuentra nuestra clase (o componente), esta dirección debe incluir la ruta desde la raiz del proyecto. Una vez hecho esto el itemrenderer recibirá la información a través de la propiedad "data" de la que hablamos anteriormente.

Bueno basta de hablar tanto y vamos a empezar. Creamos el componente de flex que va a renderizar los datos:
Archivo pictureRender.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="112" height="126">
<mx:Script>
<![CDATA[

[Bindable]
public var nombre : String = "Ramon";
[Bindable]
public var url : String = "assets/1.jpg";

public override function set data(value:Object):void
{
nombre = value.data.nombre;
url = value.data.url;

super.data = value;
}
public override function get data():Object
{
return super.data;
}
 ]]>
</mx:Script>
<mx:Image x="10" y="10" width="89" height="89" source="{url}"/>
<mx:Label x="10" y="104" width="92" text="{nombre}"/>
</mx:Canvas>

El componente lo hemos creado a partir de la clase Canvas, como esta clase implementa la interfaz IDataRenderer, sobreescribi los metodos get y set de la propiedad data para aplicarle una logica especial a estos datos, ya que debemos extraer el campo "nombre" y "url" de este objeto para colocarlo en las respectivas variables del componente, estas variables deben ser declaradas como [Binding] en el momento de su definición, ya que de esta manera los datos que ellas contengan serán transferidos al objeto Image (en el caso de la url) y Label (en el caso del nombre) sin nosotros tener que ocuparnos de eso, es decir, en el momento en que cambie la variable url entonces cambiara el valor de la propiedad "source" del objeto Image. Para aprender un poco mas sobre el metatag [Binding] puede hacer click aqui.

Ahora procedemos a llenar el archivo de la aplicacion:
Archivo DatagridDataRender.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.core.IDataRenderer;
import mx.collections.ArrayCollection;

[Bindable]
public var renderData : ArrayCollection = new ArrayCollection( [
{url:'assets/1.png', nombre:'Monitor Daslex'},
{url:'assets/2.png', nombre:'Maletin Ladrix'}]);
 [Bindable]
public var datosDG : ArrayCollection = new ArrayCollection();
 public function init() : void
{
var obj1 : Object = new Object();
obj1.data = renderData.getItemAt(0);
obj1.descripcion = "Producto de buena calidad.";
 var obj2 : Object = new Object();
obj2.data = renderData.getItemAt(1);
obj2.descripcion = "Producto de mala calidad.";

datosDG.addItem(obj1);
datosDG.addItem(obj2);
}
 ]]>
</mx:Script>
<mx:DataGrid x="10" y="10" dataProvider="{datosDG}" rowHeight="130" width="373" rowCount="2">
<mx:columns>
<mx:DataGridColumn headerText="Producto" dataField="data" itemRenderer="pictureRender" />
<mx:DataGridColumn headerText="Descripcion" dataField="descripcion"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

Este archivo tiene dos partes fundamentales, en la primera seccion definimos dos ArrayCollection llamados "renderData" y "datosDG". El primero de ellos contiene los objetos "data" que se van a utilizar para enviar informacion a los ItemRenderer, el segundo de ellos va a ser sincronizado con la propiedad dataProvider del DataGrid (contendrá una lista donde cada item será equivalente a una fila en el datagrid.)

La función init, que se llama cuando se dispara el evento creationComplete de la aplicación, se encarga de llenar el ArrayCollection datosDG, especificamente crea objetos con dos variables principales "data" y "descripcion", estas variables deben ser colocadas como "dataFields" en las columnas del DataGrid para que el DataGrid haga la carga de datos automaticamente. Si se fijan, la pripiedad data es llenada con la información a renderizar por el ItemRederer.

Bueno ya hemos finalizado nuestra aplicación, cualquier duda me pueden escribir a mi correo aalejo@gmail.com, si todo los hicieron correctamente su aplicacion debería verse de la siguiente manera: