Saltar al contenido principal

MaskedNumberField

Abrir en ChatGPT
Sombra dwc-numberfield 24.10
Java API

El MaskedNumberField es una entrada de texto diseñada para la entrada numérica estructurada. Asegura que los números estén formateados de manera consistente según una máscara definida, lo que lo hace especialmente útil para formularios financieros, campos de precios o cualquier entrada donde la precisión y la legibilidad sean importantes.

Este componente admite formateo de números, localización de caracteres decimales/de agrupamiento y restricciones opcionales de valor como mínimos o máximos.

Básicos

El MaskedNumberField se puede instanciar con o sin parámetros. Admite establecer un valor inicial, una etiqueta, un marcador de posición y un oyente de eventos para reaccionar a los cambios de valor.

Esta demostración muestra un Calculador de Propinas que utiliza MaskedNumberField para una entrada numérica intuitiva. Un campo está configurado para aceptar un monto de factura formateado, mientras que el otro captura un porcentaje de propina de número entero. Ambos campos aplican máscaras numéricas para asegurar un formato consistente y predecible.

Mostrar Código

Reglas de máscara

El MaskedNumberField utiliza una cadena de máscara para controlar cómo se formatea y se muestra la entrada numérica. Cada carácter en la máscara define un comportamiento de formateo específico, lo que permite un control preciso sobre cómo aparecen los números.

Aplicando máscaras programáticamente

Para formatear números con la misma sintaxis de máscara fuera de un campo, por ejemplo, al renderizar datos en una Table, utiliza la clase utilitaria MaskDecorator.

Caracteres de máscara

CarácterDescripción
0Siempre reemplazado por un dígito (0–9).
#Suprime los ceros a la izquierda. Reemplazado por el carácter de relleno a la izquierda del punto decimal. Para los dígitos finales, reemplazado por un espacio o cero. De lo contrario, reemplazado por un dígito.
,Usado como separador de agrupamiento (p. ej. miles). Reemplazado por el carácter de relleno si no hay dígitos que lo precedan. De lo contrario, se muestra como una coma.
-Muestra un signo menos (-) si el número es negativo. Reemplazado por el carácter de relleno si es positivo.
+Muestra + para números positivos o - para números negativos.
$Siempre resulta en un signo de dólar.
(Inserta un paréntesis izquierdo ( para valores negativos. Reemplazado por el carácter de relleno si es positivo.
)Inserta un paréntesis derecho ) para valores negativos. Reemplazado por el carácter de relleno si es positivo.
CRMuestra CR para números negativos. Muestra dos espacios si el número es positivo.
DRMuestra CR para números negativos. Muestra DR para números positivos.
*Inserta un asterisco *.
.Marca el punto decimal. Si no aparece ningún dígito en la salida, reemplazado por el carácter de relleno. Después del decimal, los caracteres de relleno se tratan como espacios.
BSiempre se convierte en un espacio. Cualquier otro carácter literal se muestra tal como está.

Algunos de los caracteres anteriores pueden aparecer más de una vez en la máscara para formatear. Estos incluyen -, +, $ y (. Si alguno de estos caracteres está presente en la máscara, el primero que se encuentre se moverá a la última posición donde un # o , fue reemplazado por el carácter de relleno. Si no existe tal posición, el carácter doble se deja donde está.

Sin Redondeo Automático

Una máscara dentro de un campo NO redondea. Por ejemplo, al colocar un valor como 12.34567 en un campo que está enmascarado con ###0.00, obtendrás 12.34.

Separadores de grupo y decimal

El MaskedNumberField admite la personalización de los caracteres de agrupamiento y decimal, lo que facilita adaptar el formateo numérico a diferentes convenciones locales o comerciales.

  • El separador de grupo se usa para separar visualmente los miles (p. ej. 1,000,000).
  • El separador decimal indica la parte fraccionaria de un número (p. ej. 123.45).

Esto es útil en aplicaciones internacionales donde diferentes regiones utilizan diferentes caracteres (p. ej. . vs ,).

field.setGroupCharacter(".");   // p. ej. 1.000.000
field.setDecimalCharacter(","); // p. ej. 123,45
Comportamiento Predeterminado

Por defecto, MaskedNumberField aplica separadores de grupo y decimal en función de la configuración regional actual de la aplicación. Puedes anularlos en cualquier momento utilizando los setters proporcionados.

Negable

El MaskedNumberField admite una opción para controlar si se permiten números negativos.

Por defecto, se permiten valores negativos como -123.45. Para evitar esto, usa setNegateable(false) para restringir la entrada solo a valores positivos.

Esto es útil en escenarios comerciales donde valores como cantidades, totales o porcentajes deben ser siempre no negativos.

field.setNegateable(false);

Cuando negatable se establece en false, el campo bloquea cualquier intento de ingresar un signo menos o de otro modo ingresar valores negativos.

Mostrar Código

Valores mínimo y máximo

El MaskedNumberField admite establecer límites numéricos utilizando setMin() y setMax(). Estas restricciones ayudan a garantizar que la entrada del usuario se mantenga dentro de un rango válido y esperado.

  • Valor Mínimo
    Usa setMin() para definir el número aceptable más bajo:

    field.setMin(10.0); // Valor mínimo: 10

    Si el usuario ingresa un número por debajo de este umbral, se considerará inválido.

  • Valor Máximo
    Usa setMax() para definir el número aceptable más alto:

    field.setMax(100.0); // Valor máximo: 100

    Los valores por encima de este límite se marcarán como inválidos.

Restaurar el valor

El MaskedNumberField admite una función de restauración que restablece el valor del campo a un estado predefinido. Esto puede ser útil cuando los usuarios necesitan deshacer cambios, revertir ediciones accidentales o regresar a un valor predeterminado conocido.

Para habilitar este comportamiento, define el valor objetivo utilizando setRestoreValue(). Cuando sea necesario, el campo se puede restablecer programáticamente utilizando restoreValue().

numberField.setRestoreValue(1500.00);
numberField.restoreValue();

Maneras de restaurar el valor

  • Programáticamente utilizando restoreValue()
  • A través del teclado, presionando ESC (esta es la tecla de restauración predeterminada a menos que se anule)

El valor de restauración debe establecerse explícitamente. Si no se define, la función no revertirá el campo.

Mostrar Código

MaskedNumberFieldSpinner

El MaskedNumberFieldSpinner extiende MaskedNumberField al agregar controles de spinner que permiten a los usuarios aumentar o disminuir el valor utilizando botones de paso o teclas de flecha. Esto es ideal para entradas como cantidades, ajustes de precios, controles de calificación o cualquier escenario donde los usuarios realicen cambios incrementales.

Mostrar Código

Características clave

  • Incrementos de paso
    Usa setStep() para definir cuánto debería cambiar el valor con cada giro:

    spinner.setStep(5.0); // Cada giro suma o resta 5
  • Controles interactivos
    Los usuarios pueden hacer clic en los botones del spinner o utilizar la entrada del teclado para ajustar el valor.

  • Todas las funciones de MaskedNumberField
    Admite completamente máscaras, formateo, caracteres de agrupamiento/decimal, restricciones mínimas/máximas y lógica de restauración.

Estilo

Loading...