Uso del componente List

El componente List es un cuadro de lista desplazable de selección única o múltiple. Una lista también puede mostrar gráficos, incluidos otros componentes. Los elementos que se visualizan en la lista se añaden con el cuadro de diálogo Valores que aparece al hacer clic en los campos de parámetros data o labels. Para añadir elementos a la lista también pueden utilizarse los métodos List.addItem() y List.addItemAt() .

El componente List utiliza un índice basado en cero, en el que el elemento con el índice 0 aparece en primer lugar. Si añade, elimina o reemplaza elementos de lista mediante los métodos y propiedades de la clase List, es posible que tenga que especificar el índice del elemento de lista.

Interacción del usuario con el componente List

Se puede configurar una lista para que los usuarios efectúen selecciones únicas o múltiples. Por ejemplo, un usuario visita un sitio web de comercio electrónico y debe elegir el artículo que va a comprar. Hay 30 artículos en una lista que el usuario recorre y hace clic en el que desea seleccionar.

También se puede diseñar un componente List que utilice clips de película personalizados como filas para poder mostrar más información al usuario. Por ejemplo, en una aplicación de correo electrónico, cada buzón podría ser un componente List y cada fila podría tener iconos para indicar la prioridad y el estado.

El componente List se selecciona al hacer clic o desplazarse a él mediante el tabulador; a continuación, se pueden utilizar las teclas siguientes para controlarlo:

Tecla

Descripción

Teclas alfanuméricas

Salta al siguiente elemento que tiene Key.getAscii() como el primer carácter de su etiqueta.

Control

Tecla conmutadora que permite seleccionar y anular la selección de varios elementos no contiguos.

Flecha abajo

La selección desciende un elemento.

Inicio

La selección se desplaza al principio de la lista.

Av Pág

La selección avanza una página.

Re Pág

La selección retrocede una página.

Mayús

Permite seleccionar elementos contiguos.

Flecha arriba

La selección asciende un elemento.

Nota: debe tenerse en cuenta que los tamaños de desplazamiento se expresan en píxeles y no en filas.
Nota: para las teclas Av Pág y Re Pág, una página está formada por los elementos que caben en pantalla menos uno. Por ejemplo, para avanzar por una lista desplegable que presenta las líneas de diez en diez, la pantalla muestra los elementos 0-9, 9-18, 18-27 y así sucesivamente, solapando un elemento por página.

Para obtener más información sobre el control de la selección, consulte la interfaz IFocusManager y la clase FocusManager en la Referencia de ActionScript 3.0 para Flash Professional, y en Trabajo con FocusManager .

La previsualización dinámica de cada instancia de List del escenario refleja los cambios de parámetros realizados durante la edición en el inspector de propiedades o en el inspector de componentes.

Si se añade el componente List 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.ListAccImpl; 
 
ListAccImpl.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 List

A continuación se indican los parámetros de edición que se pueden definir para cada instancia del componente List en el inspector de propiedades o en el inspector de componentes: allowMultipleSelection , dataProvider, horizontalLineScrollSize, horizontalPageScrollSize, horizontalScrollPolicy, multipleSelection, verticalLineScrollSize, verticalPageScrollSize y verticalScrollPolicy . Cada uno de estos parámetros tiene una propiedad de ActionScript del mismo nombre. Para obtener información sobre los valores posibles de estos parámetros, consulte la clase List en la Referencia de ActionScript 3.0 para Flash Professional . Para información sobre la utilización del parámetro dataProvider, consulte Uso del parámetro dataProvider .

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

Los siguientes ejemplos explican cómo añadir un componente List a una aplicación durante la edición.

Añadir un componente List a una aplicación

En este ejemplo, el componente List consta de etiquetas que identifican modelos de automóvil y campos de datos que contienen precios.

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

  2. Arrastre un componente List desde el panel Componentes al escenario.

  3. En el inspector de propiedades, siga este procedimiento:

    • Introduzca el nombre de instancia aList .

    • Asigne un valor de 200 a la anchura.

  4. Utilice la herramienta Texto para crear un campo de texto debajo de aList y asígnele el nombre de instancia aTf .

  5. 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.List; 
