JSF Search Application Using Ajax

Here, Roseindia Tutorial Section provides you a JSF search application using Ajax. This is a simple application in which, you will see two JSF components that one is the text box component which is for entering keywords whatever you have to search and sec

JSF Search Application Using Ajax

JSF Search Application Using Ajax

    

Here, Roseindia Tutorial Section provides you a JSF search application using Ajax. This is a simple application in which, you will see two JSF components that one is the text box component which is for entering keywords whatever you have to search and second one is the command button labeled with the "OK" text that is for submitting the form by clicking on that component. When you enter the keyword into the text box component for searching about the the keyword i.e. the title of the topic provided by the Roseindia Java Tutorial, during entering each and every character of the title this component shows you a popup below the text box component that holds some titles starting with the entered text into the text box component. This application is very useful for everybody who want to integrate into the any type of website. You can direct copy the given code and paste it into your application for constructing the application.

Search application in any type website makes the website reliable and very user friendly for visitors. Visitors can direct search the topic and getting the detailed explanation of the title for learning more. This application here using JSF and AJAX technology that mean this is based on the JSF and the AJAX technology. You can get the more about the JSF like what is JSF? and how does it work? in the Roseindia JSF Tutorial. This tutorial gives you the complete JSF tutorial from the starting point of the JSF to the professional level programming in JSF. You will just learn here about the integrating or using AJAX in the JSF. This section tells you about the procedure of using AJAX in JSF by providing the complete code for viewing and download also.

This section here introduces about the JSF and the AJAX technology:

AJAX: Ajax stands for Asynchronous JavaScript and XML. Ajax is used to fetch the data from web server without refreshing the whole page. JavaScript is used to send the request to web server in order to fetch the data. You can know more about the Ajax technology in detail by visiting the Roseindia Ajax Tutorial.

There are some JSP pages for viewing the the page by providing the JSF syntaxes, some Java Bean Classes for holding data temporarily, Servlet for handling the AJAX operation and a file that is for holding all data like the titles of the tutorial with the link regarding that and the full description also regarding the title of the topic have used for building the complete application. These files are illustrated as follows one by one:

Following some file names these have been used in the application:

  • index.jsp
  • search.jsp
  • web.xml
  • faces-config.xml
  • AjaxServlet.java
  • TitleBean.java
  • TitleRecord.java
  • SelectedTitleRecord.java
  • script.js

Directory structure of the application is pictured as follows:

Here is the code of the index.jsp page:

<jsp:forward page="/search.jsf" />

