DataGrid headerRenderer

La segunda generación de componentes de Flash como todas sabemos son completamente personalizables, aunque hay veces que es un dolor de “muelas” hacerlo 😛

Particularmente el Datagrid tiene varias opciones, hoy hablare un poco de la costumizacion de los headers, utilizando el headerRenderer, para aquellos familiarizados con el datagrid sabrán que existe el cellRenderer, bueno pues esto es lo mismo solo que aplicado a los headers del datagrid, además de que su implementación es mas simple, ya que no tenemos que pelearmos con los Items, etc etc..

Bien, lo que haremos es que nuestro DataGrid en lugar de mostrar texto muestre una imagen y al hacer rollOver sobre ella que nos aparezca un toolTip descriptivo.

Lo primero es tener un DataGrid común y ponerle algunos datos. (Me saltare algunas explicaciones basicas. 🙂 )
[as]

/*::::::::::::::::::::::::::::::::::::::::::::::::*/
//Estilo Header
/*::::::::::::::::::::::::::::::::::::::::::::::::*/
var headerStyles = new CSSStyleDeclaration();
headerStyles.setStyle(“fontFamily”, “Verdana”);
headerStyles.setStyle(“fontSize”, 11);
headerStyles.setStyle(“color”, 0x000000);
IntanceName.setStyle(“headerStyle”, headerStyles);
IntanceName.setStyle(“headerColor”, 0xffffff);
/*::::::::::::::::::::::::::::::::::::::::::::::::*/
//Algunos toques de diseño.
/*::::::::::::::::::::::::::::::::::::::::::::::::*/
data.setStyle(“fontFamily”, “Verdana”);
data.setStyle(“fontSize”, 11);
data.setStyle(“color”, 0x000000);
data.setStyle(“vGridLines”, false);
data.setStyle(“alternatingRowColors”, [0xffffff, 0xf7f7f7]);
/*::::::::::::::::::::::::::::::::::::::::::::::::*/
//Metemos algunos Datos y ponemos tamaños a las celdas
/*::::::::::::::::::::::::::::::::::::::::::::::::*/
data.addColumn(“image1”);
data.addColumn(“Nombre”);
data.addColumn(“Otra”);
data.addColumn(“Una”);
data.addColumn(“image2”);
data.getColumnAt(0).width = 30;
data.getColumnAt(1).width = 100;
data.getColumnAt(2).width = 50;
data.getColumnAt(3).width = 100;
data.getColumnAt(4).width = 30;
var n = “un texto”;
var o = [];
for (i=0; i<15; i++) { var item_obj:Object = {image1:random(3)+1, name:n, Otra:i, Una:n+" "+i, image2:random(3)+1}; o.push(item_obj); } /*::::::::::::::::::::::::::::::::::::::::::::::::*/ //Poblamos el datagrid /*::::::::::::::::::::::::::::::::::::::::::::::::*/ data.dataProvider = o; [/as] Hasta aquí­ no hay sorpresas todo es conocido ¿Cierto? Esto nos mostrara el tí­pico datagrid. Bien, ahora, al igual que con los cellRenderer debemos indicar que columnas tendrán el headerRendered esto se hace así­: [as] data.getColumnAt(0).headerRenderer = "ImageHeader"; data.getColumnAt(4).headerRenderer = "ImageHeader"; [/as] En este caso la primera y la quinta columna llevaran imagen. Ahora falta hacer nuestro headerRenderer que es una clase aparte de nuestro SWF. Lo primero es hacer un Clip vació en el escenario, ponerle nombre de Linkage que será el mismo que asignamos al datagrid[as] data.getColumnAt(4).headerRenderer = "ImageHeader"; [/as] En este caso es: “ImageHeader” y asignarle al clip el path hacia la clase de nuestro headerRenderer

Ahora nuestra clase que es la mas importante.

[as]
import mx.core.UIComponent
class ImageHeader extends UIComponent
{
//Definimos los Clips que usaremos
private var icon_mc : MovieClip;
private var toolClip : MovieClip;
public function ImageHeader ()
{
}
public function createChildren (Void) : Void
{
}
/*
Con la funcion size acomodamos nuestras imagenes
Dependiendo del tamaño de la celda, esta funcion se ejecuta
cada vez que el usuario modifica el tamalo de la celda
*/
public function size (Void) : Void
{
icon_mc._x = (__width-icon_mc._width) / 2;
icon_mc._y = 0
}
/*
Esta es la funcion mas importante ya que es la que se encarga de colocar
la imagen es su lugar y crear los eventos.
A direfencia del CellRenderer aqui solo recibimos un parametro que es el
nombre del header con ello podemos poner direntes imagenes segun el header

icon_mc = createObject(“post”, “post”, 50)

El metodo createObject hace lo mismo que el metodo attachMovie. asi que no explicare que es lo que hace. =)

Verificamos el nombre del header y dependiendo de el attachamos una u otra imagen
al igual que con los eventos segun el nombre del header ejecutamos una u otra accion.

Simple, no? no le veo mayor ciencia
*/
public function setValue (str : String) : Void
{
switch(str){
case “image1”:
icon_mc = createObject(“post”, “post”, 50)
break
case “image2”:
icon_mc = createObject(“comment”, “comment”, 50)
break
}
icon_mc.onRollOver = function (){
switch(str){
case “image1”:
_parent.tooltip(“Este es la Primer Imagen“)
break
case “image2”:
_parent.tooltip(“Este es la Segunda Imagen“)
break
}
}
icon_mc.onRollOut = function (){
_parent.killTip();
}
size ();
}
/*Estas son las funciones para nuestro Tolltip*/
public function tooltip (msg : String)
{
toolClip.removeMovieClip ();
var tf = new TextFormat();
tf.font = “Verdana”
tf.size = 10;
toolClip = _root.createEmptyMovieClip(“tool_tip”, 99999);
toolClip.createTextField(“label_txt”, 0,0,0,0,10)
toolClip.label_txt.autoSize = true;
toolClip.label_txt.multiline = true
toolClip.label_txt.html = true
toolClip.label_txt.border = true
toolClip.label_txt.borderColor = “0x999999”
toolClip.label_txt.background = true;
toolClip.label_txt.backgroundColor = “0xCFF1FB”
toolClip.label_txt.htmlText = msg;
toolClip.label_txt.selectable = false
toolClip.label_txt.setTextFormat(tf)
toolClip._x = ( ( Stage.width-_root._xmouse ) < toolClip._width) ? (_root._xmouse-toolClip._width-10) : _root._xmouse+10 toolClip._y = _root._ymouse } public function killTip(){ toolClip.removeMovieClip(); } } [/as] Como queda nuestro DataGrid? asi....

[FLASH]http://tmeister.dev/wp-content/uploads/2006/05/ImageHeader.swf,350,320[/FLASH]

Por ultimo y no por ello menos importante aqui esta el Ejemplo con los Archivos.

Enjoy..