Widget de galería de medios (con temas)
El widget de galería de medios (con temas) permite mostrar una colección de elementos multimedia, como imágenes en formato de galería. Este widget soporta los bucles, modo de pantalla completa y enlace de datos dinámicos, por lo que resulta útil para crear mashups que se utilizan para mostrar varias imágenes.
 |
La Galería de medios está disponible como widget y como componente Web que se puede personalizar e importar desde ThingWorx Web Component SDK.
|
Anatomía
En el widget de galería de medios se incluyen los siguientes componentes:
1. Rótulo de widget
2. Panel Galería: el área principal en la que se muestran los elementos multimedia.
3. Flechas de navegación: controles que permiten a los usuarios inspeccionar manualmente los elementos multimedia.
4. Banda de imágenes reducidas: fila opcional de imágenes reducidas que se puede añadir para obtener una vista previa de los elementos multimedia de la galería.
5. Contador de galería: permite mostrar el número de secuencia del elemento multimedia actual y el total de elementos de la galería.
6. Botón de pantalla completa: un control que permite expandir el widget para ver imágenes en modo de pantalla completa.
7. Título del medio
8. Descripción del medio
Formato de los datos
Para mostrar una galería de medios, se debe crear un servicio que devuelva datos de infotable con los siguientes campos.
Nombre del campo | Tipo base | Descripción |
|---|---|---|
description | STRING | Opcional. La descripción del elemento multimedia. |
title | STRING | Opcional. El título del elemento multimedia. |
url | STRING | Obligatorio. El URL del elemento multimedia. |
También se pueden introducir manualmente valores para la galería de medios mediante el botón Añadir situado junto a la propiedad del widget Data.
Adición y configuración del widget
Para añadir y configurar el widget de galería de medios, realice los siguientes pasos:
1. Arrastre y suelte el widget desde el panel Widgets en un contenedor del lienzo.
2. Cambie el tamaño y la posición del widget según sea necesario para que se ajuste al diseño.
3. Enlace la propiedad Data a un origen de datos de infotable que contenga los elementos multimedia que desee mostrar.
4. Configure propiedades adicionales en el panel Propiedades:
5. Guarde el mashup y obtenga una vista previa para verificar la funcionalidad del widget.
Visualización de imágenes reducidas de vista previa
Defina la propiedad ShowThumbnails en true para mostrar una banda de imágenes reducidas de vista previa debajo de los medios actuales. Estas imágenes reducidas permiten a los usuarios navegar rápidamente a elementos multimedia específicos. Asegúrese de que el origen de datos incluya las imágenes de vista previa adecuadas.
Configuración del modo de pantalla completa
El widget de galería de medios soporta el modo de pantalla completa, lo que permite ver los elementos de la galería en una vista de pantalla completa. En tiempo de ejecución, se puede entrar en este modo pulsando en el botón de pantalla completa. Para cerrar la vista de pantalla completa, pulse el botón ESCAPE pulsando el botón de salida. Además, se pueden configurar las siguientes propiedades para este modo:
• Para mostrar los rótulos de elementos multimedia, defina la propiedad ShowLabelInFullScreen en true.
• Para mostrar la imagen reducida de la galería en este modo, defina la propiedad ShowThumbnailsInFullScreen en true.
Bucle de la galería
Para activar el bucle continuo de los elementos multimedia, defina la propiedad LoopGallery en true. De este modo, la galería puede recorrer automáticamente todos los elementos y volver al principio.
Adición de títulos y descripciones a elementos multimedia
La adición de títulos y descripciones a los datos de la infotable proporciona contexto y mejora la accesibilidad para cada elemento multimedia de la galería. En el siguiente ejemplo se muestra un elemento multimedia seleccionado con un título y una descripción. Item 2 es el título del medio y la descripción aparece junto a él.
Se puede ocultar el título o la descripción de los elementos de la galería de medios mediante las propiedades HideMediaTitle y HideMediaDescription.
Propiedades de los widgets
En la siguiente tabla se enumeran las propiedades del widget.
Nombre de la propiedad | Descripción | Tipo base | Valor por defecto | ¿Es enlazable? | ¿Es localizable? |
|---|---|---|---|---|---|
Label | Permite especificar el texto del rótulo del widget. | STRING | N/D | S | S |
LabelType | Permite definir el tipo de rótulo que se debe mostrar para el widget. | STRING | Cabecera | N | N |
LabelAlignment | Permite alinear el texto del rótulo a la izquierda, derecha o centro del widget. Opciones: izquierda/centro/derecha | STRING | Izquierda | N | N |
ShowThumbnails | Se muestran las imágenes reducidas de los elementos multimedia en la vista de carrusel. | BOOLEAN | Falso | S | N |
ShowThumbnailsInFullScreen | Se muestran las imágenes reducidas de los elementos multimedia en modo de pantalla completa. | BOOLEAN | Falso | S | N |
LoopGallery | Permite recorrer en bucle los elementos multimedia para una reproducción continua. Cuando esta propiedad está activada, al pulsar en el botón Siguiente del último elemento se vuelve al primer elemento. | BOOLEAN | Falso | S | N |
Data | El origen de datos de infotable para el widget. | INFOTABLE | N/D | S | N |
ShowLabelInFullScreen | Permite mostrar el rótulo del soporte en modo de pantalla completa. | BOOLEAN | Falso | S | N |
HideMediaDescription | Permite ocultar los títulos de los medios. | BOOLEAN | Falso | S | N |
HideMediaTitle | Permite ocultar las descripciones de los medios. | BOOLEAN | Falso | S | N |
MediaDescriptionLableType | Permite definir el tipo de rótulo que se debe mostrar para la descripción del elemento. | STRING | Cuerpo | N | N |
MediaTitleLableType | Permite definir el tipo de rótulo que se debe mostrar para el título del elemento. | STRING | Título grande |