Hi, This tutorial for people who wants to start with JSF2.0 AJAX quickly …
ok, lets start..
1) Open your eclipse… create new web project.
2) put jsf-api.jar, jsf-imp.jar under WEB-INF\lib folder.
3)create juma.mohammad.MainBean class
package juma.mohammad;
import java.util.Date;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class MainBean {
private String date = (new Date()).toString();
public void update() {
try {
Thread.sleep(4000);
date = (new Date()).toString();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
}
Here we used @ManagedBean jsf2.0 annotation .. we marked here our MainBean as jsf Backing Bean..
4) web.xml as below:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
our url pattern as its clear is ” *.jsf ”
4) No need for faces-config.xml… thanks for jsf2.0 annotations 🙂
5)create index.jsp and put it under WebContent folder:
<% response.sendRedirect("main.jsf"); %>
6)create main.xhtml page and put it under WebContent Folder as well:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>JSF 2.0 Simple Ajax...</title>
<style type="text/css" >
.ajaxResult { color: #440000;
font-weight: bold;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<script language="javascript" type="text/javascript">
function showDateIndicator(data) {
showIndicatorRegion(data, "dateIndicator");
}
function showIndicatorRegion(data, regionId) {
if (data.status == "begin") {
document.getElementById(regionId).style.display = "inline";
} else if (data.status == "success") {
document.getElementById(regionId).style.display = "none";
}
}
</script>
</h:head>
<h:body>
<h:form id="myForm">
<h2>JSF 2.0 AJAX</h2>
<br/>
<h:commandButton value="Update Date" action="#{mainBean.update}">
<f:ajax render="myForm:viewDate" onevent="showDateIndicator" />
</h:commandButton>
<table border="0px">
<tr>
<td><h:outputText value="#{mainBean.date}" id="viewDate" /></td>
<td><span class="ajaxResult" id="dateIndicator" style="display: none; font-size: 60%"> <img src="ajax-loader.gif" /> Loading data from server... </span></td>
</tr>
</table>
</h:form>
</h:body>
</html>
now, to enable Ajax behaviour we just need to use <f:ajax tag > which takes 2 attributes
a) rerender : which is responsible for updating specific area in the page
b) onevent : here we call javascript function which will handle the ajax call, and it will take response data as argument.
we used it here to show ajax indicator message , and once response back from server this function will hide ajax indicator message.
7)put this image ajax-loader.gif under WebContent folder:
8)Export project as a war, and deploy it …
I hope you will find this tutorial useful 🙂
[…] The busiest day of the year was May 6th with 88 views. The most popular post that day was JSF 2.0 AJAX…For Begginers . […]
How add ajax to jsf2.0 ?
on the faceslets page, i can add ajax like this:
but at the managed bean, how to do it ?
HtmlInputText headerText = new HtmlInputText(); //
headerText.setId(“id”);
headerText.setValue(“value”);
// headerText.setAjax() ???
Thanks.
i can add ajax on the faceslets page.
but at the managed bean, how to do it ?
HtmlInputText headerText = new HtmlInputText(); //
headerText.setId(“id”);
headerText.setValue(“value”);
// headerText.setAjax() ???
Thanks.
Yo dude, That was great… You made it seem really straightforward !
Keep going 😉
Regards