Uso do componente ComboBox

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.

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

  2. 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 .

  3. 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);  
        } 
    }
  4. 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.

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

  2. Arraste o componente ComboBox 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.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; 
    }
  4. 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