Uso do componente List

O componente List é uma caixa de listagem rolável de seleção única ou múltipla. Uma lista também pode exibir gráficos, incluindo outros componentes. Adicione os itens exibidos na lista usando a caixa de diálogo Valores que aparece quando você clica nos rótulos ou campos de parâmetro de dados. Você também pode usar os métodos List.addItem() e List.addItemAt() para adicionar itens à lista.

O componente List usa um índice baseado em zero, no qual o item com o índice 0 é o item superior exibido. Ao adicionar, remover ou substituir itens de lista usando os métodos e propriedades da classe List, talvez seja necessário especificar o índice do item de lista.

Interação do usuário com o componente List

Você pode configurar uma lista para que os usuários possam fazer seleções únicas ou múltiplas. Por exemplo, um usuário que está visitando um site de comércio eletrônico precisa selecionar o item a ser comprado. Existe uma lista com 30 itens que o usuário pode rolar e clicar em algum para selecionar.

Você também pode criar uma lista que use clipes de filme personalizados como linhas, a fim de que possa exibir mais informações para o usuário. Por exemplo, em um aplicativo de email, cada caixa de correio pode ser um componente List e cada linha pode ter ícones para indicar a prioridade e o status.

A lista recebe o foco quando você clica nela ou a acessa por meio da tecla tab. Em seguida, você pode usar as seguintes teclas para controlá-la:

Tecla

Descrição

Teclas alfanuméricas

Salta para o próximo item que tem Key.getAscii() como primeiro caractere em seu rótulo.

Control

Alterna a tecla que permite fazer e remover várias seleções não contíguas.

Seta para baixo

A seleção é movida um item para baixo.

Início

A seleção é movida para o início da lista.

Page Down

A seleção é movida uma página para baixo.

Page Up

A seleção é movida uma página para cima.

Shift

Permite a seleção contígua.

Seta para cima

A seleção é movida um item para cima.

Nota: Observe que os tamanhos de rolagem são indicado em pixels, não em linhas.
Nota: O tamanho da página usado pelas teclas Page Up e Page Down é um número menor que o número de itens que cabem na tela. Por exemplo, a paginação em uma lista suspensa de dez linhas mostrará os itens 0-9, 9-18, 18-27 e assim sucessivamente, com uma sobreposição de item por página.

Para obter mais informações sobre o controle do foco, consulte a interface IFocusManager e a classe FocusManager na Referência do ActionScript 3.0 para Flash Professional e Trabalho com o FocusManager .

Uma visualização ao vivo de cada ocorrência de List no Palco reflete as alterações feitas nos parâmetros no Inspetor de propriedades ou no Inspetor de componentes durante a criação.

Quando você adicionar o componente List a um aplicativo, poderá torná-lo acessível a um leitor de tela adicionando as seguintes linhas do código do ActionScript: 

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

A acessibilidade de um componente é ativada somente uma vez, independentemente de quantas ocorrências o componente tem. Para obter mais informações, consulte o Capítulo 18, “Criação de conteúdo acessível”, em Uso do Flash .

Parâmetros do componente List

Você pode definir os seguintes parâmetros no Inspetor de propriedades ou no Inspetor de componentes de cada instância do componente List: allowMultipleSelection , dataProvider, horizontalLineScrollSize, horizontalPageScrollSize, horizontalScrollPolicy, multipleSelection, verticalLineScrollSize, verticalPageScrollSize e verticalScrollPolicy . Cada um desses parâmetros tem uma propriedade ActionScript correspondente de mesmo nome. Para obter informações sobre os possíveis valores desses parâmetros, consulte a classe List na Referência do ActionScript 3.0 para Flash Professional . Para obter informações sobre o uso do parâmetro dataProvider, consulte Uso do parâmetro dataProvider .

Criar um aplicativo com o componente List

O procedimento a seguir descreve como adicionar um componente List a um aplicativo durante a criação.

Adição de um componente List simples a um aplicativo

Neste exemplo, a lista consiste em rótulos que identificam modelos de carro e campos de dados que contêm preços.

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste um componente List do painel Componentes para o Palco.

  3. No Inspetor de propriedades, faça o seguinte:

    • Digite o nome de ocorrência aList .

    • Atribua o valor 200 à L (largura).

  4. Use a ferramenta Texto para criar um campo de texto abaixo de aList e atribua a ele o nome de ocorrência aTf .

  5. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript: 

    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; 
}

    Esse código usa o método addItem() para preencher aList com três itens, atribuindo um valor label a cada um, que aparece na lista, e um valor data . Quando você seleciona um item na lista, o ouvinte de eventos chama a função showData() , que exibe o valor data para o item selecionado.

  6. Selecione Controlar > Testar filme para compilar e executar esse aplicativo.

Preenchimento de uma ocorrência de List com um provedor de dados

Esse exemplo cria uma lista de modelos de carro e seus preços. No entanto, ele usa um provedor de dados para preencher a lista, em vez do método addItem() .

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste um componente List do painel Componentes para o Palco.

  3. No Inspetor de propriedades, faça o seguinte:

    • Digite o nome de ocorrência aList .

    • Atribua o valor 200 à L (largura).

  4. Use a ferramenta Texto para criar um campo de texto abaixo de aList e atribua a ele o nome de ocorrência aTf .

  5. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript: 

    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. Selecione Controlar > Testar filme para ver a lista com seus itens.

Uso de um componente List para controlar uma ocorrência de MovieClip

O exemplo a seguir cria uma lista de nomes de cor e, quando você seleciona um, ele aplica a cor a um MovieClip.

  1. Crie um documento Flash (ActionScript 3.0).

  2. Arraste o componente List do painel Componentes para o Palco e atribua a ele os seguintes valores no Inspetor de propriedades:

    • Digite aList como nome de ocorrência.

    • Digite 60 como valor A.

    • Digite 100 como valor X.

    • Digite 150 como valor Y.

  3. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript: 

    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. Selecione Controlar > Testar filme para executar o aplicativo.

  5. Clique nas cores na lista para vê-las exibidas em um MovieClip.

Criar uma ocorrência de componente List usando o ActionScript

Este exemplo cria uma lista simples usando o ActionScript e a preenche usando o método addItem() .

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste o componente List do painel Componentes para o painel Biblioteca.

  3. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript: 

    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. Selecione Controlar > Testar filme para executar o aplicativo.