Here is the code of for the search.jsp page:

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html>
<head><title>Roseindia Search Page</title>
	<style type="text/css">
	     .box { position:absolute;border: 1px
			solid #000000; }
	     .result {
		cursor:pointer;
		}
	   .title {
		font-family: Georgia, "Times New Roman", Times, serif;
		font-weight: bold;
		font-size: 24px;
		}
	 .heading {
		font-family: Georgia, "Times New Roman", Times, serif;
		font-weight: bold;
		font-size: 16px;}
	</style>
	<script type="text/javascript" language="JavaScript" src="js/script.js">
	</script>
</head>

<body onload="initialize();">
	<f:view>
		<h:form>
		<h:outputText value="Roseindia Search Application" styleClass="title"/><br><br>
		<h:outputText value="Tutorial Search: " />
		<h:inputText id="autoText" onblur="hidePopup()" 
 		onfocus="getQuery(this.value)" onkeyup="getQuery(this.value)" 
 		value="#{SelectedTitleRecord.selectedTitle}" />
	<h:commandButton value="OK" action=""/>
	<hr>
<table>
	<tr>
	   <td>
	<h:outputText styleClass="heading" value="Title 
	Details" rendered="#{SelectedTitleRecord.selected}" />
	</td>
	</tr>
     <tr>
	<td><b>
	<h:outputLink value="#{SelectedTitleRecord.link}">
	<h:outputText value="#{SelectedTitleRecord.titlename}" />
	</h:outputLink></b>
	</td>
	</tr>
	<tr>
	     <td>
		<h:outputText value="#{SelectedTitleRecord.description}" />
		</td>
	  </tr>
	</table>
</h:form>
	</f:view>
	<div align="left" class="box" id="autocomplete" style="width:170px;visibility:
	hidden;background-color:#ffffff"></div>
	<script type="text/javascript" language="JavaScript">
	function initialize(){
	initPopup('_id0:autoText','autocomplete');
	}
</script>
</body>
</html>

Here is the code for the script.js file:

var req;

if (window.XMLHttpRequest) { 
     req = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
}

var popupBoxName, textBoxName;

function initPopup(tBox, popupBox){
	popupBoxName = popupBox;
	textBoxName = tBox;
	var popupLayer = document.getElementById(popupBox).style;
	var qText = document.getElementById(tBox);

	qText.setAttribute('autocomplete','off');
	var x = findPosX(qText);
	var y = findPosY(qText);

	var width = getWidth(qText);
	popupLayer.left = x + "px";
	popupLayer.top = (y + 22) +"px";

	popupLayer.width = width; 
}

function doMouseClick(val){
	hidePopup();
	var qText = document.getElementById(textBoxName);
	qText.value = val;
}

function hidePopup(){
	var popupLayer = document.getElementById(popupBoxName).style;
	popupLayer.visibility="hidden";
}

function showPopup(){
	var popupLayer = document.getElementById(popupBoxName).style;
	popupLayer.visibility="visible";
}

function getQuery(key) {
	if (key=="") {
		hidePopup();
		return;
	}
if (req.readyState != 0) {
		req.abort();
} 

var url = "/jsfajax/AjaxServlet?key=" + key;
	if (req != null) {
		req.open("GET", url, true);
		req.onreadystatechange = processResponse;
		req.send(null);
		}
	}

function processResponse() {
	if (req.readyState == 4){
		if (req.status == 200) {
			if(req.responseText==null) { 
						hidePopup();
			}
			else {
				parseResponse(req.responseText);
			}
		}
	}
}

function parseResponse(result){
	var xmlDoc;
	if(document.implementation && document.implementation.createDocument) {
		xmlDoc = document.implementation.createDocument("", "", null);
		xmlDoc.async="false";
		xmlDoc.loadXML(result);
	} else if (window.ActiveXObject){
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.async="false";
		xmlDoc.loadXML(result);
	}
var count = xmlDoc.getElementsByTagName("TOTALCOUNT").item(0).getAttribute("count");

if(count != "0"){
	var fldValues = xmlDoc.getElementsByTagName("TITLE");
	var fldResult='';
	var values11 = new Array();
	for (var i=0;i<fldValues.length;i++){
	var val = fldValues.item(i).getAttribute("name");
	fldResult += '<SPAN class="result" onmouseover="this.style.color=
	\'blue\';" onmouseout="this.style.color=\'black\';" onmousedown="doMouseClick(\'' + val +
	'\');" >' + val + '</SPAN><BR>';
	}
document.getElementById("autocomplete").innerHTML = fldResult;
	showPopup();
	} else {
	hidePopup();
	}
}
var isIE = (window.navigator.appName.toLowerCase().indexOf("microsoft")>=0);

if(!isIE){
	Document.prototype.loadXML = function (s) {
	var doc2 = (new DOMParser()).parseFromString(s, "text/xml");
while (this.hasChildNodes())
	this.removeChild(this.lastChild);

for (var i = 0; i < doc2.childNodes.length; i++) {
this.appendChild(this.importNode(doc2.childNodes[i], true));
		}
	};
}

function findPosX(obj){
	var curleft = 0;
		if (obj.offsetParent){
			while (obj.offsetParent){
				curleft += obj.offsetLeft
				obj = obj.offsetParent;
				}
		}
		else if (obj.x)
	curleft += obj.x;
	return curleft;
	}

function findPosY(obj){
	var curtop = 0;
	if (obj.offsetParent){
	while (obj.offsetParent){
	curtop += obj.offsetTop
	obj = obj.offsetParent;
	}
    }
	else if (obj.y)
	curtop += obj.y;
	return curtop;
    }

function getWidth(element){
	if (element.clientWidth && element.offsetWidth && element.clientWidth <element.
			offsetWidth) {
		return element.clientWidth;
	} else if (element.offsetWidth) {
		return element.offsetWidth;
	} else if (element.width) {
	return element.width;
	} else {
	return 0;
	}
}

Here is the code of the AjaxServlet.java file:

package roseindia;

import java.io.*;
import java.sql.*;

import javax.servlet.*;
import javax.servlet.http.*;

public class AjaxServlet extends HttpServlet {
  private ServletConfig servletConfig = null;

  public void destroy() {
  servletConfig = null;
  }

  public ServletConfig getServletConfig() {
  return (this.servletConfig);
  }

  public String getServletInfo() {
  return (this.getClass().getName());
  }

  public void init(ServletConfig servletConfig) throws ServletException{
  this.servletConfig = servletConfig;
  }

  public void doGet(HttpServletRequest request, HttpServletResponse response) throws java
.io.IOException, ServletException{
  String key = (String)request.getParameter("key");
 TitleBean titleBean = (TitleBean)getServletContext().getAttribute("TitleBean");
  String[] titles = titleBean.getTitles();
  String matches = getMatches(titles, key);
  response.setContentType("text/xml");
  java.io.PrintWriter out=response.getWriter();
  out.print(matches);
  out.flush();
  }

  public void doPost(HttpServletRequest request, HttpServletResponse response) throws java
.io.IOException, ServletException {
  doGet(request, response);
  }

  private String getMatches(String[] titles, String key){
  String cList = "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>";
  cList +="<TITLES>";
  int count = 0;
  for(int i=0;i<titles.length;i++){
  if(titles[i].toUpperCase().startsWith(key.toUpperCase())){
  cList += "<TITLE name=\"" + titles[i] + "\" />";
  count++;
  if(count == 5) break;
 }
  }
  cList += "<TOTALCOUNT count=\"" + count + "\" />";
  cList += "</TITLES>";
  return cList;
  }
}

Here is the code of the TitleBean.java file:

package roseindia;

public class TitleBean{
 String[] titles;
 java.util.HashMap titleDetails = new java.util.HashMap();

 public static void main(String[] args){
  TitleBean tb = new TitleBean();
 }

 public TitleBean(){
 try{
 System.out.println("Reading data from the file...");
 java.io.BufferedReader in=new java.io.BufferedReader(new java.io.InputStreamReader(
TitleBean.this.getClass().getResourceAsStream("title.data")));
 readData(in);
 in.close();

 } catch (java.io.IOException IOex) {
 System.out.println("IO Error :" +IOex);
 }
 }

 public java.util.HashMap getTitleDetails(){
 return titleDetails;
 }

 public String[] getTitles(){
 return titles;
  }
 private void readData(java.io.BufferedReader br) throws java.io.IOException  {
 int recordNum= Integer.parseInt(br.readLine());
 titles = new String[recordNum];
 for(int i=0; i<recordNum; i++){
 String line=br.readLine();
 java.util.StringTokenizer st=new java.util.StringTokenizer(line, "\t\r");
  String titlename= st.nextToken();
  String description= st.nextToken();
 String cont = st.nextToken();
 TitleRecord cr= new TitleRecord(titlename, description, cont);
 titleDetails.put(titlename, cr);
 titles[i] = titlename;
 }
  }
} 

Here is the code of the TitleRecord.java file:

package roseindia;

public class TitleRecord {
  String titlename;
  String description;
  String link;
//  String capital;
//  String id;

  public TitleRecord(String titlename, String description, String link){
  this.titlename=titlename;
  this.description=description;
  this.link=link;
//  this.capital = capital;
//  this.id=id;
  }


  public String getTitlename(){
  return titlename;
  }

  public String getDescription(){
  return description;
  }

  public String getLink(){
  return link;
  }
}

Here is the code of the SelectedTitleRecord.java file:

package roseindia;

public class SelectedTitleRecord{
  String selectedTitle;
  TitleRecord selectedTitleRecord;
  java.util.HashMap titleDetails;

  public SelectedTitleRecord(){
  setTitleDetails();
  }

  public String getSelectedTitle(){
  return selectedTitle;
  }
  public void setSelectedTitle(String selectedTitle){
  this.selectedTitle = selectedTitle;
  setSelectedTitleRecord();
  }

  public String getTitlename(){
  if(selectedTitleRecord != null) return selectedTitleRecord.getTitlename();
  else return null;
  }
  public String getDescription(){
  if(selectedTitleRecord != null) return selectedTitleRecord.getDescription();
  else return null;
  }

  public String getLink(){
  if(selectedTitleRecord != null) {
  if (selectedTitleRecord.getLink() != "") {
  String link = selectedTitleRecord.getLink().toLowerCase();
  return link;
  }
  }
  return null;
  }
  public boolean isSelected(){
  if(selectedTitleRecord != null) return true;
  else return false;
  }
  public void setSelectedTitleRecord(){
  if(selectedTitle != null) {
  Object obj = titleDetails.get(selectedTitle);
  if((obj != null) && (obj instanceof TitleRecord)){
  selectedTitleRecord = (TitleRecord) obj;
  } else selectedTitleRecord=null;
  } else selectedTitleRecord = null;
  }
  
  public void setTitleDetails(){
  javax.faces.context.FacesContext context = javax.faces.context.FacesContext.
getCurrentInstance();
  javax.faces.application.Application app = context.getApplication();
  TitleBean cBean = (TitleBean) app.createValueBinding("#{TitleBean}").getValue(context);
  titleDetails = cBean.getTitleDetails();
  }
} 

Here is data in the title.data file:

1  2
2  Java Tutorial	This is the Roseindia Java Tutorial providing the complete java 
   solutions. This Tutorial gives you the complete java tutorial with some example which is
   ready to execute directly.	http://www.roseindia.net/java/
3  Java Swing Tutorial	This tutorial gives you the complete java swing tutorial.	
   http://www.roseindia.net/java/example/java/swing

Download Complete Application.