Uso de imágenes

<< Clic para mostrar Tabla de Contenidos >>

Navegación:  Bizagi Studio > Asistente de Procesos > Definir Formas > Extender o personalizar las formas > Crear Widgets > Estructura de un Widget > API de Widgets >

Uso de imágenes

Introducción

A menudo, un Widget tendrá la necesidad de manejar imágenes.

Con solo hacer clic sobre las imágenes que contenga un Widget, el Editor de Widgets presentará opciones poderosas para trabajar con estas imágenes, como por ejemplo: su previsualización, hacer zoom para agrandar o achicar, seleccionar el color de una porción (para conocer su color exacto en hexadecimal), o conocer el código para incrustar dicha imagen.

Para mayor información sobre las opciones del Editor de Widgets, consulte Interfaz de usuario del Editor de Widgets.

 

 

WidgetEditor_Image

 

 

Importante

El uso más común de las imágenes es que el mismo Widget las presente, sea como parte del estilo o como parte del comportamiento del Widget.

 

note_pin

Seguramente, un Widget puede referenciar una ubicación externa (una URL) para desplegar una imagen (a través de un <img> y su propiedad src que enlaza a la ubicación).

Bajo este enfoque, se tienen las siguientes desventajas evidentes:

No permite que el Widget sea un componente independiente, dado que siempre dependería de esa imagen en esa ubicación externa.

Implica cierta sobrecarga administrativa para el manejo de la imagen (p.e, asegurar la conectividad y su disponibilidad, o manejar los permisos del acceso).

 

Se recomienda entonces que incluya la imagen dentro del Widget y la utilice en el código.

Esta sección presenta cómo incrustar esa imagen (embeberla) en el código de manera que el Widget sea un componente completamente independiente que despliega todo lo que necesita.

 

 

Incrustar una imagen

A través de la opción Incrustar esta imagen, El Editor de Widgets decodifica la imagen en bytes, de tal forma que puede usarla directamente en su código js o CSS:

 

WidgetEditor_Image2

 

note_pin

Nótese que la primera alternativa es recomendada porque le permitirá utilizar los bytes en la propiedad data url de una hoja de estilos CSS.

 

A pesar de que la segunda alternativa también es válida, tenga en cuenta que el uso de img.src dentro del código js no es igual de óptimo a nivel de desempeño (p.e, especialmente cuando se usan imágenes pesadas), principalmente porque de esta manera, la imagen no queda almacenada en la caché del navegador.

 

 

Una vez que copie el texto de la primera alternativa, utilícelo en su hoja de estilos CSS.

Por ejemplo, usted podrá tomar esa imagen como el fondo de un elemento (asignado a la clase predefinida de su CSS), así:

background:url('data:image/png;base64,[aca_los_bytes]') no-repeat;

 

Finalmente, en el código js de la implementación de su Widget,solo necesitará asegurarse de haber asignado esa clase que contiene la imagen al elemento HTML de su elección.