In this tutorial you will learn about the JSF f:ajax core tag library.
JSF 2 f:ajax Tag
In this tutorial you will learn about the JSF f:ajax core tag library.
Before knowing about the f:ajax tag let's first know a little bit about AJAX. AJAX (Asynchronous JavaScript and XML) is a web development techniques that provides the facility of creating asynchronous web applications. This technique is used in client-side that the web applications can send and retrieve the data from the server without intervening the existed whole page behavior. In this process it doesn't reload the whole page, it just update the part of web page that makes the execution much faster. Now let's read about the JSF f:ajax core tag.
f:ajax tag allows to include the behavior of AJAX on your dynamic page. Using this tag you can apply the behavior of ajax on single or more components that implements the ClientBehaviorHolder interface. To include the ajax behavior on a single component f:ajax tag may nested inside the single component or it may be wrapped around multiple components to include the ajax behavior on many components.
Attributes of ajax
- disabled : This is not a required attribute. But the
appearance of this attribute with "true" value shows that the behavior of ajax
should not rendered, and the false points to the rendering of ajax behavior.
- event : This is not a required attribute. But when use, it identifies the Ajax action event applied to.
- execute : This is not a required attribute but, is used to
identify about the components which will participate in execution of the
"execute" portion of the Request Processing lifecycle.
- immediate : This is not a required attribute but, the
appearance of this attribute with "true" suggests to broadcasts the generated
behavior events on Apply Request values phase or in other ways, it will be
broadcast on Invoke Applications phase.
- listener : This is not a required attribute. This attribute is used when AjaxBehaviorEvent is required to broadcast for the listener.
- onevent : This is not a required attribute and is used for the JavaScript function that handles the UI events.
- oneerror : This is not a required attribute and is used for the JavaScript function that handles the errors
- render : This is not a required attribute but, is used to identify about the components which will participate in rendering of the "render" portion of the Request Processing lifecycle.
Since JSF 2 f:ajax tag is not worked properly with the older versions of JSP so, I will use the Facelets to create example. Benefit of use of Facelet is that usually it uses XHTML file to create web pages. Facelets supports for the Facelets tag libraries as well as the JSF and JSTL tag libraries, Expression Language (EL), components and pages template. The DTD for creating the XHTML file that supports JSF implementation is as follows :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
And the Name Space is as follows :
<html xmlns="http://www.w3.org/1999/xhtml">
For update you can visit http://www.w3.org/TR/
Creation Of JSF application with Facelets are also very convenient. If you don't know How To Develop JSF Application With XHTML In Eclipse click here.
Example :
Here I am giving a simple example which will demonstrate you about how to use JSF f:ajax tag. In this example I have simply created a web project then created a Managed bean into the devmanuals package inside of src folder in Eclipse. Then created a folder named xhtmlPages in Web Content folder and write the code for input the name and then get that input name without reloading the whole page. It can be possible by using the JSF <f:ajax> tag. This tag is used inside the JSF html commandButton which will be acted after click this button. Attribute execute used in this tag specifies that which component has sent for processing on server and the attribute render will refresh the specified component after completion of Ajax request.
Directory Structure of this example :
NameBean.java
package devmanuals;
import javax.faces.bean.ManagedBean;
@ManagedBean(name="nameBean")
public class NameBean {
String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
inputName.xhtml
<!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">
<head>
<title>Input Page</title>
</head>
<body>
<f:view>
<h:form>
Enter Name : <h:inputText id="name" value="#{nameBean.name}" />
<h:commandButton value="submit">
<f:ajax execute="name" render="result"></f:ajax>
</h:commandButton>
<br></br>
<p><b>Welcome, <h:outputText id="result" value="#{nameBean.name}"/> !</b></p>
</h:form>
</f:view>
</body>
</html>
web.xml
<?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_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>jsfAjax</display-name> <welcome-file-list> <welcome-file>faces/xhtmlPages/inputName.xhtml</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <context-param> <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>client</param-value> </context-param> <context-param> <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name> <param-value>resources.application</param-value> </context-param> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> </web-app>
Output :
1. When you will execute this example by typing the url (http://localhost:8080/jsfAjax/faces/xhtmlPages/inputName.xhtml) in address and input the value then the output will be as follows :
2. When you will input the value like above click on submit the output will be as follows :
Download Source Code (WAR file)
[ 0 ] Comments