Uso de imágenes

<< Click to Display Table of Contents >>

Navigation:  Bizagi Studio > Asistente de Procesos > Definir Formas > Extender o personalizar la interfaz de usuario (Widgets) > Crear Widgets >

Uso de imágenes

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

Simplemente al 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 encrustar esa imagen.

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

 

 

WidgetEditor_Image

 

 

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

 

note_pin

Ciertamente un Widget podría 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).

Así este enfoque funcione, tiene 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 se incluya la imagen dentro del Widget y desde allí mismo 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 completamente un componente 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 es válida también, tenga presente 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 una 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), como se enseña:

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

 

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