Flex - Control numérico paso a paso

El control NumericStepper le permite seleccionar un número de un conjunto ordenado. NumericStepper proporciona un control TextInput para que pueda editar directamente el valor del componente.

El control NumericStepper también proporciona un par de botones de flecha para recorrer los valores posibles. Las teclas de flecha arriba y flecha abajo y la rueda del mouse también recorren los valores.

Declaración de clase

A continuación se muestra la declaración de spark.components.NumericStepper clase -

public class NumericStepper 
   extends Spinner 
      implements IFocusManagerComponent, IIMESupport

Propiedades publicas

No Señor	Descripción de propiedad
1	enableIME : Boolean [solo lectura] Un indicador que indica si el IME debe habilitarse cuando el componente recibe el foco.
2	imeMode : String Especifica el modo IME (Editor de métodos de entrada).
3	maxChars : int El número máximo de caracteres que se pueden ingresar en el campo.
4	maximum : Number [anular] Número que representa el valor máximo posible para el valor.
5	valueFormatFunction : Function Función de devolución de llamada que formatea el valor que se muestra en la propiedad textDisplay del aspecto.
6	valueParseFunction : Function Función de devolución de llamada que extrae el valor numérico del valor mostrado en el campo textDisplay del aspecto.

Métodos públicos

No Señor	Método y descripción
1	NumericStepper() Constructor.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

spark.components.Spinner
spark.components.supportClasses.Range
spark.components.supportClasses.SkinnableComponent
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Ejemplo de control Flex DropDownList

Sigamos los siguientes pasos para verificar el uso del control DropDownList en una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />  
   <s:BorderContainer width = "550" height = "400" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Form Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "numbericStepperPanel" title = "Using NumericStepper"
            width = "420" height = "200">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>
            <s:NumericStepper id = "numericStepper" width = "150"
               value = "0" stepSize = "5" minimum = "0" maximum = "50" />
            
            <s:HGroup>
               <s:Label text = "Selected Value :" /> 
               <s:Label text = "{numericStepper.value}" fontWeight = "bold" />
            </s:HGroup>				
         </s:Panel>		
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]

↰ Previous page