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