ActionScript/Tipos de campos de texto: diferenças entre revisões

 

As bibliotecas usadas são <code>flash.text.TextField</code>, para a criação dos textos em si, e <code>flash.text.TextFieldType</code>, para configuração do tipo de caixa de texto.

 

var placar:TextField = new TextField();

addChild(placar);

addChild(login);

 

O campo ''placar'' será do tipo dinâmico, o que permite a mudança de seu texto, e ''login'' é um campo de ''input'', o que faz com que ele possa ser editado e submetido.

Podemos definir a altura e largura de um campo de texto, se terá borda e sua cor, cor de fundo, entre outros.

 

var cxTexto:TextField = new TextField();

cxTexto.type = TextFieldType.DYNAMIC;

 

addChild(cxTexto);

 

=== Campo de senha ===

Você pode configurar também o número máximo de caracteres e uma [[w:Expressão Regular|expressão regular]] para restringir os tipos de caracteres aceitos (se somente letras, números, etc.).

 

var cxSenha:TextField = new TextField();

cxSenha.type = TextFieldType.INPUT;

cxSenha.backgroundColor = 0xDDDDDD;

addChild(cxSenha);

Veja mais sobre expressões regulares em ActionScript na [http://help.adobe.com/pt_BR/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7ea9.html página de ajuda da Adobe].

 

Use a propriedade <code>focus</code> para lançar o foco sobre um campo de texto. O exemplo abaixo faz com que quando o palco for clicado a caixa de senha ''cxSenha'' receba o foco do cursor de texto.

 

var cxSenha:TextField = new TextField();

cxSenha.type = TextFieldType.INPUT;

}

 

 

Você pode usar esse comando stage.focus porque a referência a linha principal de tempo está implícita. Você poderia escrever esse comando de duas maneiras diferentes que surtem o mesmo efeito:

 

 

cxSenha.stage.focus = cxSenha; // fazendo referência ao palco da cxSenha, ou

this.stage.focus = cxSenha; // usando a palavra 'this'

 

=== Acrescentando texto ===

Utilize o método <code>appendText()</code>:

 

var cxTexto:TextField = new TextField();

 

cxTexto.text = "Meu nome é ";

cxTexto.appendText("João");

 

O resultado será "Meu nome é João". Você pode adicionar texto através do operador += também (cxTexto.text += "João"), mas <code>appendText()</code> é mais rápido.

A propriedade <code>autoSize</code>, da classe <code>TextField</code>, redimensiona um campo de texto baseado em entrada e na escolha do alinhamento.

 

var cxSenha:TextField = new TextField();

cxSenha.type = TextFieldType.DYNAMIC;

evt.target.appendText("TEXTO ");

}

 

Você pode utilizar as propriedades <code>TextFieldAutoSize.LEFT</code> (expande ou contrai no lado direito, em qualquer caso de linhas novas), <code>TextFieldAutoSize.RIGHT</code> (expande ou contrai no lado esquerdo) e <code>TextFieldAutoSize.CENTER</code> (distribui igualmente tanto à direita como à esquerda os espaços).

Veja o exemplo:

 

var cxTexto:TextField = new TextField();

cxTexto.type = TextFieldType.DYNAMIC;

evt.target.scrollV++;

}

 

Ao clicar em <code>cxTexto</code> você verá o texto rolando, uma linha por vez (por causa de ++, mas você pode pedir que ande determinado número de linhas usando o atributo += ). Você pode fazer a rolagem ir para cima diminuindo com <code>scrollV--</code>, ou então inserir diretamente um número inteiro para rolar a caixa.

=== Usando fontes embutidas ===

Utilize a propriedade <code>embedFonts</code> para dar suporte a uma fonte embutida (só possível através da IDE do Flash).

 

cxTexto.embedFonts = true;

 

 

=== Usando TextFormat ===

Criando uma instância da classe <code>TextFormat</code> você pode formatar campos de txto, configurando cores para o texto, tipologia, tamanho, entre outras. Não permite todos os recursos que a formatação através de HTML/CSS (visto adiante), porém <code>TextFormat</code> é um pouco mais fácil de se utilizar.

 

var formatacao:TextFormat = new TextFormat(); // Criando o objeto

 

 

addChild(cxTexto);

 

O uso da propriedade <code>defaultTextFormat</code> funciona bem porque definimos o texto da caixa cxTexto ''depois'' de discriminarmos a formatação. Para inserirmos a formatação depois de definir o texto temos que usar o método <code>setTextFormat()</code>. Você pode especificar também um limite de caracteres (seleção) que será formatada (em vez do texto todo):

 

cxTexto.setTextFormat(formatacao);

 

// Apenas os caracteres de 0 a 4. O valor 4 é o caractere até onde vai a formatação, e 0 o início

cxTexto.setTextFormat(formatacao, 0, 4);

 

=== Usando HTML e CSS ===