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:
