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.
| 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 | Sí | 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.
| NUMBER | N/D | S | N | ||
NumberOfSteps | Permite definir el número de pasos que la corredera se desplaza en cada pulsación.
| 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 Sí, No o Al arrastrar. | STRING | Sí | 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.
| STRING | N/D | S | S | ||
SecondHandleTooltipIcon | Permite definir una imagen de icono para la sugerencia del segundo punto de control de la barra corredera.
| 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.
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 |
ShowValidationState | Un servicio enlazable que permite mostrar el estado de validación antes de que un usuario interactúe con el widget en tiempo de ejecución. Por defecto, el estado de validación solo se muestra tras la interacción del usuario. | Servicio | n/d | Dentro | 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 |