Uso del componente TileList

El componente TileList consta de una lista formada por filas y columnas que obtienen datos de un proveedor de datos. Un elemento hace referencia a una unidad de datos almacenados en una celda de TileList. Dicho elemento, que se origina en el proveedor de datos, suele tener una propiedad label y una propiedad source. La propiedad label identifica el contenido que se mostrará en una celda y la propiedad source le proporciona un valor.

Se puede crear una instancia de Array, o bien recuperarla de un servidor. El componente TileList tiene métodos que establecen una conexión proxy con su proveedor de datos, por ejemplo, los métodos addItem() y removeItem() . Si no se proporciona ningún proveedor de datos externo a la lista, estos métodos crean automáticamente una instancia de proveedor de datos que se presenta mediante List.dataProvider .

Interacción del usuario con el componente TileList

Un componente TileList muestra cada celda con un objeto Sprite que implementa la interfaz ICellRenderer. Se puede especificar este elemento de representación con la propiedad cellRenderer de TileList. El elemento CellRenderer predeterminado del componente TileList es ImageCell, que muestra una imagen (clase, mapa de bits, instancia o URL) y una etiqueta opcional. La etiqueta es una línea única que siempre se alinea con la parte inferior de la celda. Sólo es posible desplazarse por TileList en una sola dirección.

Cuando una instancia de TileList está seleccionada, también se pueden utilizar las teclas siguientes para acceder a sus elementos:

Tecla

Descripción

Flecha arriba/flecha abajo

Permiten moverse arriba y abajo en una columna. Si la propiedad allowMultipleSelection es true , se pueden utilizar estas teclas combinadas con la tecla Mayús para seleccionar varias celdas.

Flecha izquierda/flecha derecha

Permiten moverse a la izquierda y a la derecha de una fila. Si la propiedad allowMultipleSelection es true , se pueden utilizar estas teclas combinadas con la tecla Mayús para seleccionar varias celdas.

Inicio

Selecciona la primera celda de un componente TileList. Si la propiedad allowMultipleSelection es true , al mantener presionada la tecla Mayús mientras se presiona Inicio se seleccionarán todas las celdas desde la selección actual hasta la primera celda.

Fin

Selecciona la última celda de un componente TileList. Si la propiedad allowMultipleSelection es true , al mantener presionada la tecla Mayús mientras se presiona Fin se seleccionarán todas las celdas desde la selección actual hasta la última celda.

Ctrl

Si la propiedad allowMultipleSelection se establece en true , permite seleccionar varias celdas, sin un orden específico.

Si se añade el componente TileList a una aplicación, se puede hacer accesible a un lector de pantalla añadiendo las líneas de código ActionScript siguientes: 

import fl.accessibility.TileListAccImpl; 
 
TileListAccImpl.enableAccessibility();

La accesibilidad de un componente sólo se activa una vez, sea cual sea su número de instancias. Para más información, consulte el Capítulo 18, "Creación de contenido accesible" de Uso de Flash .

Parámetros del componente TileList

Puede establecer los siguientes parámetros de edición para cada instancia del componente TileList en el inspector de propiedades o en el inspector de componentes: allowMultipleSelection , columnCount , columnWidth , dataProvider , direction , horizontalScrollLineSize , horizontalScrollPageSize , labels , rowCount , rowHeight , ScrollPolicy, verticalScrollLineSize y verticalScrollPageSize . Cada uno de estos parámetros tiene una propiedad de ActionScript del mismo nombre. Para información sobre la utilización del parámetro dataProvider, consulte Uso del parámetro dataProvider .

Se puede escribir código ActionScript para definir opciones adicionales de instancias de TileList mediante sus métodos, propiedades y eventos. Para obtener más información, consulte la clase TileList en la Referencia de ActionScript 3.0 para Flash Professional .

Creación de una aplicación con el componente TileList

En este ejemplo se utilizan componentes MovieClip para rellenar un componente TileList con un conjunto de colores.

  1. Cree un nuevo documento de Flash (ActionScript 3.0).

  2. Arrastre un componente TileList al escenario y asígnele el nombre de instancia aTl .

  3. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente: 

    import fl.data.DataProvider; 
import flash.display.DisplayObject; 
 
var aBoxes:Array = new Array(); 
var i:uint = 0; 
var colors:Array = new Array(0x00000, 0xFF0000, 0x0000CC, 0x00CC00, 0xFFFF00); 
var colorNames:Array = new Array("Midnight", "Cranberry", "Sky", "Forest", "July"); 
var dp:DataProvider = new DataProvider(); 
for(i=0; i < colors.length; i++) { 
    aBoxes[i] = new MovieClip(); 
    drawBox(aBoxes[i], colors[i]);    // draw box w next color in array 
    dp.addItem( {label:colorNames[i], source:aBoxes[i]} ); 
} 
aTl.dataProvider = dp; 
aTl.columnWidth = 110; 
aTl.rowHeight = 130; 
aTl.setSize(280,150); 
aTl.move(150, 150); 
aTl.setStyle("contentPadding", 5); 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(0, 0, 100, 100); 
            box.graphics.endFill();         
}

  4. Seleccione Control > Probar película para probar la aplicación.

Creación de un componente TileList con ActionScript

Este ejemplo crea dinámicamente una instancia de TileList y le añade instancias de los componentes ColorPicker, ComboBox, NumericStepper y CheckBox. Se crea una instancia de Array que contiene etiquetas y nombres del componente que se mostrará, y se asigna dicha instancia ( dp ) a la propiedad dataProvider de TileList. Se utilizan las propiedades columnWidth y rowHeight y el método setSize() para disponer el componente TileList, el método move() para colocarlo en el escenario, el estilo contentPadding para insertar un espacio entre los bordes de la instancia de TileList y su contenido, y el método sortItemsOn() para ordenar el contenido mediante sus etiquetas.

  1. Cree un nuevo documento de Flash (ActionScript 3.0).

  2. Arrastre los siguientes componentes del panel Componentes al panel Biblioteca: ColorPicker, ComboBox, NumericStepper, CheckBox y TileList.

  3. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente: 

    import fl.controls.CheckBox; 
import fl.controls.ColorPicker; 
import fl.controls.ComboBox; 
import fl.controls.NumericStepper; 
import fl.controls.TileList; 
import fl.data.DataProvider; 
 
var aCp:ColorPicker = new ColorPicker(); 
var aCb:ComboBox = new ComboBox(); 
var aNs:NumericStepper = new NumericStepper(); 
var aCh:CheckBox = new CheckBox(); 
var aTl:TileList = new TileList(); 
 
var dp:Array = [ 
{label:"ColorPicker", source:aCp}, 
{label:"ComboBox", source:aCb}, 
{label:"NumericStepper", source:aNs}, 
{label:"CheckBox", source:aCh}, 
]; 
aTl.dataProvider = new DataProvider(dp); 
aTl.columnWidth = 110; 
aTl.rowHeight = 100; 
aTl.setSize(280,130); 
aTl.move(150, 150); 
aTl.setStyle("contentPadding", 5); 
aTl.sortItemsOn("label"); 
addChild(aTl);

  4. Seleccione Control > Probar película para probar la aplicación.