Home Jsp Display image on JSP page using XML

Related Tutorials


 
 

Share on Google+Share on Google+

Display image on JSP page using XML

Advertisement
In this tutorial we are going to know how we can display a image on JSP page by using XML.

Display image on JSP page using XML

     

In this tutorial we are going to know how we can display a image on JSP page by using XML. 

This example will examine how to parse and expose XML information using the JAXP with a JSP page. This tutorial is only geared towards showing how to construct a Java object from an XML document. For this what we need  a XML file in which the images are stored. What we need is to extract the image file from the XML file. 

To make a program over it we have used the following page directive attributes, the first attribute we have used is contentType and the second attribute is import. We need to import some classes and packages which we have described in the tutorial. 

Inside the scriptlet firstly we will define a factory API which allows our application to obtain a Java XML  parser. DocumentBuilderFactory defines a factory API. Now create a DocumentBuilder object to parse an org.w3c.dom.Document from XML. Save the xml file at bin file of  C:\apache-tomat-5.5.23\bin\. Now we need to parse method to actually parse the XML file to create our own Document object. Document object will be created by parse method of the DocumentBuilder

From the Document object we will get a NodeList object represents all of the elements in our XML document name message. NodeList object will be obtained by the getElementByTagName(). 

A NodeList is an array starting from 0 and going up to the length of the array by calling getFirstChild() method. By using this method the desired text node is returned and we can use getNodeValue() for our message. In this way we can retrieve the image from the XML file. 

Code of the imageXML.xml file:

<?xml version="1.0" encoding="UTF-8"?>
 <images>
 <pic1>1.jpg</pic1>
 <pic2>2.jpg</pic2>
 <pic3>3.jpg</pic3>
 <pic4>4.jpg</pic4>
 <pic5>5.jpg</pic5>
 <pic6>6.jpg</pic6>
 <pic7>7.jpg</pic7>
 <pic8>8.jpg</pic8>
 <pic9>9.jpg</pic9>
 </images>

Code of the imageUsingXML.jsp file.

<%@ page contentType="text/html"%>
<%@ page import="javax.xml.parsers.DocumentBuilderFactory,
javax.xml.parsers.DocumentBuilder,org.w3c.dom.*"
%>
<html>
<body><center><table border="2">
<%
DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
DocumentBuilder db = dbf.newDocumentBuilder();
Document doc = db.parse("\\imageXML.XML");
NodeList pic1= doc.getElementsByTagName("pic1");
NodeList pic2= doc.getElementsByTagName("pic2");
NodeList pic3= doc.getElementsByTagName("pic3");
NodeList pic4= doc.getElementsByTagName("pic4");
NodeList pic5= doc.getElementsByTagName("pic5");
NodeList pic6= doc.getElementsByTagName("pic6");
NodeList pic7= doc.getElementsByTagName("pic7");
NodeList pic8= doc.getElementsByTagName("pic8");
NodeList pic9= doc.getElementsByTagName("pic9");     
%>
 <%//A NodeList as an array starting from 0 and going up 
to the lentgh of the array  calling getFirstChild() 
the desired text node is returned and 
we can use getNodeValue() for our message.%>
 <tr><td>
 <img  border="2" src=<%= pic1.item(0).
getFirstChild().getNodeValue() %> 
width="137"  height="140"></td><td>
 <img  border="2" src=<%= pic2.item(0).
getFirstChild().getNodeValue() %>
 width="137"  height="140"></td><td>
 <img  border="2" src=<%= pic3.item(0).
getFirstChild().getNodeValue() %>
width="137"  height="140"></td></tr>
 <tr><td>
 <img  border="2" src=<%= pic4.item(0).getFirstChild().getNodeValue()
 %> width="137"  height="140"></td><td>
 <img  border="2" src=<%= pic5.item(0).getFirstChild().getNodeValue()
 %> width="137"  height="140"></td><td>
 <img  border="2" src=<%= pic6.item(0).getFirstChild().getNodeValue()
 %> width="137"  height="140"></td></tr>
 <tr><td>
 <img  border="2" src=<%= pic7.item(0).getFirstChild().getNodeValue()
 %> width="137"  height="140"></td><td>
 <img  border="2" src=<%= pic8.item(0).getFirstChild().getNodeValue()
 %> width="137"  height="140"></td><td>
 <img  border="2" src=<%= pic9.item(0).getFirstChild().getNodeValue()
 %> width="137"  height="140"></td></tr>
 </table>
 </center>
</body>
</html>

The output of the program is given below:

Download imageUsingXML.jsp file.

Download imageXML.xml file.

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: March 13, 2008

Related Tutorials

Discuss: Display image on JSP page using XML   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com