Personalizar o componente ComboBox

Você pode transformar um componente ComboBox horizontal e verticalmente, durante a autoria e em tempo de execução. Durante a autoria, selecione o componente no Palco e use a ferramenta Transformação livre ou qualquer um dos comandos Modificar > Transformar. Em tempo de execução, use o método setSize() ou as propriedades aplicáveis da classe ComboBox, como height , width , scaleX e scaleY .

A ComboBox será redimensionada para ajustar-se à largura e à altura especificadas. A lista será redimensionada para ajustar-se à largura do componente, a menos que a propriedade dropdownWidth tenha sido definida.

Se o texto for grande demais para ajustar-se à ComboBox, será recortado. Você precisa redimensionar a ComboBox e definir a propriedade dropdownWidth para ajustar-se ao texto.

Usar estilos com o componente ComboBox

Você pode definir propriedades de estilo para alterar a aparência de um componente ComboBox. Os estilos especificam valores para as capas, o renderizador de célula, o preenchimento e a largura de botão do componente. O exemplo a seguir define os estilos buttonWidth e textPadding . O estilo buttonWidth define a largura da área de pressionamento do botão e está em vigor quando a ComboBox é editável e você só pode pressionar o botão para abrir a lista suspensa. O estilo textPadding especifica a quantidade de espaço entre a borda externa do campo de texto e o texto. É útil para centralizar o texto verticalmente no campo de texto se você tornar a ComboBox mais alta. Caso contrário, pode parecer que o texto está na parte superior do campo de texto.

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

  2. Arraste o componente ComboBox para o Palco e atribua a ele o nome de ocorrência de aCb .

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

    import fl.data.DataProvider; 
 
aCb.setSize(150, 35); 
aCb.setStyle("textPadding", 10); 
aCb.setStyle("buttonWidth", 10); 
aCb.editable = true; 
 
var items:Array = [ 
{label:"San Francisco", data:"601 Townsend St."}, 
{label:"San Jose", data:"345 Park Ave."}, 
{label:"San Diego", data:"10590 West Ocean Air Drive, Suite 100"}, 
{label:"Santa Rosa", data:"2235 Mercury Way, Suite 105"}, 
{label:"San Luis Obispo", data:"3220 South Higuera Street, Suite 311"} 
]; 
aCb.dataProvider = new DataProvider(items);

  4. Selecione Controlar > Testar filme.

    Observe que a área do botão na qual você pode clicar para abrir a lista suspensa é apenas uma área estreita à direita. Observe também que o texto está centralizado verticalmente no campo de texto. Você pode tentar executar o exemplo sem as duas instruções setStyle() para ver o efeito.

Usar capas com a ComboBox

A ComboBox usa as capas a seguir para representar seus estados visuais:

Capas de ComboBox

Você pode alterar a cor da capa Up para alterar a cor do componente em seu estado inativo no Palco.

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

  2. Arraste o componente ComboBox para o Palco.

  3. Clique nele duas vezes para abrir sua paleta de capas.

  4. Clique duas vezes na capa Up até que ela seja selecionada e aberta para edição.

  5. Defina o controle de zoom como 400%.

  6. Clique na área central da capa até que sua cor apareça no Seletor de cor de preenchimento, no Inspetor de propriedades.

  7. Selecione a cor #33FF99 usando o Seletor de cor de preenchimento para aplicá-la à capa Up.

  8. Clique no botão Voltar, do lado esquerdo da barra de edição acima do Palco, para voltar ao modo de edição de documento.

  9. Selecione Controlar > Testar filme.

    A ComboBox deverá aparecer no Palco conforme mostrada na ilustração a seguir.

    ComboBox com cor personalizada para a capa Background
    ComboBox com cor personalizada para capa de plano de fundo