Mashup Builder > Widgets > Widgets estándar > Widget de corredera (con temas)
Widget de corredera (con temas)
En el widget de barra corredera se muestra un elemento de corredera que permite a los usuarios introducir una entrada numérica en un mashup. Se puede activar la selección de rangos para permitir que los usuarios especifiquen un valor mínimo y uno máximo.
Anatomía de widgets
En la siguiente figura se muestran las distintas partes del widget de barra corredera.
1. Rótulo de widget
2. Rótulo de valor
3. Punto de control de arrastre
4. Pista corredera
5. Rótulo de valor mínimo y máximo
* 
El widget de barra corredera está disponible como widget estándar en la plataforma y como componente Web que se puede importar desde un SDK.
Activación del modo de selección de rangos
La propiedad RangeSelection del widget se puede activar para permitir a los usuarios seleccionar un rango de valores en tiempo de ejecución. Cuando se activa la selección de rangos, se utilizan dos puntos de control para indicar el inicio y el final del rango de valores de la corredera. Estos valores se pueden especificar mediante las propiedades Value y EndValue del widget. Para ejecutar servicios basados en cambios en el valor de la corredera, enlace los eventos ValueChanged y EndValueChanged a otros widgets, funciones o servicios de datos en el mashup. Por ejemplo, se puede definir un rango de valores para filtrar los datos de un servicio que recupere información sobre los recursos disponibles en un plano de fábrica.
Activación del modo de paso
Se puede activar el modo de paso incremental en la pista deslizante definiendo la propiedad Stepping Mode del widget en verdadero. La definición de pasos incrementales en la corredera ayuda a los usuarios a comprender la escala de los valores de pista y facilita la colocación del punto de control en un valor específico. El incremento se puede definir en la corredera de una de las siguientes maneras:
Para dividir la pista en incrementos, utilice la propiedad NumberOfSteps.
Para definir el tamaño de paso, utilice la propiedad StepSize.
Por ejemplo, se pueden definir incrementos de 5 minutos para un widget de corredera que defina el tiempo que se tarda en actualizar los datos en un mashup. En tiempo de ejecución, el punto de control se ajusta automáticamente a los pasos que se definen a lo largo de la trayectoria de la corredera.
Activación del modo vertical
El modo vertical se puede activar definiendo la propiedad VerticalSlider del widget en verdadero.
Activación del valor editable
El modo de edición de valores se puede activar definiendo la propiedad EditableValue del widget en verdadero. En esta configuración, los usuarios pueden escribir un valor en el rótulo de valor sin mover el punto de control. Para cambiar el valor de la corredera, pulse dos veces en el rótulo de valor y, a continuación, escriba un valor. La posición del punto de control cambia automáticamente en función del nuevo valor.
Estilo del widget
Se pueden editar todas las propiedades de estilo en el panel Propiedades de estilo. Se puede personalizar el color, la fuente, la forma y los tamaños del widget de múltiples piezas en distintos estados.
La categoría Slider permite editar el fondo, el primer plano y el color de barra.
La categoría Thumb permite editar el estilo y el color del control deslizante o del punto de control de arrastre.
La categoría Min-Max Label permite editar el estilo de la fuente del rótulo y el color del rótulo máximo y mínimo.
La categoría Track permite a los usuarios editar el color del fondo de la pista.
Propiedades de los widgets
En la siguiente tabla se muestran las propiedades de los widgets de barra corredera.
Nombre de la propiedad
Descripción
Tipo base
Valor por defecto
¿Es enlazable? (Sí/No)
¿Es localizable? (Sí/No)
label
El texto que aparece en el rótulo de la corredera.
STRING
N/D
S
S
labelAlignment
Permite alinear el rótulo del widget según los valores de Izquierda, Derecha o Centro.
STRING
Izquierda
S
N
LabelType
Permite definir el tipo de rótulo como Cabecera, Subcabecera, Rótulo o Cuerpo.
STRING
Rótulo
S
N
Value
Permite definir o enlazar el valor de la corredera.
* 
Este valor de propiedad se define como el valor inicial cuando se activa la selección de rango en la corredera.
NUMBER
N/D
S
N
CustomClass
Permite definir la CSS en el elemento div superior del widget. Al introducir varias clases, sepárelas mediante un espacio.
STRING
N/D
S
N
TabSequence
Permite definir la secuencia en la que se realza el widget cuando se pulsa el tabulador.
NUMBER
N/D
N
No
EndValue
El valor de la corredera para el segundo punto de control en el modo de selección de rango.
NUMBER
N/D
S
N
EndValueChanged
Permite activar un evento cuando se cambia el valor final de la corredera.
N/D
N/D
S
N
Minimum
Permite definir el valor mínimo de la corredera.
NUMBER
0
N
Maximum
Permite definir el valor máximo de la corredera.
NUMBER
100
S
N
SteppingMode
Seleccione esta acción para desplazar la barra corredera por un número específico de pasos para cada pulsación.
BOOLEAN
Falso
N
No
StepSize
Permite definir el cambio en el valor para cada paso que se desplaza la corredera.
* 
Esta propiedad solo está disponible en SteppingMode.
El valor de esta propiedad se reemplaza y redefine cuando se define un valor para la propiedad NumberOfSteps.
NUMBER
N/D
S
N
NumberOfSteps
Permite definir el número de pasos que la corredera se desplaza en cada pulsación.
* 
Esta propiedad solo está disponible en SteppingMode.
El valor de esta propiedad se reemplaza y redefine cuando se define un valor para la propiedad StepSize.
NUMBER
N/D
S
N
ValuePrecision
Permite definir el número de dígitos que se deben mostrar después del punto decimal para el valor de la corredera.
NUMBER
N/D
N
No
DisplayValueLabel
Permite definir la opción de visualización para el rótulo de valor de la corredera en , No o Al arrastrar.
STRING
N
No
EditableValue
Permite mover el punto de control editando el rótulo de valor en el mashup.
BOOLEAN
Falso
N
No
DisplayMinMaxLabels
Permite mostrar los rótulos de los valores mínimo y máximo.
BOOLEAN
Verdadero
No
No
HandleSize
Permite definir el tamaño del punto de control en píxeles.
NUMBER
N/D
N
No
TrackSize
Permite definir el tamaño de la pista en píxeles.
NUMBER
N/D
N
No
TrackAlignment
Permite alinear la pista según los valores de Centro, Inicio o Fin de la corredera.
STRING
Centro
N
No
FullTrack
Permite extender la pista de la corredera para que contenga completamente el icono de punto de control.
BOOLEAN
Falso
S
N
MinValueLabel
Permite especificar el rótulo para el valor mínimo.
STRING
MIN
S
S
MaxValueLabel
Permite especificar el rótulo para el valor máximo.
STRING
MAX
S
S
HandleIcon
Permite controlar la forma del icono del punto de control como Ninguno, Círculo o Dividir.
STRING
Círculo
N
No
SecondHandleIcon
Permite seleccionar una entidad multimedia para el segundo icono de punto de control como Ninguno, Círculo o Dividir.
STRING
Círculo
N
No
MinSideIcon
Permite especificar un icono para el lado mínimo.
MEDIA ENTITY
N/D
N
No
MinIconSize
Permite controlar el tamaño del icono de valor mínimo. Opciones: Pequeño, Mediano, Grande o Extragrande
STRING
Medio
S
N
MaxSideIcon
Permite seleccionar un icono para el lado máximo.
MEDIA ENTITY
N/D
N
No
MaxIconSize
Permite controlar el tamaño del icono de valor máximo. Opciones: Pequeño, Mediano, Grande o Extragrande
STRING
N/D
S
N
RangeSelection
Permite añadir un segundo punto de control y activar la selección de rango en la corredera.
BOOLEAN
Falso
N
No
VerticalSlider
Permite cambiar la orientación de la corredera a vertical.
BOOLEAN
Falso
N
No
ReverseMinMaxValues
Permite invertir la posición de los valores mínimo y máximo.
BOOLEAN
Falso
N
No
ReverseLabelPosition
Permite invertir las posiciones de los rótulos de los valores mínimo y máximo.
BOOLEAN
Falso
N
No
OverlapHandle
Permite activar el solapado entre el punto de control de la corredera cuando está activada la selección de rango.
BOOLEAN
Falso
N
No
ValueChanged
Permite activar un evento cuando se cambia el valor de la corredera.
N/D
N/D
S
N
Increment
Un servicio enlazable que incrementa el valor de la corredera.
N/D
N/D
S
N
Decrement
Un servicio enlazable que reduce el valor de la barra corredera.
N/D
N/D
S
N
IncrementSecondHandle
Un servicio enlazable que incrementa el valor del segundo punto de control cuando se activa el modo de selección de rango.
N/D
N/D
S
N
DecrementSecondHandle
Un servicio enlazable que reduce el valor del segundo punto de control cuando se activa el modo de selección de rango.
N/D
N/D
S
N
Disabled
Permite desactivar el widget en el mashup. El widget permanece visible pero no es interactivo.
BOOLEAN
Falso
S
N
HandleTooltipField
Permite mostrar un texto de sugerencia al pasar por encima del punto de control de la barra corredera.
STRING
N/D
S
S
HandleTooltipIcon
Permite definir una imagen de icono para la sugerencia del punto de control de la corredera.
MEDIA ENTITY
N/D
N
No
SecondHandleTooltipField
Permite mostrar un texto de sugerencia al pasar por encima del segundo punto de control de la barra corredera.
* 
Esta propiedad aparece al seleccionar RangeSelection.
STRING
N/D
S
S
SecondHandleTooltipIcon
Permite definir una imagen de icono para la sugerencia del segundo punto de control de la barra corredera.
* 
Esta propiedad aparece cuando se activa la selección de rangos.
MEDIA ENTITY
N/D
N
No
Validación de datos de widgets de corredera
Se pueden utilizar las propiedades de validación para definir un valor mínimo y máximo al utilizar una selección única o una selección de rangos:
Para configurar el mensaje de fallo por defecto, utilice las propiedades MinValueFailureMessgae y MaxValueFailureMessgae.
Para obtener más información sobre las propiedades de validación comunes, consulte Aplicación de validación a widgets.
En la siguiente tabla se enumeran las propiedades de validación que están disponibles en el panel Validación de ThingWorx 9.3.4 o versiones posteriores.
Propiedad
Descripción
Tipo base
Valor por defecto
Enlazable (Sí/No)
Localizable (Sí/No)
CriteriaMessage
El mensaje que se mostrará para los criterios de validación y cuando la validación falla.
STRING
n/d
S
S
CriteriaMessageDetails
Los detalles que se mostrarán para los criterios de validación y el mensaje de fallo.
STRING
n/d
S
S
MaxValidValue
El valor de corredera máximo que los usuarios pueden definir en la validación.
STRING
n/d
S
N
MaxValueFailureMessage
Mensaje que se debe mostrar cuando el valor de la corredera es mayor que el valor máximo válido.
NUMBER
${value} is the maximum value
S
S
MinValidValue
El valor mínimo de la corredera en el que los usuarios pueden definir la validación.
STRING
n/d
S
N
MinValueFailureMessgae
Mensaje que se debe mostrar cuando el valor de la corredera es inferior al valor mínimo válido.
NUMBER
${value} is the minimum value
S
S
ShowValidationCriteria
Permite mostrar un mensaje de sugerencia acerca de la entrada necesaria al editar la corredera.
BOOLEAN
Falso
S
N
ShowValidationFailure
Permite mostrar un mensaje de fallo cuando los valores introducidos no superan la validación.
BOOLEAN
Falso
S
N
ShowValidationSuccess
Permite mostrar un mensaje de operación correcta cuando los valores introducidos se validan como correctos.
BOOLEAN
Falso
S
N
SucessMessgae
Mensaje que se debe mostrar cuando el valor es válido.
STRING
n/d
S
S
SuccessMessageDetails
Un mensaje secundario en el que se muestra más información sobre el mensaje de validación de operación correcta.
STRING
n/d
S
S
Validate
Un evento enlazable que se activa cuando se cambia el valor del widget. Este evento se debe enlazar a un servicio o función para aplicar un patrón o expresión de validación.
evento
n/d
S
N
ValidationCriteriaIcon
Permite seleccionar un icono SVG que se mostrará dentro del mensaje de sugerencia para los criterios de validación.
IMAGELINK
info
N
No
ValidationFailureIcon
Permite definir el icono SVG que se mostrará en el mensaje de estado cuando falle la validación.
IMAGELINK
error
N
No
ValidationOutput
Permite recuperar el resultado de la validación del widget. Los valores devueltos son Undefined, Unvalidated, Valid o Invalid.
STRING
n/d
S
N
ValidationState
Una propiedad enlazable que permite definir el estado de validación. Esta propiedad se puede definir en Undefined Unvalidated Valid, Invalid.
STRING
Undefined
S
N
ValidationSuccessIcon
Permite seleccionar un icono SVG que se mostrará dentro del mensaje de estado cuando la validación sea correcta.
IMAGELINK
success
N
No
¿Fue esto útil?