Tutor de edición numérica

El ejemplo vamos a centrarlo en el uso del control de formularios edición numérica.
Los objetos de aplicación específicos de este tutor los encontraremos en la carpeta tutores/controles/edición numérica del proyecto de aplicación de vTutor. Nos centraremos en las propiedades que se pueden configurar en un control de edición numérica:
Valor incremento: permite establecer el valor en el que se incrementará/reducirá el contenido del control al pulsar las teclas de movimiento de cursor arriba y abajo o los botones de los microscrollers del control en el caso de que estén visibles. Podremos introducir valores decimales. Si dejamos el valor 0 el sistema asumirá 1 como valor de incremento.
Formato local: esta propiedad permite definir si queremos que se aplique un formato local del sistema operativo en el que se muestra el control o no. Los valores posibles son:
Ninguno: no se aplicará ningún formato.
Local: aplica la configuración de número que se tenga establecida en el sistema en el que se visualiza el dato.
Moneda: aplica el formato de moneda (número de decimales, separador de miles y decimal) para el idioma en el que se está ejecutando la instancia.
Tipo de botones: cuando en un control de este tipo editamos un campo de un maestro, el sistema incluye automáticamente unos botones arriba y abajo (microscrollers) que nos permitirán navegar por la tabla maestra desde el control. En esta propiedad podremos configurar el aspecto de esos botones. Los valores posibles son:
Arriba/abajo: es el valor por defecto. El contenido de los botones será una flecha hacia arriba y otra hacia abajo, respectivamente.
Según estilo: se usará el estilo que en el estilo visual seleccionado se aplique a los microscrollers.
Ocultos: no se mostrarán los microscrollers.
Prefijo: permite anteponer un prefijo al contenido del control. Dicho prefijo se establecerá mediante una fórmula que podremos escribir usando el asistente para edición de fórmulas. Para ello pulsar el botón 
 que aparece al editar esta propiedad. Podríamos usarlo, por ejemplo, para indicar el símbolo de la moneda. Esta fórmula solamente será evaluada al crearse el formulario.
Sufijo: permite añadir al contenido del control un sufijo. Dicho sufijo se establecerá mediante una fórmula que podremos escribir usando el asistente para edición de fórmulas. Para ello pulsar el botón 
 que aparece al editar esta propiedad. Podríamos usarlo, por ejemplo, para indicar el símbolo de la moneda. Esta fórmula solamente será evaluada al crearse el formulario.
Número de decimales: permite editar un campo o una variable numérica con un número de decimales diferente al definido en sus propiedades. Tiene sentido para recortar el número de decimales con respecto a los definidos en las propiedades del campo o en la variable; puede suceder que internamente trabajemos con cuatro decimales y al usuario nos interese mostrar solamente dos. En el caso de que especifiquemos un número de decimales mayor al definido en las propiedades del campo/variable, serán despreciados los que sobrepasen el rango establecido. Esta fórmula solamente será evaluada al crearse el formulario.
El número máximo de decimales permitidos en esta propiedad es de 6.
Si dejamos vacía la propiedad el contenido del campo/variable será presentado con el número de decimales definido en sus propiedades.
Además, a un campo o a una variable de tipo numérico se le pueden asignar un rango máximo y mínimo que puede tener dicho campo/variable. Esto se configura en las propiedades del propio campo o de la variable:
​

En ambos casos, los valores máximo y mínimo se han de establecer con un valor fijo.
En este tutor lo que hemos hecho ha sido crear en el formulario del tutor llamado TUT_EDI_NUM, una variable local de tipo numérico, llamada NUM y hemos creado un control de edición numérica para editarla. Al control, de las propiedades indicadas anteriormente, solamente hemos modificado una: la propiedad formato local para que haga uso del formato local del sistema en ejecución. En resto de las propiedades las hemos dejado a 0 o vacías; lo hemos hecho así para poder hacer la prueba de forma dinámica, Para ello también se incluyen controles al formulario para que el usuario pueda especificar un prefijo, un sufijo, número de decimales etc. y se ha programado un proceso JavaScript para que las aplique.
Las variables que se han definido son:
MAX: para especificar el valor máximo que podrá adoptar la variable (si dejamos 0 no tendrá limitación).
MIN: para especificar el valor mínimo.
NUM_DEC: para especificar el número de decimales que se pintarán en el control.
OCU_BTN: un checkbox para mostrar/ocultar los botones del control.
PRE: para especificar el prefijo a mostrar en el control.
SUF: para especificar el sufijo a mostrar en el control.
VAL_INC: para especificar el valor en el que se incrementará/reducirá el contenido del control al pulsar las teclas de movimiento de cursor arriba y abajo o los botones de los microscrollers del control en el caso de que estén visibles.
Y hemos programado un manejador de evento en JavaScript para que se apliquen los cambios según modifiquemos alguna de las variables anteriores:
1
//Aplicar formato al control de edición numérica
2
​
3
//Accedemos al root del formulario en curso
4
form = theRoot.dataView();
5
​
6
//Accedemos al control de edición numérica
7
var edNum = form.control("ED_NUM");
8
​
9
//Aplicar el valor de incremento
10
edNum.singleStep = theRoot.varToInt("VAL_INC");
11
​
12
//Aplicar número de decimales
13
edNum.decimals = theRoot.varToInt("NUM_DEC");
14
​
15
//Aplicar prefijo
16
edNum.prefix = theRoot.varToString("PRE");
17
​
18
//Aplicar sufijo
19
edNum.suffix = theRoot.varToString("SUF");
20
​
21
//Aplicar el valor máximo
22
if (theRoot.varToInt("MAX")!=0){
23
    edNum.maximum = theRoot.varToInt("MAX");
24
    //Aplicar el valor mínimo
25
    edNum.minimum = theRoot.varToInt("MIN");
26
}
27
else {
28
    //Quitamos el límite máximo al control si su valor es 0
29
    new Number(0);
30
    edNum.maximum = Number.MAX_VALUE;
31
}
32
​
33
​
34
//Ocultar botones
35
if (theRoot.varToBool("OCU_BTN")==1) {
36
    edNum.buttonSymbols = "NoButtons";
37
}
38
else {
39
    edNum.buttonSymbols = "UpDownArrows";
40
}
Copied!
El manejador de evento se ejecutará cuando cambie el contenido de los controles donde editamos esas variables locales, para ello se ha creado una conexión de evento para cada control que se disparará con la señal value changed.

Tutor de controles SVG

Tutor de visor html dinámico

Última actualización 1yr ago

Copiar enlace