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..
Interesante, no conocá el headerRenderer. Pero la verdad no encontraba algo funcional en que utilizarlo. (Es algo nuevo para mí :P), pensando en un posible uso, se me ocurrio esto, un filtro en el header:
ver ejemplo
Basicamente filtra la columna, con el text que el usuario introduzca.
Algo del tipo:
“SELECT * FROM ds WHERE Blog LIKE ‘%”+userInput+”%'”
saludos
Que bien esta el ejemplo..
Felicidades. ! 😀
Dano, yo estoy igual que tu al principio, no que utilidad darle en mi web.
http://www.cateringrabanal.com
Hola Gente,
Estoy desarrollando una aplicación en Flash CS4 con AS 2.0 (el AS 3.0 no me gusta mucho) utlizando el componente DataGrid y tengo un pequeña duda:
Cómo puedo hacer para que al hacer clic en una celda se almacene el texto que contenga la misma en una variable??
Ya se cómo agregar datos pero lo que no sé es como extraerlos… AYUDA PLEASEE 😛 Gracias.
Cualquier cosa mi correo es jorgealberto.valbuena@gmail.com para que me contacten si tienen respuesta. Saludos.