This article demonstrates JSF graphicImage tag with real time example. We will display image of Sir Abraham Lincoln using JSF graphicImage tag.
Understanding JSF GraphicImage tag (h:graphicImage) with a real time example
1. Graphic Image (h:graphicImage) in JSF is very useful tag. It is used to display images. In this example we will demonstrate how to work with Graphic Image in JSF 1.2. We will take one example to see Graphic Image (h:graphicImage) in JSF.
2. Let us take an example to understand use of Graphic Image (h:graphicImage). Suppose we want to display image of 16th President of the United States, Sir Abraham Lincoln. We use Graphic Image(h:graphicImage) tag in JSF to display Sir Abraham Lincoln’s image. In this Graphic Image(h:graphicImage) example we will see how to display a image using tag in JSF. Moreover, we will provide a link to image so that when user clicks on the image, he will be navigated to another page and will get some information about the image.
3. We have these files while doing this example
- graphicImage.jsp
- imageDescription.jsp
- faces-config.xml
- web.xml
4. Eclipse image for this project.
 |
| Eclipse Hierarchy of Graphics Image Example |
In this “Graphic Image(h:graphicImage) – JSF-1.2 example”, we will display one image using JSF Graphic-Image tag (h:graphicImage). When we will click on the image of Sir Abraham Lincoln we will navigate to imageDescription.jsp where we get some basic information about the Sir Abraham Lincoln.
Please follow these procedures to do this Example
1. Creating a dynamic web application :
In this step we have to create a dynamic web application with name “jsfGraphicImageExample”.
2. Create JSP Pages :
Now we have to create two JSP pages.
- graphicImage.jsp – In this page we will display image of Sir Abraham Lincoln.
- imageDescription.jsp – When user will click on the image of Sir Abraham Lincoln displayed in the first screen he will be navigated to this JSP. In this JSP we will display some information about the Sir Abraham Lincoln.
graphicImage.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Graphic Image h:graphicImage JSF-1.2 Example</title>
</head>
<body>
<f:view>
<h:form>
<h:panelGrid>
<h:outputText value="Image of Sir Abraham Lincoln : "></h:outputText>
<h:commandLink action="imageDescription">
<h:graphicImage alt="Sir Abraham Lincon"
title="Graphic-Image-Example" height="50px;" width="50px;"
value="/graphicImages/abrahamLincon.jpg" />
</h:commandLink>
</h:panelGrid>
</h:form>
</f:view>
</body>
</html>
imageDescription.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Graphic Image h:graphicImage JSF-1.2 Example</title>
</head>
<body>
<f:view>
<h:panelGrid style="color:blue">
<h:outputText
value="Abraham Lincoln was the 16th President of the United States,"></h:outputText>
<h:outputText
value="serving from March 1861 until his assassination in April 1865."></h:outputText>
<h:outputText
value="Born: February 12, 1809, Hodgenville, Kentucky, United States."></h:outputText>
<h:outputText value="Height: 1.93 m"></h:outputText>
<h:outputText value="Washington, D.C., United States"></h:outputText>
<h:outputText value="Spouse: Mary Todd Lincoln (m. 1842-1865)"></h:outputText>
<h:outputText style="color:red"
value="Credit for Information wikipedia.org"></h:outputText>
</h:panelGrid>
</f:view>
</body>
</html>
3. Create faces-config.xml file :
Please see below code for the faces-config.xml file for example “Tutorial – Graphic Image() in JSF-1.2”.
faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">
<navigation-rule>
<from-view-id>/graphicImage.jsp</from-view-id>
<navigation-case>
<from-outcome>imageDescription</from-outcome>
<to-view-id>/imageDescription.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
4. Create web.xml file :
Please find the web.xml file code for example “Tutorial – Graphic Image() in JSF-1.2”.
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_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>jsfGraphicImageExample</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</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>
</servlet-mapping>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<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>
<description>
This parameter tells MyFaces if javascript code should be allowed in
the rendered HTML output.
If javascript is allowed, command_link anchors will have javascript code
that submits the corresponding form.
If javascript is not allowed, the state saving info and nested parameters
will be added as url parameters.
Default is 'true'</description>
<param-name>org.apache.myfaces.ALLOW_JAVASCRIPT</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<description>
If true, rendered HTML code will be formatted, so that it is 'human-readable'
i.e. additional line separators and whitespace will be written, that do not
influence the HTML code.
Default is 'true'</description>
<param-name>org.apache.myfaces.PRETTY_HTML</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>org.apache.myfaces.DETECT_JAVASCRIPT</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<description>
If true, a javascript function will be rendered that is able to restore the
former vertical scroll on every request. Convenient feature if you have pages
with long lists and you do not want the browser page to always jump to the top
if you trigger a link or button action that stays on the same page.
Default is 'false'
</description>
<param-name>org.apache.myfaces.AUTO_SCROLL</param-name>
<param-value>true</param-value>
</context-param>
<listener>
<listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
</listener>
</web-app>
5. Deploy Application and Run Server :
In this step you we have to deploy jsfGraphicImageExample.war file to server after proper deployment we have to start the server.
6. Run The Application :
Once server started successfully please open Internet Explorer and hit this url “http://localhost:8080/jsfGraphicImageExample/graphicImage.faces”.
So now we can see output of our Graphic Image() in JSF-1.2.
Out put screen will be like this
First Screen
 |
| Screen Showing Image of Sir Abraham Lincoln |
In this screen we are showing image of 16th president of United States Sir Abraham Lincoln. When user will click on the image he will be navigated to the another screen where he can get some basic information about him. Below is the image of the screen showing information.
Second Screen
 |
| output screen showing the information about Sir Abraham Lincoln |
