Tutorial básico de CellRenderer

Los componentes de Flash son una de las herramientas más poderosas que hay, un buen ejemplo es la API CellRenderer que nos permite colocar contenido personalizdo dentro de las celdas de los componentes basados en listas (List, DataGrid, Tree y Menu). Dentro de estas celdas podremos poner componentes, imagenes, clips de película que hayamos creado, textos en formato HTML y en definitiva todo aquello que se nos ocurra y pueda ser creado mediante una clase.

Antes de continuar con este tutorial recomiendo por lo tanto haber leido el tutorial del componente List, el cual es la superclase de DataGrid, Tree y Menu, lo cual ayudara mucho las cosas. De antemano ya aviso que no soy ningún maestro con CellRenderer y todo lo que he conseguido ha sido a base de pruebas y más pruebas, por lo que os quiero recordar que la experimentación en Flash (con o sin drogas) es lo mejor que podéis hacer.

1. Creando el archivo de Flash

En nuestro caso practico vamos a hacer un DataGrid que una de sus columnas tendrá una imagen cargada mediante loadMovie(). Así que buscad tres imágenes, ponedles tamaño 100x75 y guardarlas en una carpeta llamada "imagenes". Ahora empezaremos con el .fla, más adelante nos meteremos con la vinculación del archivo Flash y la clase que crearemos al final.

Abre Flash con un nuevo Flash Document y cambia el tamaño del lienzo a 400x175. Arrastra del panel Components un DataGrid al escenario, llamalo "mi_dg" y ponlo en la posicion 0,0 con un tamaño de 400x175, así nos ocupará todo el lienzo. Ahora ya no usaremos más esa capa, por lo que bloqueala y crea una capa nueva llamada "Acciones", pulsa F9 para abrir el editor de ActionScript y copia el siguiente código:

//Llenamos de datos el DataGrid
mi_dg.addItem({Imagen:"imagenes/aliens.jpg", Titulo:"Aliens: El Regreso", Director: "James Cameron", Nota: "9"});
mi_dg.addItem({Imagen:"imagenes/elbosque.jpg", Titulo:"El Bosque", Director: "M. Night Shyamalan", Nota: "2"});
mi_dg.addItem({Imagen:"imagenes/zatoichi.jpg", Titulo:"Zatoichi", Director: "Takeshi Kitano", Nota: "8"});


//Le ponemos un alto de celda igual a la imagen para que encajen bien
mi_dg.rowHeight = 75;
mi_dg.resizableColumns = false;
mi_dg.sortableColumns = false;

//Ponemos el ancho de las columnas
mi_dg.getColumnAt(0).width = 103;
mi_dg.getColumnAt(1).width = 120;
mi_dg.getColumnAt(2).width = 120;
mi_dg.getColumnAt(3).width = 57;

//Asignamos el CellRenderer a la columna 1
mi_dg.getColumnAt(0).cellRenderer = "EleImagen";

De todo este código lo realmente importante es la última línea, ahí hacemos la vinculación para que se sepa que columna 0 no utilizará una celda normal, sino, una celda renderizada por el clip de película "EleImagen".

¿Y cómo le decimos nosotros que "EleImagen" es realmente una clase?

Para ello debemos crear un clip de película en la biblioteca que se llame EleImagen, luego haced click derecho sobre el en la biblioteca y seleccionar Vinculación..., tenéis que poner los mismos parámetros que en esta imagen.

Es obvio que donde pone AS 2.0 Class estamos indicando que la clase EleImagen.as será la que modificará nuestra celda. Si quisiéseis poner más columnas con CellRenderer en vuestro DataGrid deberíais hacer más clips de película como este, siempre uno por clase.

Ahora ya podemos empezar con nuestra clase, guarda todo lo que has hecho en Flash.

2. Creando la clase

Para todos los que no estéis habituados a escribir clases en Flash me gustaría recomendaros el editor de ActionScript que uso normalmente, se trata del SEPY ActionScript Editor creado por Alessandro Crugnola.

Abrid SEPY (o en su defecto bloc de notas) y copiar el siguiente código:

class EleImagen extends mx.core.UIComponent{
	
	var imagen:MovieClip;
	var owner; //La fila que contiene esta celda
	var listOwner; //El datagrid que contiene esta celda
	
	//Constructor
	function EleImagen(){
		
	}
	
	function createChildren():Void{
		//Creamos un contenedor
		createEmptyMovieClip("imagen",1);
		imagen._y = 75/2 * -1;
	}
	
	function setValue(ruta:String, item:Object, seleccionado:String):Void{
		//Solo se carga la imagen si dan un valor correcto y no esta cargada previamente
		if(ruta.length > 1 && imagen._url.indexOf(ruta) == -1){
			imagen.loadMovie(ruta);
		}
		//Sin dan un valor vacio hay que quitar la imagen
		else if(ruta.length <= 1){
			imagen.unloadMovie();
		}
	}
}

Explicaré el código poco a poco.

Nada más empezar abrimos la clase diciendo que EleImagen extiende UIComponent, es decir, la clase que crea los componentes de Flash, así creamos EleImagen como una subclase de todos los componentes. Luego declaramos el clip de película "imagen" que lo usaremos como contenedor para albergar las imágenes cargadas mediante loadMovie, y también tenemos el constructor de la clase que en este caso está vacío.

Luego hay dos métodos muy importantes, y también dejar claro que a éstos no se les puede poner otro nombre, porque son métodos de CellRenderer que por decirlo de alguna manera, estamos modificando.

Con el método createChildren lo que hacemos es crear los contenedores e inicializar sus variables antes de que sean cargados y/o utilizados.

Luego con setValue recibimos tres valores:

• Ruta: En este caso sería la ruta de la imagen a cargar.
• Item: Nos da el objeto que contiene ruta.
• Seleccionado: Devuelve el estado de la celda actual, sus estados pueden ser Normal, Highlighted o Selected, pese a ser un Boolean.

Hay otros métodos y propiedades que en este ejemplo de CellRenderer no hemos visto, pero los enumeraré y luego cada uno que experimente con ellos si quiere, en la ayuda de Flash podéis ver ejemplos de uso, aunque algo básicos como siempre.

• CellRenderer.getPreferredHeight() - Devuelve la altura preferida de la celda
• CellRenderer.getPreferredWidth() -Devuelve el ancho preferido de la celda
• CellRenderer.setSize() -Establece un alto y ancho en la celda.
• CellRenderer.getDataLabel() -Devuelve un string que contiene el nombre del CellRenderer.
• CellRenderer.getCellIndex() -Devuelve un objeto con dos campos llamados columnIndex y rowIndex , que indican la posición de la celda.
• CellRenderer.listOwner - Devuelve una referencia de la lista que contiene esta celda.

En fin, esto es todo sobre CellRenderer, un mundo oscuro y extraño en el que pocos se meten, jejeje.

Destacar que parte del código del CellRenderer es cortesía de Joseba Alonso de 5dms, así que quería felicitarle una vez más por el impagable trabajo que hace.

Saludos!! ^^

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo