Trabajo con CellRenderer

CellRenderer es una clase que utilizan los componentes basados en List (por ejemplo, List, DataGrid, TileList y ComboBox) para manipular y mostrar contenido de celda personalizado para sus filas. Las celdas personalizadas pueden contener texto, un componente creado previamente (como un componente CheckBox) o cualquier clase de objeto de visualización que se cree. Para representar datos con una clase CellRenderer personalizada, se puede ampliar dicha clase o implementar la interfaz ICellRenderer para crear una clase CellRenderer propia.

Las clases List, DataGrid, TileList y ComboBox son subclases de la clase SelectableList. La clase SelectableList incluye un estilo cellRenderer . Este estilo define el objeto de visualización que el componente utiliza para representar celdas.

Se puede ajustar el formato de los estilos que utiliza CellRenderer llamando al método setRendererStyle() del objeto de List (consulte Formato de celdas ). O bien, se puede definir una clase personalizada para utilizar como CellRenderer (consulte Definición de una clase CellRenderer personalizada ).

Formato de celdas

La clase CellRenderer incluye un número de estilos que permiten controlar el formato de la celda.

Los estilos siguientes permiten definir los aspectos utilizados para los diferentes estados de la celda (desactivado, presionado, sobre y arriba):

  • disabledSkin y selectedDisabledSkin

  • downSkin y selectedDownSkin

  • overSkin y selectedOverSkin

  • upSkin y selectedUpSkin

    Se aplican los siguientes estilos al formato de texto:

  • disabledTextFormat

  • textFormat

  • textPadding

Se pueden establecer estos estilos llamando al método setRendererStyle() del objeto List, o bien al método setStyle() del objeto CellRenderer. Se pueden obtener estos estilos llamando al método getRendererStyle() del objeto List, o bien al método setStyle() del objeto CellRenderer. Asimismo, se puede acceder a un objeto que define todos los estilos del procesador (como las propiedades con nombre del objeto) mediante la propiedad rendererStyles del objeto List o el método getStyleDefinition() del objeto CellRenderer.

Se puede llamar al método clearRendererStyle() para restablecer el valor predeterminado de un estilo.

Para obtener o establecer la altura de las filas de la lista, utilice la propiedad rowHeight del objeto List.

Definición de una clase CellRenderer personalizada

Creación de una clase que amplíe la clase CellRenderer para definir la personalización de dicha clase

Por ejemplo, el código siguiente incluye dos clases. La clase ListSample crea una instancia de un componente List y utiliza la otra clase, CustomRenderer, para definir el procesador de celdas que se usará para el componente List. La clase CustomRenderer amplía la clase CellRenderer.

  1. Seleccione Archivo > Nuevo.

  2. En el cuadro de diálogo Nuevo documento que se muestra, seleccione Archivo de Flash (ActionScript 3.0) y, a continuación, haga clic en Aceptar.

  3. Seleccione Ventana > Componentes para mostrar el panel Componentes.

  4. En el panel Componentes, arrastre un componente List al escenario.

  5. Si Flash no muestra el inspector de propiedades, seleccione Ventana > Propiedades > Propiedades.

  6. Con el componente List seleccionado, establezca las propiedades en el inspector de propiedades:

    • Nombre de instancia: myList

    • An. (anchura) 200

    • Al. (altura) 300

    • X: 20

    • Y: 20

  7. Seleccione el fotograma 1 de la capa 1 en la línea de tiempo y elija Ventana > Acciones.

  8. Introduzca el script siguiente en el panel Acciones: 

    myList.setStyle("cellRenderer", CustomCellRenderer); 
myList.addItem({label:"Burger -- $5.95"}); 
myList.addItem({label:"Fries -- $1.95"});

  9. Seleccione Archivo > Guardar. Asigne un nombre al archivo y haga clic en el botón Aceptar.

  10. Seleccione Archivo > Nuevo.

  11. En el cuadro de diálogo Nuevo documento que se muestra, seleccione Archivo ActionScript y, a continuación, haga clic en Aceptar.

  12. En la ventana del script, introduzca el código siguiente para definir la clase CustomCellRenderer: 

    package { 
    import fl.controls.listClasses.CellRenderer; 
    import flash.text.TextFormat; 
    import flash.filters.BevelFilter; 
    public class CustomCellRenderer extends CellRenderer { 
        public function CustomCellRenderer() { 
            var format:TextFormat = new TextFormat("Verdana", 12); 
            setStyle("textFormat", format); 
            this.filters = [new BevelFilter()]; 
        } 
    } 
}

  13. Seleccione Archivo > Guardar. Asigne el nombre CustomCellRenderer.as al archivo, colóquelo en el mismo directorio que el archivo FLA y haga clic en el botón Aceptar.

  14. Seleccione Control > Probar película.

Uso de una clase que implemente la interfaz ICellRenderer para definir una clase CellRenderer personalizada

También se puede definir una clase CellRenderer con cualquier clase que herede la clase DisplayObject e implemente la interfaz ICellRenderer. Por ejemplo, el código siguiente define dos clases. La clase ListSample2 añade un objeto List a la lista de visualización y define su CellRenderer para utilizar la clase CustomRenderer. La clase CustomRenderer amplía la clase CheckBox (que a su vez amplía la clase DisplayObject) e implementa la interfaz ICellRenderer. Debe tenerse en cuenta que la clase CustomRenderer define los métodos getter y setter para las propiedades data y listData , definidas en la interfaz ICellRenderer. Los otros métodos y propiedades definidos en la interfaz ICellRenderer (la propiedad selected y el método setSize() ) ya están definidos en la clase CheckBox:

  1. Seleccione Archivo > Nuevo.

  2. En el cuadro de diálogo Nuevo documento que se muestra, seleccione Archivo de Flash (ActionScript 3.0) y, a continuación, haga clic en Aceptar.

  3. Seleccione Ventana > Componentes para mostrar el panel Componentes.

  4. En el panel Componentes, arrastre un componente List al escenario.

  5. Si Flash no muestra el inspector de propiedades, seleccione Ventana > Propiedades > Propiedades.

  6. Con el componente List seleccionado, establezca las propiedades en el inspector de propiedades:

    • Nombre de instancia: myList

    • An. (anchura) 100

    • Al. (altura) 300

    • X: 20

    • Y: 20

  7. Seleccione el fotograma 1 de la capa 1 en la línea de tiempo y elija Ventana > Acciones.

  8. Introduzca el script siguiente en el panel Acciones: 

    myList.setStyle("cellRenderer", CustomCellRenderer); 
myList.addItem({name:"Burger", price:"$5.95"}); 
myList.addItem({name:"Fries", price:"$1.95"});

  9. Seleccione Archivo > Guardar. Asigne un nombre al archivo y haga clic en el botón Aceptar.

  10. Seleccione Archivo > Nuevo.

  11. En el cuadro de diálogo Nuevo documento que se muestra, seleccione Archivo ActionScript y, a continuación, haga clic en Aceptar.

  12. En la ventana del script, introduzca el código siguiente para definir la clase CustomCellRenderer: 

    package 
{ 
    import fl.controls.CheckBox; 
    import fl.controls.listClasses.ICellRenderer; 
    import fl.controls.listClasses.ListData; 
    public class CustomCellRenderer extends CheckBox implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        public function CustomCellRenderer() { 
        } 
        public function set data(d:Object):void { 
            _data = d; 
            label = d.label; 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            _listData = ld; 
        } 
        public function get listData():ListData { 
            return _listData; 
        } 
    } 
}

  13. Seleccione Archivo > Guardar. Asigne el nombre CustomCellRenderer.as al archivo, colóquelo en el mismo directorio que el archivo FLA y haga clic en el botón Aceptar.

  14. Seleccione Control > Probar película.

Uso de un símbolo para definir una clase CellRenderer

Asimismo, se puede utilizar un símbolo en la biblioteca para definir una clase CellRenderer. El símbolo debe exportarse para ActionScript, y el nombre de clase del símbolo de la biblioteca debe tener un archivo de clase asociado que implemente la interfaz ICellRenderer o que amplíe la clase CellRenderer (o una de sus subclases).

En el ejemplo siguiente se define una clase CellRenderer personalizada con un símbolo de biblioteca.

  1. Seleccione Archivo > Nuevo.

  2. En el cuadro de diálogo Nuevo documento que se muestra, seleccione Archivo de Flash (ActionScript 3.0) y, a continuación, haga clic en Aceptar.

  3. Seleccione Ventana > Componentes para mostrar el panel Componentes.

  4. En el panel Componentes, arrastre un componente List al escenario.

  5. Si Flash no muestra el inspector de propiedades, seleccione Ventana > Propiedades > Propiedades.

  6. Con el componente List seleccionado, establezca las propiedades en el inspector de propiedades:

    • Nombre de instancia: myList

    • An. (anchura) 100

    • Al. (altura) 400

    • X: 20

    • Y: 20

  7. Haga clic en el panel Parámetros y, a continuación, haga doble clic en la fila dataProvider de la segunda columna.

  8. En el cuadro de diálogo Valores que se muestra, haga clic en el signo más dos veces para añadir dos elementos de datos (con etiquetas establecidas en label0 y label1) y después haga clic en el botón Aceptar.

  9. Con la herramienta Texto, dibuje un campo de texto en el escenario.

  10. Con el campo de texto seleccionado, establezca las propiedades en el inspector de propiedades:

    • Tipo de texto: texto dinámico

    • Nombre de instancia: textField

    • An. (anchura) 100

    • Tamaño de fuente: 24

    • X: 0

    • Y: 0

  11. Seleccione el campo de texto seleccionado y, a continuación, elija Modificar > Convertir en símbolo.

  12. En el cuadro de diálogo Convertir en símbolo, configure las siguientes opciones y, a continuación, haga clic en Aceptar.

    • Nombre: MyCellRenderer

    • Tipo: MovieClip

    • Exportar para ActionScript: Seleccionado

    • Exportar en primer fotograma: Seleccionado

    • Clase: MyCellRenderer

    • Clase base: flash.display.MovieClip

      Si Flash muestra una advertencia de clase ActionScript, haga clic en el botón Aceptar en el cuadro de advertencia.

  13. Elimine del escenario la instancia del nuevo símbolo de clip de película.

  14. Seleccione el fotograma 1 de la capa 1 en la línea de tiempo y elija Ventana > Acciones.

  15. Introduzca el script siguiente en el panel Acciones: 

    myList.setStyle("cellRenderer", MyCellRenderer);

  16. Seleccione Archivo > Guardar. Asigne un nombre al archivo y haga clic en el botón Aceptar.

  17. Seleccione Archivo > Nuevo.

  18. En el cuadro de diálogo Nuevo documento que se muestra, seleccione Archivo ActionScript y, a continuación, haga clic en Aceptar.

  19. En la ventana del script, introduzca el código siguiente para definir la clase MyCellRenderer: 

    package { 
    import flash.display.MovieClip; 
    import flash.filters.GlowFilter; 
    import flash.text.TextField; 
    import fl.controls.listClasses.ICellRenderer; 
    import fl.controls.listClasses.ListData; 
    import flash.utils.setInterval; 
    public class MyCellRenderer extends MovieClip implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        private var _selected:Boolean; 
        private var glowFilter:GlowFilter; 
        public function MyCellRenderer() { 
            glowFilter = new GlowFilter(0xFFFF00); 
            setInterval(toggleFilter, 200); 
        } 
        public function set data(d:Object):void { 
            _data = d; 
            textField.text = d.label; 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            _listData = ld; 
        } 
        public function get listData():ListData { 
            return _listData; 
        } 
        public function set selected(s:Boolean):void { 
            _selected = s; 
        } 
        public function get selected():Boolean { 
            return _selected; 
        } 
        public function setSize(width:Number, height:Number):void { 
        } 
        public function setStyle(style:String, value:Object):void { 
        } 
        public function setMouseState(state:String):void{ 
        } 
        private function toggleFilter():void { 
            if (textField.filters.length == 0) { 
                textField.filters = [glowFilter]; 
            } else { 
                textField.filters = []; 
            } 
        } 
    } 
}

  20. Seleccione Archivo > Guardar. Asigne el nombre MyCellRenderer.as al archivo, colóquelo en el mismo directorio que el archivo FLA y haga clic en el botón Aceptar.

  21. Seleccione Control > Probar película.

Propiedades de CellRenderer

La propiedad data es un objeto que contiene todas las propiedades que se establecen para CellRenderer. Por ejemplo, en la clase siguiente, que define una clase CellRenderer personalizada que amplía la clase Checkbox, tenga en cuenta que la función setter de la propiedad data pasa el valor de data.label a la propiedad label (heredada de la clase CheckBox): 

    public class CustomRenderer extends CheckBox implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        public function CustomRenderer() { 
        } 
        public function set data(d:Object):void { 
            _data = d; 
            label = d.label; 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            _listData = ld; 
        } 
        public function get listData():ListData { 
            return _listData; 
        } 
    } 
}

La propiedad selected define si una celda está seleccionada en la lista.

Aplicación de CellRenderer en una columna del objeto DataGrid

Un objeto DataGrid puede tener varias columnas y se pueden especificar distintos procesadores de celdas para cada columna. Todas las columnas de un objeto DataGrid se representan con un objeto DataGridColumn, y la clase DataGridColumn incluye una propiedad cellRenderer , para la que se puede definir la clase CellRenderer para la columna.

Definición de CellRenderer para una celda editable

La clase DataGridCellEditor define un procesador que se utiliza para celdas editables en un objeto DataGrid. Se convierte en el procesador de una celda cuando la propiedad editable del objeto DataGrid se establece en true y, a continuación, el usuario hace clic en la celda que se va a editar. Para definir una clase CellRenderer para la celda editable, establezca la propiedad itemEditor de cada elemento del conjunto columns del objeto DataGrid.

Uso de una imagen, un archivo SWF o un clip de película como CellRenderer

La clase ImageCell, subclase de CellRenderer, define un objeto que se utiliza para representar celdas en las que el contenido principal de la celda es una imagen, un archivo SWF o un clip de película. La clase ImageCell incluye los estilos siguientes para definir el aspecto de la celda:

  • imagePadding : relleno que separa el borde de la celda del borde de la imagen, expresado en píxeles.

  • selectedSkin : aspecto que se utiliza para indicar el estado seleccionado.

  • textOverlayAlpha : opacidad de la superposición detrás de la etiqueta de la celda.

  • textPadding : relleno que separa el borde de la celda del borde del texto, expresado en píxeles.

    La clase ImageCell es la clase CellRenderer predeterminada de la clase TileList.