Uso do componente NumericStepper

O componente NumericStepper permite que um usuário percorra um conjunto ordenado de números. O componente consiste em um número em uma caixa de texto exibida ao lado de pequenos botões de seta para cima e seta para baixo. Quando um usuário pressiona os botões, o número é aumentado ou diminuído incrementalmente de acordo com a unidade especificada no parâmetro stepSize , até que usuário libere os botões ou até que o valor máximo ou mínimo seja atingido. O texto na caixa de texto do componente NumericStepper também é editável.

Uma visualização ao vivo de cada ocorrência de NumericStepper reflete a configuração do parâmetro value no Inspetor de propriedades ou no Inspetor de componentes. No entanto, não há interação de mouse ou teclado com os botões de seta do NumericStepper na visualização ao vivo.

Interação do usuário com o componente NumericStepper

Você pode usar o componente NumericStepper sempre que um usuário precisar selecionar um valor numérico. Por exemplo, você pode usar um componente NumericStepper em um formulário para definir o mês, o dia e o ano da data de expiração de um cartão de crédito. É possível também usar um componente NumericStepper para permitir que um usuário aumente ou diminua um tamanho de fonte.

O componente NumericStepper manipula somente dados numéricos. Além disso, você deve redimensionar o escalonador durante a criação para exibir mais de duas casas decimais (por exemplo, os números 5246 ou 1,34).

É possível ativar ou desativar um NumericStepper em um aplicativo. No estado desativado, um NumericStepper não recebe entradas de mouse ou de teclado. Quando estiver ativado, o NumericStepper receberá o foco se você clicar nele ou se acessá-lo por meio da tecla tab, e seu foco interno será definido para a caixa de texto. Quando uma ocorrência de NumericStepper estiver com o foco, você poderá usar as seguintes teclas para controlá-la:

Tecla

Descrição

Seta para baixo

O valor é alterado em uma unidade.

Seta para esquerda

Move o ponto de inserção para a esquerda dentro da caixa de texto.

Seta para direita

Move o ponto de inserção para a direita dentro da caixa de texto.

Shift+Tab

Move o foco para o objeto anterior.

Tabulação

Move o foco para o próximo objeto.

Seta para cima

O valor é alterado em uma unidade.

Para obter mais informações sobre o controle do foco, consulte a classe FocusManager na Referência do ActionScript 3.0 para Flash Professional e Trabalho com o FocusManager .

Parâmetros do componente NumericStepper

Você pode definir os seguintes parâmetros no Inspetor de propriedades ou no Inspetor de componentes de cada instância de NumericStepper: maximum , minimum , stepSize e value . 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 NumericStepper na Referência do ActionScript 3.0 para Flash Professional .

Criar um aplicativo com o NumericStepper

O procedimento a seguir explica como adicionar um componente NumericStepper a um aplicativo durante a criação. O exemplo coloca um componente NumericStepper e um componente Label no Palco, e cria um ouvinte para um evento Event . CHANGE na ocorrência de NumericStepper. Quando o valor no escalonador numérico for alterado, o exemplo exibirá o novo valor na propriedade text da ocorrência de Label.

  1. Arraste um componente NumericStepper do painel Componentes para o Palco.

  2. No Inspetor de propriedades, digite o nome de ocorrência aNs .

  3. Arraste um componente Label do painel Componentes para o Palco.

  4. No Inspetor de propriedades, digite o nome de ocorrência aLabel .

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

    import flash.events.Event; 
 
aLabel.text = "value = " + aNs.value; 
 
aNs.addEventListener(Event.CHANGE, changeHandler); 
function changeHandler(event:Event) :void { 
    aLabel.text = "value = " + event.target.value; 
};

    Este exemplo define a propriedade text do rótulo para o valor do NumericStepper. A função changeHandler() atualiza a propriedade text do rótulo sempre que o valor na ocorrência de NumericStepper é alterado.

  6. Selecione Controlar > Testar filme.

Criar um NumericStepper por meio do ActionScript

Este exemplo cria três NumericStepper com o código do ActionScript, para criar o mês, o dia e o ano da data de nascimento do usuário. Ele também adiciona rótulos para um prompt e para os identificadores de cada um dos NumericStepper.

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

  2. Arraste um rótulo para o painel Biblioteca.

  3. Arraste um componente NumericStepper para o painel Biblioteca.

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

    import fl.controls.Label; 
import fl.controls.NumericStepper; 
 
var dobPrompt:Label = new Label(); 
var moPrompt:Label = new Label(); 
var dayPrompt:Label = new Label(); 
var yrPrompt:Label = new Label(); 
 
var moNs:NumericStepper = new NumericStepper(); 
var dayNs:NumericStepper = new NumericStepper(); 
var yrNs:NumericStepper = new NumericStepper(); 
 
addChild(dobPrompt); 
addChild(moPrompt); 
addChild(dayPrompt); 
addChild(yrPrompt); 
addChild(moNs); 
addChild(dayNs); 
addChild(yrNs); 
 
dobPrompt.setSize(65, 22); 
dobPrompt.text = "Date of birth:"; 
dobPrompt.move(80, 150); 
 
moNs.move(150, 150); 
moNs.setSize(40, 22); 
moNs.minimum = 1; 
moNs.maximum = 12; 
moNs.stepSize = 1; 
moNs.value = 1; 
 
moPrompt.setSize(25, 22); 
moPrompt.text = "Mo."; 
moPrompt.move(195, 150); 
 
dayNs.move(225, 150); 
dayNs.setSize(40, 22); 
dayNs.minimum = 1; 
dayNs.maximum = 31; 
dayNs.stepSize = 1; 
dayNs.value = 1; 
 
dayPrompt.setSize(25, 22); 
dayPrompt.text = "Day"; 
dayPrompt.move(270, 150); 
 
yrNs.move(300, 150); 
yrNs.setSize(55, 22); 
yrNs.minimum = 1900; 
yrNs.maximum = 2006; 
yrNs.stepSize = 1; 
yrNs.value = 1980; 
 
yrPrompt.setSize(30, 22); 
yrPrompt.text = "Year"; 
yrPrompt.move(360, 150);

  5. Selecione Controlar > Testar filme para executar o aplicativo.