import flash.text.TextField; 
 
aTf.type = TextFieldType.DYNAMIC; 
aTf.border = false; 
 
// Create these items in the Property inspector when data and label 
// parameters are available. 
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); 
aList.addItem({label:"1966 Mustang (Classic)", data:27000}); 
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); 
aList.allowMultipleSelection = true; 
 
aList.addEventListener(Event.CHANGE, showData); 
 
function showData(event:Event) { 
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data; 
}

    Este código utiliza el método addItem() para llenar aList con tres elementos; asigna un valor label (que aparece en la lista) a cada elemento, así como un valor data. Al seleccionar un elemento en el componente List, el detector de eventos llama a la función showData() , que muestra el valor data para el elemento seleccionado.

  6. Seleccione Control > Probar película para compilar y ejecutar esta aplicación.

Llenar una instancia de List con un proveedor de datos

En este ejemplo se crea una lista de modelos de automóvil y sus precios. Para llenar el componente List, se utiliza un proveedor de datos en lugar del método addItem() .

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

  2. Arrastre un componente List desde el panel Componentes al escenario.

  3. En el inspector de propiedades, siga este procedimiento:

    • Introduzca el nombre de instancia aList .

    • Asigne un valor de 200 a la anchura.

  4. Utilice la herramienta Texto para crear un campo de texto debajo de aList y asígnele el nombre de instancia aTf .

  5. 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.List; 
import fl.data.DataProvider; 
import flash.text.TextField; 
 
aTf.type = TextFieldType.DYNAMIC; 
aTf.border = false; 
 
var cars:Array = [ 
{label:"1956 Chevy (Cherry Red)", data:35000}, 
{label:"1966 Mustang (Classic)", data:27000}, 
{label:"1976 Volvo (Xcllnt Cond)", data:17000}, 
]; 
aList.dataProvider = new DataProvider(cars); 
aList.allowMultipleSelection = true; 
 
aList.addEventListener(Event.CHANGE, showData); 
 
function showData(event:Event) { 
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data; 
}

  6. Seleccione Control > Probar película para ver el componente List con sus elementos.

Uso de un componente List para controlar una instancia de MovieClip

En el ejemplo siguiente se crea una componente List de nombres de colores y, al seleccionar uno, se aplica el color a un componente MovieClip.

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

  2. Arrastre el componente List del panel Componentes al escenario y asígnele los valores siguientes en el inspector de propiedades:

    • Introduzca aList como nombre de instancia.

    • Introduzca 60 en el valor de altura.

    • Introduzca 100 en el valor X.

    • Introduzca 150 en el valor Y.

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

    aList.addItem({label:"Blue", data:0x0000CC}); 
aList.addItem({label:"Green", data:0x00CC00}); 
aList.addItem({label:"Yellow", data:0xFFFF00}); 
aList.addItem({label:"Orange", data:0xFF6600}); 
aList.addItem({label:"Black", data:0x000000}); 
 
var aBox:MovieClip = new MovieClip(); 
addChild(aBox); 
 
aList.addEventListener(Event.CHANGE, changeHandler); 
function changeHandler(event:Event) { 
    drawBox(aBox, event.target.selectedItem.data); 
}; 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(225, 150, 100, 100); 
            box.graphics.endFill();         
}

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

  5. Haga clic en los colores de List para ver cómo se muestran en MovieClip.

Creación de una instancia del componente List con ActionScript:

En este ejemplo se crea una lista sencilla utilizando ActionScript y se llena con el método addItem() .

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

  2. Arrastre el componente List del panel Componentes al panel Biblioteca.

  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.List; 
 
var aList:List = new List(); 
aList.addItem({label:"One", data:1}); 
aList.addItem({label:"Two", data:2}); 
aList.addItem({label:"Three", data:3}); 
aList.addItem({label:"Four", data:4}); 
aList.addItem({label:"Five", data:5}); 
aList.setSize(60, 40); 
aList.move(200,200); 
addChild(aList); 
aList.addEventListener(Event.CHANGE, changeHandler); 
function changeHandler(event:Event):void { 
    trace(event.target.selectedItem.data); 
}

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