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.
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
