Definição de estilos

Os estilos de um componente geralmente especificam os valores de suas capas, ícones, formatação de texto e preenchimento quando o Flash desenha o componente em seus diversos estados. Por exemplo, o Flash desenha um Button com uma capa diferente para mostrar seu estado pressionado, que ocorre quando você clica com o mouse sobre ele, em relação à capa usada para mostrar o estado ativo ou normal. Ele usa também uma capa diferente no estado desativado, causado pela definição da propriedade enabled como false .

Você pode definir estilos para componentes em nível de documento, classe e ocorrência. Além disso, algumas propriedades de estilo podem ser herdadas de um componente pai. Por exemplo, o componente List herda estilos de ScrollBar ao herdar de BaseScrollPane.

Você pode definir estilos para personalizar um componente das seguintes formas:

  • Definir estilos em uma ocorrência de componente. Você pode alterar as propriedades de cor e de texto de uma única ocorrência de componente. Isso é eficaz em algumas situações, mas pode ser demorado se você precisar definir propriedades individuais para todos os componentes de um documento.

  • Definir estilos para todos os componentes de um determinado tipo em um documento. Se quiser aplicar uma aparência consistente a todos os componentes de determinado tipo — por exemplo, a todas as CheckBoxes ou a todos os Buttons em um documento — você pode definir estilos em nível de componente.

    Os valores das propriedades de estilo definidas em contêineres são herdados pelos componentes contidos.

    O Flash não exibe as alterações feitas em propriedades de estilo quando você visualiza componentes no Palco usando o recurso de Visualização ao vivo.

Compreensão das configurações de estilo

Aqui estão alguns pontos fundamentais do uso de estilos:

Herança
É definido que um componente filho herde um estilo do componente pai por design. Você não pode definir a herança para os estilos no ActionScript.

Precedência
Se o estilo de um componente é definido de mais de uma forma, o Flash usa o primeiro estilo encontrado, de acordo com sua ordem de precedência. O Flash procura estilos na seguinte ordem, até que um valor seja encontrado:

  1. O Flash procura uma propriedade de estilo na ocorrência do componente.

  2. Se o estilo for um dos estilos herdados, o Flash percorrerá a hierarquia pai em busca de um valor herdado.

  3. O Flash procura o estilo no componente.

  4. O Flash procura uma configuração global no StyleManager.

  5. Se, ainda assim, a propriedade não for definida, terá o valor undefined .

Acesso aos estilos padrão de um componente

Você pode acessar os estilos padrão de um componente usando o método getStyleDefinition() estático na classe do componente. Por exemplo, o código a seguir recupera os estilos padrão do componente ComboBox e exibe os valores padrão das propriedades buttonWidth e downArrowDownSkin : 

import fl.controls.ComboBox; 
var styleObj:Object = ComboBox.getStyleDefinition(); 
trace(styleObj.buttonWidth); // 24 
trace(styleObj.downArrowDownSkin); // ScrollArrowDown_downSkin

Definição e obtenção de estilos em uma ocorrência de componente

Qualquer ocorrência de um componente de UI pode chamar diretamente os métodos setStyle() e getStyle() para definir ou recuperar um estilo. A sintaxe a seguir define um estilo e um valor para uma ocorrência de componente: 

instanceName.setStyle("styleName", value);

Esta sintaxe recupera um estilo para uma ocorrência de componente: 

var a_style:Object = new Object(); 
a_style = instanceName.getStyle("styleName");

Observe que o método getStyle() retorna o tipo Object, pois pode retornar vários estilos, por ter diferentes tipos de dados. Por exemplo, o código a seguir define o estilo de fonte para uma ocorrência de TextArea ( aTa ), e depois a recupera usando o método getStyle() . O exemplo projeta o valor retornado em um objeto TextFormat para atribuí-lo a uma variável TextFormat. Sem a projeção, o compilador emitiria um erro devido à tentativa de forçar a conversão de uma variável Object em uma variável TextFormat. 

import flash.text.TextFormat; 
 
var tf:TextFormat = new TextFormat(); 
tf.font = "Georgia"; 
aTa.setStyle("textFormat",tf); 
aTa.text = "Hello World!"; 
var aStyle:TextFormat = aTa.getStyle("textFormat") as TextFormat; 
trace(aStyle.font);

Usar TextFormat para definir propriedades de texto

Use o objeto TextFormat para formatar texto em uma ocorrência de componente. O objeto TextFormat tem propriedades que permitem especificar características de texto como bold , bullet , color , font , italic , size e muitas outras. Você pode definir essas propriedades no objeto TextFormat, e depois chamar o método setStyle() para aplicá-las a uma ocorrência de componente. Por exemplo, o código a seguir define as propriedades font , size e bold de um objeto TextFormat e as aplica a uma ocorrência de Button: 

/* Create a new TextFormat object to set text formatting properties. */ 
var tf:TextFormat = new TextFormat(); 
tf.font = "Arial"; 
tf.size = 16; 
tf.bold = true; 
a_button.setStyle("textFormat", tf);

A ilustração a seguir mostra o efeito dessas configurações em um botão com o rótulo Submit:

Button com novo estilo textFormat aplicado a seu rótulo

As propriedades de estilo definidas em uma ocorrência de componente com setStyle() têm a maior prioridade e substituem todas as demais configurações de estilo. No entanto, quanto mais propriedades você definir usando setStyle() em uma única ocorrência de componente, mais lento será o processamento do componente em tempo de execução.

Definição de um estilo para todas as ocorrências de um componente

Você pode definir um estilo para todas as ocorrências de uma classe de componentes usando o método setComponentStyle() estático da classe StyleManager. Por exemplo, você pode definir a cor do texto como vermelha em todos os Buttons, arrastando um Button para o Palco e adicionando o seguinte código ActionScript ao painel Ações, no Quadro 1 da Linha do tempo: 

import fl.managers.StyleManager; 
import fl.controls.Button; 
 
var tf:TextFormat = new TextFormat(); 
tf.color = 0xFF0000; 
StyleManager.setComponentStyle(Button, "textFormat", tf);

Todos os Buttons que você adicionar em seguida ao Palco terão rótulos vermelhos.

Definir um estilo para todos os componentes

Você pode definir um estilo para todos os componentes usando o método setStyle() estático da classe StyleManager.

  1. Arraste um componente List para o Palco e atribua a ele o nome de ocorrência de aList .

  2. Arraste um componente Button para o Palco e atribua a ele o nome de ocorrência de aButton .

  3. Pressione F9 ou selecione Ações, no menu Janela, para abrir o painel Ações, se ainda não estiver aberto. Digite o seguinte código no Quadro 1 da Linha do tempo para definir a cor do texto como vermelha para todos os componentes: 

    import fl.managers.StyleManager; 
 
var tf:TextFormat = new TextFormat(); 
tf.color = 0xFF0000; 
StyleManager.setStyle("textFormat", tf);

  4. Adicione o código a seguir ao painel Ações para preencher List com texto. 

    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;

  5. Selecione Controlar > Testar filme ou pressione Ctrl+Enter para compilar o código e testar seu conteúdo. O texto no rótulo do botão e na lista deverá estar vermelho.