Uso do componente TileList

O componente TileList consiste em uma lista que é composta por linhas e colunas de dados fornecidos por um provedor de dados. Um item representa uma unidade de dados armazenada em uma célula na TileList. Um item, que se origina no provedor de dados, geralmente tem uma propriedade label e uma propriedade source . A propriedade label identifica o conteúdo a ser exibido em uma célula e a propriedade source fornece um valor para ela.

Você pode criar uma ocorrência de Array ou recuperar uma em um servidor. O componente TileList tem métodos que agem como proxy em seu provedor de dados; por exemplo, os métodos addItem() e removeItem() . Se nenhum provedor de dados externos for fornecido à lista, esses métodos criam automaticamente uma ocorrência de provedor de dados, que é exposta por meio de List.dataProvider .

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

Uma TileList renderiza cada célula usando uma entidade gráfica que implementa a interface do ICellRenderer. Você pode especificar esse renderizador com a propriedade cellRenderer da TileList. O CellRenderer padrão do componente TileList é a ImageCell, que exibe uma imagem (classe, bitmap, ocorrência ou URL) e um rótulo opcional. O rótulo é uma única linha que sempre está alinhada à parte inferior da célula. Você pode rolar uma TileList apenas em uma direção.

Quando uma ocorrência de TileList estiver com o foco, você também poderá usar as seguintes teclas para acessar os itens dentro dela:

Tecla

Descrição

Seta para cima e seta para baixo

Permite a movimentação para cima e para baixo em uma coluna. Se a propriedade allowMultipleSelection for true , você poderá usar essas teclas em combinação com a tecla Shift para selecionar várias células.

Seta para esquerda e seta para direita

Permite a movimentação para esquerda ou para direita em uma linha. Se a propriedade allowMultipleSelection for true , você poderá usar essas teclas em combinação com a tecla Shift para selecionar várias células.

Início

Seleciona a primeira célula em uma TileList. Se a propriedade allowMultipleSelection for true , e você mantiver pressionada a tecla Shift enquanto pressiona Home, todas as células da seleção atual até a primeira célula serão selecionadas.

End

Seleciona a última célula em uma TileList. Se a propriedade allowMultipleSelection for true , e você mantiver pressionada a tecla Shift enquanto pressiona End, todas as células da seleção atual até a última célula serão selecionadas.

Ctrl

Se a propriedade allowMultipleSelection for definida como true , você poderá selecionar várias células, em uma ordem não específica.

Quando você adicionar o componente TileList 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.TileListAccImpl; 
 
TileListAccImpl.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 TileList

Você pode definir os parâmetros de autoria a seguir no Inspetor de propriedades ou no Inspetor de componentes de cada instância do componente TileList: allowMultipleSelection , columnCount , columnWidth , dataProvider , direction , horizontalScrollLineSize , horizontalScrollPageSize , labels , rowCount , rowHeight , ScrollPolicy, verticalScrollLineSize e verticalScrollPageSize . Cada um desses parâmetros tem uma propriedade ActionScript correspondente de mesmo nome. Para obter informações sobre o uso do parâmetro dataProvider, consulte Uso do parâmetro dataProvider .

Você pode escrever o ActionScript de modo a definir opções adicionais para as ocorrências de TileList usando seus métodos, propriedades e eventos. Para obter mais informações, consulte a classe TileList na Referência do ActionScript 3.0 para Flash Professional .

Criar um aplicativo com o componente TileList

Este exemplo usa MovieClip para preencher uma TileList com uma matriz de cores de pintura.

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

  2. Arraste um componente TileList para o Palco e atribua a ela o nome de ocorrência aTl .

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

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

Criação de um componente TileList por meio do ActionScript

Este exemplo cria, de forma dinâmica, uma instância de TileList e adiciona instâncias dos componentes ColorPicker, ComboBox, NumericStepper e CheckBox a ela. Ele cria uma matriz que contém rótulos e os nomes do componente a serem exibidos, e atribui a matriz ( dp ) à propriedade dataProvider da TileList. Este exemplo usa as propriedades columnWidth e rowHeight e o método setSize() para organizar o layout da TileList, o método move() para posicioná-la no Palco, o estilo contentPadding para colocar espaço entre as bordas da ocorrência de TileList e seu conteúdo, e o método sortItemsOn() para classificar o conteúdo com base em seus rótulos.

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

  2. Arraste os seguintes componentes do painel Componentes para o painel Biblioteca: ColorPicker, ComboBox, NumericStepper, CheckBox e TileList.

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