Saltar al contenido

Widget Visor de imágenes en Jitterbit App Builder

El widget Visor de imágenes muestra una imagen con parámetros de tamaño adicionales. Se incluye como parte de la colección de App Builder, por lo que no requiere descargar ni cargar un archivo de widget.

Agregar el widget Visor de imágenes

  1. Abre el control usando el Live Designer o el App Workbench. Para ver los pasos, consulta Convertir un control existente a un control de imagen.

  2. En la pestaña Image, establece Image Purpose en Photo.

  3. En la pestaña Edge Case, usa el menú desplegable Widget para seleccionar Image Viewer. Aparece una nueva sección Widget Properties debajo de Edge Case.

  4. En Widget Properties, configura los siguientes campos:

    • Interface Mode: Selecciona Always o Mobile Only.

    • Active Mode: Selecciona Edit Only, View and Edit o View Only.

  5. Haz clic en Save.

  6. (Opcional) Para establecer parámetros del widget:

    1. Junto al campo Widget, haz clic en el botón Param. Se abre el diálogo Widget Parameters.

    2. Haz clic en Create. El diálogo cambia a la vista Widget Parameter. Configura los siguientes campos:

      • Widget Parameter: Selecciona un parámetro del menú desplegable. El valor Default y una descripción de los valores del parámetro aparecen en el formulario.

      • Parameter Type: Selecciona Column, Control o Static Value. Los campos restantes dependen del tipo que selecciones. Para obtener detalles sobre cada tipo, consulta Widget API.

      • Use Formatted Value: Déjalo marcado (predeterminado) para usar el valor de visualización formateado.

      • Active: Déjalo marcado (predeterminado) para aplicar el parámetro.

    3. Haz clic en Save.

Para eliminar el widget, haz clic en la x junto al campo Widget y luego haz clic en Save.

Parámetros

Este widget admite los siguientes parámetros. Los parámetros con el sufijo Grid se aplican a paneles de estilo cuadrícula.

Parámetro Predeterminado Descripción
autoResize 0 Redimensiona la imagen automáticamente cuando se redimensiona el panel, como cuando un usuario maximiza un panel.
height auto Altura de la imagen.
heightGrid 5 Altura de la imagen en paneles de estilo cuadrícula.
maxWidth 95% Ancho máximo de la imagen.
maxWidthGrid 95% Ancho máximo de la imagen en paneles de estilo cuadrícula.
minHeight auto Altura mínima de la imagen.
minHeightGrid 5 Altura mínima de la imagen en paneles de estilo cuadrícula.
objectFit contain Cómo la imagen se ajusta al área del control.
objectPosition auto Se usa con objectFit para especificar cómo se posiciona la imagen con coordenadas x/y dentro del control.
verticalAlignment top Cómo se alinea la imagen verticalmente.
width auto Ancho de la imagen.
widthGrid auto Ancho de la imagen en paneles de estilo cuadrícula.

Valores de tamaño

Los parámetros height, heightGrid, minHeight, minHeightGrid, width y widthGrid aceptan unidades relativas, píxeles o cualquier otro valor de altura o ancho de CSS. El texto de ayuda del widget se refiere a unidades relativas como unidades Zudy.

Ejemplo Significado
10 10 unidades relativas
200px Píxeles
100% Porcentaje
auto Tamaño automático

Valores de autoResize

Valor Comportamiento
0 No se redimensiona automáticamente.
1 Se redimensiona dinámicamente.

Valores de objectFit

Valor Comportamiento
fill No preserva la relación de aspecto. La imagen se redimensiona para llenar el control.
contain Preserva la relación de aspecto y ajusta la imagen dentro del control sin recortar.
cover Preserva la relación de aspecto y llena el control, recortando cualquier desbordamiento.
none No redimensiona la imagen.
scale-down Reduce la escala de la imagen al menor de los resultados none o contain.

Valores de objectPosition

Valor Comportamiento
auto Utiliza la configuración Alineación del control.
positionX positionY Especifica la posición de la imagen dentro del control. El primer valor controla el eje x y el segundo valor controla el eje y. Cada valor puede ser una cadena (left, center o right) o un número en píxeles o porcentaje. Se permiten valores negativos.

Valores de verticalAlignment

Valor Comportamiento
top Alineación superior.
center Alineación central.
bottom Alineación inferior.