Personalizar o componente TextArea

Você pode transformar um componente TextArea 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 qualquer propriedade aplicável da classe TextArea, como height , width , scaleX e scaleY .

Quando um componente TextArea é redimensionado, a borda é redimensionada de acordo com a nova caixa delimitadora. As barras de rolagem são colocadas na borda inferior e na borda direita, caso necessário. Então, a área de texto é redimensionada dentro da área restante; não há elementos de tamanho fixo em um componente TextArea. Se a largura do componente TextArea for muito estreita para exibir o tamanho do texto, o texto será recortado.

Os estilos e o componente TextArea

Os estilos do componente TextArea especificam valores para as capas, o preenchimento e o formato de texto quando o componente é desenhado. Os estilos texFormat e disabledTextFormat controlam o estilo do texto exibido pela TextArea. Para obter mais informações sobre propriedades de estilos de capa, consulte Usar capas com o componente TextArea .

O exemplo a seguir define o estilo disabledTextFormat para alterar a aparência do texto quando a TextArea está desativada, mas o mesmo processo se aplica à definição do estilo textFormat para uma TextArea ativada.

  1. Crie um novo arquivo Flash.

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

  3. Adicione o seguinte código ao painel Ações no Quadro 1 da Linha do tempo principal.

    var tf:TextFormat = new TextFormat(); 
    tf.color = 0xCC99FF; 
    tf.font = "Arial Narrow"; 
    tf.size = 24; 
    myTa.setStyle("disabledTextFormat", tf); 
    myTa.text = "Hello World"; 
    myTa.setSize(120, 50); 
    myTa.move(200, 50); 
    myTa.enabled = false;
  4. Selecione Controlar > Testar filme.

Usar capas com o componente TextArea

O componente TextArea usa as seguintes capas, cuja aparência você pode alterar editando-as.

Capas de TextArea
Nota: Alterar a capa da ScrollBar em um componente causará a mesma alteração em todos os outros componentes que usam a ScrollBar.

O procedimento a seguir altera as cores da borda da capa Focus Rect, que aparece quando a TextArea tem o foco, e da capa Normal.

  1. Crie um novo arquivo Flash.

  2. Arraste um componente TextArea para o Palco e clique nele duas vezes para abrir seu painel de ícones de capa.

  3. Clique duas vezes na capa Focus Rect.

  4. Clique na borda da capa Focus Rect para selecioná-la. Quando estiver selecionada, sua cor atual aparecerá no Seletor de cor de preenchimento, no Inspetor de propriedades.

  5. Clique no Seletor de cor de preenchimento, no Inspetor de propriedades, para abri-lo e selecionar a cor #CC0000, que será aplicada à borda.

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

  7. Clique duas vezes no componente TextArea para abrir seu painel de ícones de capa.

  8. Clique duas vezes na capa Normal.

  9. Selecione todas as extremidades da borda da capa Normal, uma de cada vez, e defina sua cor como #990099.

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

  11. Selecione Controlar > Testar filme.

    Quando você selecionar a TextArea para começar a digitar texto, sua borda deverá aparecer como é mostrada na ilustração a seguir:

    TextArea com bordas personalizadas

    A borda externa é a capa Focus Rect e a borda interna é a borda da capa Normal.

    Para obter informações sobre a edição da capa UIScrollBar, consulte Personalizar o componente UIScrollBar .