|
El componente NumericStepper permite que el usuario se desplace por un conjunto ordenado de números. El componente consta de un número en un cuadro de texto que se muestra junto a pequeños botones de flecha arriba y flecha abajo. Cuando el usuario presiona los botones, el número aumenta o disminuye de forma gradual según la unidad especificada en el parámetro
stepSize
, hasta que el usuario suelta los botones o hasta que se alcanza el valor máximo o mínimo. El texto del cuadro de texto del componente NumericStepper también se puede editar.
La previsualización dinámica de cada instancia de NumericStepper refleja la configuración del parámetro value en el inspector de propiedades o el inspector de componentes. Sin embargo, en la previsualización dinámica ni el teclado ni el ratón pueden interactuar con los botones de flecha de NumericStepper.
Interacción del usuario con el componente NumericStepper
Se puede utilizar el componente NumericStepper siempre que se desee que el usuario seleccione un valor numérico. Por ejemplo, se podría utilizar un componente NumericStepper en un formulario para definir el mes, el día y el año de la fecha de caducidad de una tarjeta de crédito. Asimismo, puede utilizar un componente NumericStepper para que el usuario aumente o disminuya el tamaño de la fuente.
El componente NumericStepper sólo gestiona datos numéricos. Además, para ver más de dos lugares numéricos (por ejemplo, los números 5246 o 1,34), es preciso cambiar el tamaño del componente durante la edición.
Es posible activar o desactivar el componente NumericStepper de una aplicación. Si está desactivado, NumericStepper no recibe la entrada del ratón ni del teclado. Si está activado, NumericStepper se selecciona al hacer clic en él o desplazarse al mismo mediante el tabulador, y su selección interna se establece en el cuadro de texto. Cuando una instancia de NumericStepper está seleccionada, se pueden utilizar las teclas siguientes para controlarla:
|
Tecla
|
Descripción
|
|
Flecha abajo
|
El valor cambia en una unidad.
|
|
Flecha izquierda
|
Desplaza el punto de inserción a la izquierda dentro del cuadro de texto.
|
|
Flecha derecha
|
Desplaza el punto de inserción a la derecha dentro del cuadro de texto.
|
|
Mayús+Tabulador
|
Desplaza la selección al objeto anterior.
|
|
Tabulador
|
Desplaza la selección al objeto siguiente.
|
|
Flecha arriba
|
El valor cambia en una unidad.
|
Para obtener más información sobre el control de la selección, consulte la clase FocusManager en la
Referencia de ActionScript 3.0
para Flash Professional
y en
Trabajo con FocusManager
.
Parámetros del componente NumericStepper
A continuación se indican los parámetros que se pueden definir para cada instancia de NumericStepper en el inspector de propiedades o en el inspector de componentes:
maximum
,
minimum
,
stepSize
y
value
. Cada uno de estos parámetros tiene una propiedad de ActionScript del mismo nombre. Para obtener información sobre los valores posibles de estos parámetros, consulte la clase NumericStepper en la
Referencia de ActionScript 3.0
para Flash Professional
.
Creación de una aplicación con el componente NumericStepper
El siguiente procedimiento explica cómo añadir un componente NumericStepper a una aplicación durante la edición. En el ejemplo se colocan un componente NumericStepper y un componente Label en el escenario y se crea un detector de eventos para un evento
Event
.
CHANGE
en la instancia de NumericStepper. Si el valor del componente NumericStepper cambia, el ejemplo muestra el nuevo valor en la propiedad
text
de la instancia de Label.
-
Arrastre un componente NumericStepper desde el panel Componentes al escenario.
-
En el inspector de propiedades, introduzca el nombre de instancia
aNs
.
-
Arrastre un componente Label desde el panel Componentes al escenario.
-
En el inspector de propiedades, introduzca el nombre de instancia
aLabel
.
-
Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente:
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;
};
En este ejemplo, se establece la propiedad
text
de la etiqueta en el valor de NumericStepper. La función
changeHandler()
actualiza la propiedad
text
de la etiqueta cuando cambia el valor de la instancia de NumericStepper.
-
Seleccione Control > Probar película.
Creación de un componente NumericStepper con ActionScript:
En este ejemplo se crean tres componentes NumericStepper con código ActionScript, para introducir el mes, el día y el año de la fecha de nacimiento del usuario. También se añaden componentes Label para un mensaje de solicitud y para identificadores de cada uno de los componentes NumericStepper.
-
Cree un nuevo documento de Flash (ActionScript 3.0).
-
Arrastre un componente Label al panel Biblioteca.
-
Arrastre un componente NumericStepper al panel Biblioteca.
-
Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente:
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);
-
Seleccione Control > Probar película para ejecutar la aplicación.
|
|
|
