Añadir imágenes desde JSP

Java Code1

Añadir imágenes desde JSP

Anteriormente a las últimas modificaciones, las imágenes utilizadas tanto en JSP como desde algunos Javacripts se incluían como ficheros en cada distribución bajo la ruta \coreutils\img\ para luego ser utilizadas desde HTML mediante el tag IMG. Recientemente, se ha habilitado la posibilidad de añadir dichas imágenes a la base de datos (wic_conf), de hecho, aunque se mantiene la estructura de ficheros es preferible utilizar la base de datos. De esta forma, se facilita el envío de las imágenes en las distribuciones.

Las imágenes se vinculan a un estilo de ERP,  desde la wic_conf Style sheets\Aplicaciones. De esta forma, una imagen puede variar dependiendo del estilo; para utilizar imágenes genéricas se añaden al estilo -1. La imagen se referencia posteriormente mediante la URL /jdbs_img/cssicon?style=css_style&name=img_name; donde css_style se corresponde al código del estilo bajo el cual se ha añadido la imagen (solo se informa si es diferente de -1) y img_name al código asignado a la imagen.

Por otro lado, también se ha introducido el uso de estilos CSS para el uso de imágenes con el fin de utilizar tiras de imágenes; esto es, un único fichero que contenga varias imágenes, optimizando así el tiempo de carga de la página.  En consecuencia, en lugar de utilizar el tag IMG que apunte directamente al fichero con la imagen, se define un estilo CSS, el cual se asigna posteriormente mediante un tag SPAN*. Las hojas de estilo que contienen los diferentes estilos CSS se definen también en la wic_conf Style sheets\Hojas de estilo.

A modo de ejemplo, las imágenes anteriores más utilizadas en los formularios se han aglutinado bajo la imagen ax-util-icons, insertada en la base de datos wic_conf bajo el estilo genérico -1. Además, en la hoja de estilo con nombre common_generic se han definido los estilos necerarios para hacer referencia a dichas imágenes.

Ejemplo de hoja de estilo:

.ax-util-icons { background: url(/jdbs_img/cssicon?name=ax-util-icons) no-repeat top left; width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
.ax-util-icons-lents { background-position: 0 0; }
.ax-util-icons-dbmskey { background-position: -16px 0; }
...

El primer estilo ax-util-icons es un estilo genérico para todas las imágenes que contiene el fichero, se establecen algunas propiedades comunes como el tamaño de cada imagen, la alineación, etc. A continuación de definen tantos estilos como imágenes tiene el fichero, en los que se define la posición de cada imagen dentro de la tira.

Ejemplo de uso del tag SPAN:

<span class='ax-util-icons ax-util-icons-dbmskey'></span>

Como se ve en el ejemplo al tag span se le asignan dos estilos, el genérico y el propio de la imagen que se desea utilizar.

* Se utiliza el tag SPAN por convenio nuestro, aunque puede utilizarse otros como el propio IMG, DIV, etc. Se usa el tag SPAN porqué no tiene implícito saltos de línea, margenes, …