Srikanth Technologies

Displaying XML with JSF DataTable

In this blog, let us see how to display data that is in XML document as HTML table using dataTable UI component of JSF.

Take the following steps to read data from XML document - books.xml, load it into an ArrayList as object of Book class using managed bean - Books and then the data from a property of managed bean is displayed using dataTable of JSF.

Creating XML Document

The following is XML document - book.xml, which is placed in root directory of the web application.
<?xml version="1.0" encoding="windows-1252"?>
       <title>JSF In Action </title>
       <author>Kito D. Mann </author>
       <title>Struts 2 In Action </title>
       <author>Brown, David , Stanlink</author>
       <title>Beginning Hibernate (From Novice to Professional) </title>
       <author>Dave Minter and Jeff Linwood</author>
       <title>Oracle Database 11g  SQL</title>
       <author>Jason Price</author>
       <title>Java Complete Reference</title>
       <author>Herbert Schildt</author>

Creating required classes

Place classes Book and Books in /WEB-INF/classes folder. Book class represents a single book. Books class provides getBooks() method that is used from JSF dataTable component. It returns an object of ArrayList that contains Book objects.
public class Book {
      private String title, author;
      private int price;
      public Book() {}
      public Book(String title, String author, int price) {
          this.title= title;
 = author;
          this.price = price;
    public String getTitle() {
        return title;
    public void setTitle(String title) {
        this.title = title;
    public String getAuthor() {
        return author;
    public void setAuthor(String author) { = author;
    public int getPrice() {
        return price;
    public void setPrice(int price) {
        this.price = price;
import java.util.ArrayList;
import javax.faces.context.FacesContext;
import javax.servlet.ServletContext;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
public class Books {
    public ArrayList getBooks() {
        ArrayList al = new ArrayList();
        Book b;
        // read data from XML file
        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
        Document  document;
        try {
            DocumentBuilder builder = factory.newDocumentBuilder();
            // get physical path for BOOKS.XML. First get access to ServletContext using FacesContext
            ServletContext context = (ServletContext) FacesContext.getCurrentInstance().getExternalContext().getContext();
            String filepath = context.getRealPath("/books.xml");  // get physical path for /books.xml
            document = builder.parse( new File(filepath));
            Element root = document.getDocumentElement();
            NodeList books  =  root.getChildNodes();
            for (int i = 0 ; i < books.getLength(); i ++)
                // skip the rest if node is not an elemtn
	            if ( books.item(i).getNodeType() != Node.ELEMENT_NODE)
                NodeList bookdetails = books.item(i).getChildNodes();
                // create a book with the data from book element in XML document
                b = new Book( bookdetails.item(1).getTextContent(),
                                   Integer.parseInt(bookdetails.item(5).getTextContent())) ;
                al.add(b);  // add book to ArrayList
            return al;
        catch (Exception e) {
           System.out.println("\n** Parsing error" + ", line " + e.getMessage());
           return null;

Register ManagedBean in faces-config.xml

Add <managed-bean> element in faces-config.xml as follows to register Books as managed bean.

Creating JSP to display data that is taken from Managed bean.

Create listbooks.jsp, which uses dataTable element of JSF to read data from books property of Books managed bean and displays it.

JSP uses internal stylesheet with style header to display header of dataTable with red background and white foreground. It uses styles row1 for odd rows and row2 for even rows.
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri=""%>
<%@taglib prefix="h" uri=""%>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>List Of Books</title>
        .header {background-color:red;color:white;font:700 12pt arial}            
        .row1 {}
        .row2 { background-color:#dddddd}
        <h1>List Of Books</h1>
                <h:dataTable value="#{Books.books}" var="book"  border="1" 
                headerClass="header"   rowClasses="row1,row2">
                        <f:facet name="header"> <f:verbatim>Title</f:verbatim> </f:facet>
                        <h:outputText value="#{book.title}"/>
                        <f:facet name="header"> <f:verbatim>Author</f:verbatim> </f:facet>
                        <h:outputText value="#{}"/>
                        <f:facet name="header"> <f:verbatim>Price</f:verbatim> </f:facet>
                        <h:outputText  value="#{book.price}"/>
That's all you have to do to load data from XML document into a managed bean. Once data is loaded into managed bean then it can be accessed from dataTable element of JSF using its value attribute as shown in the above JSP.