JSF graphicImage

h:graphicImage es un componente JavaServer Faces (JSF) que se utiliza para mostrar una imagen en una página web. Representa un elemento de imagen HTML que muestra una imagen de una fuente dada.

En los ejemplos que veremos a continuación, ubicaremos nuestras imágenes en una carpeta de recursos dentro de la carpeta webapp de nuestro proyecto:

Tag graphicImage en JSF 1.x

En JSF 1.x utilizamos el atributo value, o bien su alias url para especificar la ruta relativa del recurso:

inicio-jsf-1.xhtml

<h:graphicImage value="resources/images/jcodepoint_logo.jpg"></h:graphicImage>

O bien:

<h:graphicImage url="resources/images/jcodepoint_logo.jpg"></h:graphicImage>

En ambos casos, al ser procesado se convertirá en código HTML como sigue:

<img src="resources/images/jcodepoint_logo.jpg">

Tag graphicImage en JSF 2.x

En JSF 2.x utilizamos el concepto de library y el atributo name para especificar la ubicación del recurso:

inicio-jsf-2.xhtml

<h:graphicImage library="images" name="jcodepoint_logo.jpg"></h:graphicImage>

Al ser procesado se convertirá en código HTML como sigue:

<img src="/jsf-graphic-image/javax.faces.resource/jcodepoint_logo.jpg.jsf?ln=images">

Mostrar imagen desde un array de bytes

Mostrar imágenes a partir de un array de bytes puede ser de utilidad en aplicaciones web que utilizan imágenes recuperadas de una base de datos. Al recuperar tales imágenes, se lo suele hacer en forma de array de bytes. Y dado que h:graphicImage solo puede hacer referencia a una URL, solo será posible hacerlo disponibilizando el array de bytes en una respuesta HTTP. Mediante el uso de un servlet, se pueden recuperar la imagen de la base de datos y escribir el array de bytes obtenido en el flujo de respuesta como una imagen. Este enfoque proporciona un método eficiente de entrega de imágenes en aplicaciones web, lo que reduce el tiempo que lleva solicitar y cargar archivos de imágenes individuales.

El siguiente ejemplo es una aplicación que nos permite seleccioanar entre dos imágenes con un h:selectOneRadio. Al hacer click en el botón se navega a la segunda página que hace referencia al path del servlet que es el encargado de generar la respuesta HTTP con los datos de la imagen.

La primera vista contiene el formulario con el h:selectOneRadio para seleccionar la imagen y el componente h:commandButton para navegar a la siguiente vista.

<h:form id="imageForm">
	<h:selectOneRadio id="rb-image" value="#{imageBean.selectedImage}">
		<f:selectItem itemValue="jcodepoint_logo.jpg" itemLabel="Logo Cuadrado" />
		<f:selectItem itemValue="jcodepoint_logo_2.png" itemLabel="Logo Circular" />
	</h:selectOneRadio>
	<h:commandButton value="Enviar" action="inicio-jsf-2" />
</h:form>

El Managed Bean simplemente almacena el valor seleccionado en el componente h:selectOneRadio para poder ser luego utilizado en la siguiente vista.

@Named("imageBean")
@ApplicationScoped
public class ImageBean implements Serializable {
	private static final long serialVersionUID = 1L;
	
	private String selectedImage;
	
	public String getSelectedImage() {
		return selectedImage;
	}

	public void setSelectedImage(String selectedImage) {
		this.selectedImage = selectedImage;
	}
}

El el servlet recuperamos el array de bytes y lo escribimos en la respuesta del método doGet(). En este ejemplo obtenemos el array de bytes a partir de un archivo existente a los efectos de simplificar.

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/image/*")
public class Servlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String f = request.getPathInfo().substring(1);
		String filename = request.getServletContext().getRealPath("resources/images/" + f);

		File imageFile = new File(filename);
		byte[] bytes = Files.readAllBytes(imageFile.toPath());

		response.setHeader("Content-Disposition", "inline;filename=\"imageFileName.jpg\"");
		response.setContentType("image/jpeg");
		response.setContentLength(bytes.length);
		response.getOutputStream().write(bytes);		
	}
}

Finalmente, en la segunda vista visualizamos la imagen haciendo referencia al path del servlet.

<h:graphicImage value="/image/#{imageBean.selectedImage}" />

Atributos más relevantes

Los siguientes son los atributos más relevantes:

Conclusión

En resumen, h:graphicImage es un componente JSF que se utiliza para mostrar imágenes en una página web y puede tomar como valor una expresión que apunte al archivo de imagen, una URL o un flujo de bytes. Puede utilizar otros atributos para personalizar la apariencia y el comportamiento de la imagen.

Referencias

• JSF 2.2 Facelets Tag Library Documentation

Te puede interesar: