|
O componente ComboBox permite que o usuário faça uma única seleção em uma lista suspensa. Uma ComboBox pode ser estática ou editável. Uma ComboBox editável permite que um usuário digite o texto diretamente no campo de texto, na parte superior da lista. Se a lista suspensa chegar ao final do documento, ela abrirá para cima, e não para baixo. O ComboBox é constituído por três subcomponentes: os componentes BaseButton, TextInput e List.
Em uma ComboBox editável, apenas o botão é a área de pressionamento, e não a caixa de texto. Em uma ComboBox estática, o botão e a caixa de texto constituem a área de pressionamento. Essa área responde quando a lista suspensa é aberta ou fechada.
Quando o usuário faz uma seleção na lista, com o mouse ou através do teclado, o rótulo da seleção é copiado para o campo de texto na parte superior da ComboBox.
Interação do usuário com o componente ComboBox
Você pode usar um componente ComboBox em qualquer formulário ou aplicativo que requeira a seleção de um item em uma lista. Por exemplo, é possível fornecer uma lista suspensa de estados em um formulário de endereço de cliente. Você pode usar uma ComboBox editável para obter cenários mais complexos. Por exemplo, em um aplicativo que forneça orientações de direção, você pode usar uma ComboBox editável para permitir que um usuário especifique seus endereços de origem e destino. A lista suspensa conterá os endereços especificados anteriormente.
Se a ComboBox for editável, significando que a propriedade
editable
está definida como
true
, as teclas a seguir removerão o foco da caixa de entrada de texto e deixarão o valor anterior. A exceção é a tecla Enter, que aplicará o novo valor primeiro se o usuário tiver digitado algum texto.
|
Tecla
|
Descrição
|
|
Shift + Tab
|
Move o foco para o item anterior. Se um novo item for selecionado, o evento
change
será despachado.
|
|
Tabulação
|
Move o foco para o item seguinte. Se um novo item for selecionado, o evento
change
será despachado.
|
|
Seta para baixo
|
Move a seleção um item para baixo.
|
|
End
|
Move a seleção para o final da lista.
|
|
Escape
|
Fecha a lista suspensa e retorna o foco para a ComboBox.
|
|
Enter
|
Fecha a lista suspensa e retorna o foco para a ComboBox. Quando a ComboBox é editável e o usuário digita texto, a tecla Enter define o valor para o texto digitado.
|
|
Início
|
Move a seleção para o início da lista.
|
|
Page Up
|
Move a seleção uma página para cima.
|
|
Page Down
|
Move a seleção uma página para baixo.
|
Quando você adicionar o componente ComboBox 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.ComboBoxAccImpl;
ComboBoxAccImpl.enableAccessibility();
A acessibilidade de um componente é ativada somente uma vez, independentemente de quantas ocorrências do componente existem.
Parâmetros do componente ComboBox
Você pode definir os seguintes parâmetros de criação no Inspetor de propriedades ou no Inspetor de componentes para cada ocorrência de ComboBox:
dataProvider
,
editable
,
prompt
e
rowCount
. 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 ComboBox 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 ComboBox
O procedimento a seguir descreve como adicionar um componente ComboBox a um aplicativo durante a criação. A ComboBox é editável e se você digitar
Add
no campo de texto, o exemplo adicionará um item à lista suspensa.
-
Crie um novo documento Flash (ActionScript 3.0).
-
Arraste uma ComboBox ao Palco e atribua a ela o nome de ocorrência
aCb
. Na aba Parâmetros, defina o parâmetro
editable
como
true
.
-
Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código:
import fl.data.DataProvider;
import fl.events.ComponentEvent;
var items:Array = [
{label:"screen1", data:"screenData1"},
{label:"screen2", data:"screenData2"},
{label:"screen3", data:"screenData3"},
{label:"screen4", data:"screenData4"},
{label:"screen5", data:"screenData5"},
];
aCb.dataProvider = new DataProvider(items);
aCb.addEventListener(ComponentEvent.ENTER, onAddItem);
function onAddItem(event:ComponentEvent):void {
var newRow:int = 0;
if (event.target.text == "Add") {
newRow = event.target.length + 1;
event.target.addItemAt({label:"screen" + newRow, data:"screenData" + newRow},
event.target.length);
}
}
-
Selecione Controlar > Testar filme.
Criar uma ComboBox por meio do ActionScript
O exemplo a seguir cria uma ComboBox com o ActionScript e a preenche com uma lista das universidades da área de São Francisco, Califórnia. Ele define a propriedade
width
da ComboBox para acomodar a largura do texto do prompt e define a propriedade
dropdownWidth
de modo que seja um pouco mais larga para acomodar o maior nome de universidade.
O exemplo cria a lista de universidades em uma ocorrência de matriz, usando a propriedade
label
para armazenar os nomes de escola e a propriedade
data
para armazenar as URLs do site de cada escola. Ele atribui a matriz à ComboBox definindo sua propriedade
dataProvider
.
Quando um usuário seleciona uma universidade na lista, esse exemplo aciona um evento Event.
CHANGE
e uma chamada para a função
changeHandler()
, que carrega a propriedade
data
em uma solicitação de URL para acessar o site da escola.
Observe que a última linha define a propriedade
selectedIndex
da ocorrência de ComboBox como -1 para reexibir o prompt quando a lista é fechada. Do contrário, o prompt será substituído pelo nome da escola selecionada.
-
Crie um novo documento Flash (ActionScript 3.0).
-
Arraste o componente ComboBox do painel Componentes para o painel Biblioteca.
-
Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript:
import fl.controls.ComboBox;
import fl.data.DataProvider;
import flash.net.navigateToURL;
var sfUniversities:Array = new Array(
{label:"University of California, Berkeley",
data:"http://www.berkeley.edu/"},
{label:"University of San Francisco",
data:"http://www.usfca.edu/"},
{label:"San Francisco State University",
data:"http://www.sfsu.edu/"},
{label:"California State University, East Bay",
data:"http://www.csuhayward.edu/"},
{label:"Stanford University", data:"http://www.stanford.edu/"},
{label:"University of Santa Clara", data:"http://www.scu.edu/"},
{label:"San Jose State University", data:"http://www.sjsu.edu/"}
);
var aCb:ComboBox = new ComboBox();
aCb.dropdownWidth = 210;
aCb.width = 200;
aCb.move(150, 50);
aCb.prompt = "San Francisco Area Universities";
aCb.dataProvider = new DataProvider(sfUniversities);
aCb.addEventListener(Event.CHANGE, changeHandler);
addChild(aCb);
function changeHandler(event:Event):void {
var request:URLRequest = new URLRequest();
request.url = ComboBox(event.target).selectedItem.data;
navigateToURL(request);
aCb.selectedIndex = -1;
}
-
Selecione Controlar > Testar filme.
Você pode implementar e executar esse exemplo no ambiente de criação do Flash, mas receberá mensagens de aviso se tentar acessar os sites da universidade clicando nos itens da ComboBox. Para acessar a ComboBox funcional na Internet, visite:
http://www.helpexamples.com/peter/bayAreaColleges/bayAreaColleges.html
|
|
|