JSF 2 html graphicImage

In this tutorial you will learn about the tag in JSF.

JSF 2 html graphicImage

In this tutorial you will learn about the <h:graphicImage> tag in JSF.

JSF <h:graphicImage> tag is rendered to the HTML 'img' element with the 'src' attribute. Value of 'src' attribute is the path of the image.

Attributes of <h:graphicImage>

• id : This is an optional attribute. This attribute is used to make the component uniquely identifiable within the closest parent component.
• rendered : An optional attribute that evaluates to a boolean expression that indicates whether the current component should be rendered in the Render Response Phase or not or worked on any later form submission. Default value is 'true'.
  
• url : An optional attribute that evaluates to a String value as the context-relative URL which is used to find the associated resource.
• value : An optional attribute that is used to specify the path of the image.
• alt : An optional attribute that is used to give the alternate information of the image in the text form.
• dir : An optional attribute that evaluates to the java.lang.String value suggests the direction for the text which doesn't inherit the property of maintaining a direction. The allowable values are "LTR (Left-to-Right)" and "RTL (Right-to-Left)".
  
• height : An optional attribute used to reset the height of image.
• ismap : An optional attribute that evaluates a boolean value which specifies the used image is whether used as a server side image map or not. The server side image must be put inside the hyperlink ('a').
  
• lang : An optional attribute used to give the description of language of the generated HTML output.
• library : An optional attribute used for specifying the libraryName. This libraryName should be defined inside the 'resources' folder. The 'resources' folder should be defined in the root of the web application.
   
• longdesc : An optional attribute that is used to specify the long description of image.
• name : An optional attribute that is used specify the name of image. If this attribute is present the Resource.getRequestPath() is called and after rendered it is resulted as the value of the 'src' attribute of 'img' element.
  
• onclick : An optional attribute that specifies the onclick event i.e the JavaScript code is executed when click is done over the element by the pointer button.
  
• ondblclick : An optional attribute that specifies the ondbclick event i.e the JavaScript code is executed when double click is done over the element by the pointer button.
  
• onkeydown : An optional attribute that specifies the onkeydown event i.e the JavaScript code is executed when the key of keyboard is pressed down over this element.
  
• onkeypress : An optional attribute that specifies the onkeypress event i.e the JavaScript code is executed when the key of keyboard is pressed down and released over this element.
  
• onkeyup : onkeyup : An optional attribute that specifies the onkeyup event i.e the JavaScript code is executed when the key of keyboard is released over this element.
  
• onmousedown : An optional attribute that specifies the onmousedown event i.e the JavaScript code is executed when a mouse button is pressed down over this element.
  
• onmousemove : An optional attribute that specifies the onmousemove event i.e the JavaScript code is executed when a mouse pointer is moved over this element.
  
• onmouseout : An optional attribute that specifies the onmouseout event i.e the JavaScript code is executed when a mouse pointer is moved away from this element.
  
• onmouseover : An optional attribute that specifies the onmouseover event i.e the JavaScript code is executed when the mouse pointer is moved onto this element.
  
• onmouseup : An optional attribute that specifies the onmouseup event i.e. the JavaScript code is executed when the mouse pointer is freed over the element.
  
• style : An optional attribute used to add the inline CSS styles that are to be applied on this component to specify how it will be displayed when rendered.
  
• styleClass : An optional attribute used to specify the CSS style to be applied on the form. These CSS style class/es is a space-separated list.
• title : An optional attribute that specifies the text information of the component as a tooltip when the mouse pointer is hover over the image.
  
• usemap : An optional attribute that is used for specifying the name of the client side image map.
• width : An optional attribute that is used to reset the width of the image.
• binding : An optional attribute that evaluates to a javax.faces.component.UIComponent specified for linking the component with the property of backing bean.

Example :

Here I am giving a simple example which will demonstrate you about how to use the <h:graphicImage> tag in JSF applications. In this example I have used the <h:graphicImage> tag in two ways. In the first way I have used the 'library' and 'name' attributes. The library attribute specifies the libraryName for this resource and the name attribute specifies the imageName. Therefore, at first I have created the resources folder in the root of my web application i.e. within the WebContent folder in the Eclipse IDE. The 'resources' folder should be created with the same name because the subfolders of resources are treated as library in JSF 2 terminology then I have created an images (treated as library) folder inside the resources folder. An images ( folder will be passed as the value of the library attribute i.e <h:graphicImage library="images"> and to specify the image name passed the name of image as the value of name attribute of this tag i.e <h:graphicImage library="images" name="Krish.JPG" />. In other way I have used simply the value attribute where I have passed the current path value of the image.

When you will use these two different attributes the difference you will be seen in the rendered HTML output.

When you will use the library and name attribute with the <h:graphicImage> tag then the rendered HTML output will be as follows :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><body> 
<h1>JSF 2 html graphicImage</h1>
Image with library attribute : <img src="/jsfHGraphicImage/javax.faces.resource/Krish.JPG.jsf?ln=images" height="50" title="using library attribute" width="50" /></body> 
</html>

But, When you will use the value attribute with the <h:graphicImage> tag then the rendered HTML output will be as follows :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>JSF 2 html graphicImage</title>
</head>
<body> 
<p><b>JSF 2 html graphicImage Example</b></p>
Image with value attribute : <img src="resources/images/Krish.JPG" height="50" title="using value attribute" width="50" />
</body> 
</html>

Directory Structure

image.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" > 
<head>
<title>JSF 2 html graphicImage</title>
</head>
<body>
<f:view> 
<p><b>JSF 2 html graphicImage Example</b></p>
<ol>
<li>Image with library attribute : <h:graphicImage library="images" name="Krish.JPG" height="50" width="50" title="using library attribute" /></li>
<li>Image with value attribute : <h:graphicImage value="resources/images/Krish.JPG" height="50" width="50" title="using value attribute" /></li>
</ol>
</f:view>
</body> 
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>jsfHGraphicImage</display-name>
<welcome-file-list>
<welcome-file>image.xhtml</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
<url-pattern>*.jsf</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
</web-app>

How To Run

Download the war file of code from the link Download Source Code and import this file into your eclipse and then start your server and use the link http://localhost:8181/jsfHGraphicImage/image.jsf into the address bar of your web browser.

Output :

When you will execute the above example you will get the output as follows :