Java Tutorial Blog

JSF 2 Form with AJAX Example

//  by 

Asynchronous JavaScript XML (Ajax) is considered for a long time as a luxury, either users or developers, but today Ajax is essential for building compelling and competitive applications. JSF2.0 has built-in Ajax support, with a standard JavaScript library.

JSF Ajax requests partially process components on the server, and partially render components on the client when the request returns. Using of Ajax has multiple forms, this post will cover Ajaxifying of a group of components or for the whole form.

You’ve noted using of f:ajax for inputText and different types of actions sources (CommandLink & CommandButton), but at these uses the f:ajax tag is associated with the component that would been ajaxifying. Such that uses is a little bit tedious cause you have to associate the f:ajax every time you want to ajaxify a certain component. This problem get solved by using the Ajax Group Concept.

Ajax Group isn’t a specific component or tag, you have to use, it’s just the same f:ajax tag, in which instead of associate the ajax tag with a specific component, you are associating it with the form. By using the Ajax Group, jsf applies the default Ajax events – Action for Action Sources and ValueChange for all of the input and select component – if you don’t specify an event. In case you’ve specified the event the Ajax is only applicable for that specified event.

Also Read:

1. The View

index.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
	<h:outputScript library="javax.faces" name="jsf.js" target="head" />
</h:head>
<h:body>
	<f:view>
		<h1>JavaBeat JSF 2.2 Examples</h1>
		<h2>JSF2 Ajax Group Example</h2>
		<f:ajax render="output">
		<h:form>
			<h3>This Ajax is Default Triggered</h3>
			<h:inputText id="input" value="#{indexBean.message}"
				valueChangeListener="#{indexBean.valueChange}"/>
			#{' '}
			<h:commandButton value="Display" action="#{indexBean.displayText}">
			</h:commandButton>
			#{' '}
			<h:commandLink value="Display" action="#{indexBean.displayText}">
			</h:commandLink>
			#{' '}
			<h:outputText id="output" value="#{indexBean.message}"></h:outputText>
		</h:form>
		</f:ajax>
	</f:view>
</h:body>
</html>

2. Managed Bean

IndexBean.java

package net.javabeat.jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ValueChangeEvent;

@ManagedBean
@SessionScoped
public class IndexBean {
	private String message;

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}
	// This action will be invoked every time the commandButton has been activated
	public String displayText(){
		return "";
	}
	// This listener will be invoked every time the inputText value has changed
	public void valueChange(ValueChangeEvent e){
		System.out.println("The Value Changed For : "+e.getComponent()+" Component");
	}
}

3. The Deployment Descriptor (web.xml)

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_2_5.xsd"
	id="WebApp_ID" version="2.5" metadata-complete="true">
	<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.faces.application.CONFIG_FILES</param-name>
		<param-value>/WEB-INF/faces-config.xml</param-value>
	</context-param>
	<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>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

4. The View

The below snapshot shows you the full-fledged demonstration of how could be using the Ajax Group for activated the default events.

JSF 2 Ajax Group Example

The previous demonstration needs to pay attention for the following points for a good understanding of what happened now:

  • Using of f:ajax before the form, will Ajaxify the whole form.
  • Ajaxyfing the form does mean that every input (Text input, text areas, secret input, all of the select components) will be ajaxyfied by its default event.
  • The default event for the listed input components is valueChange; by that once you’ve changed the value of the input and you’ve tried to focus on any other component in the view, the change event will be triggered and the ajax request has been initiated.
  • The default event for the action sources (commandButton & commandLink) is the action (click – activate); so once the action has been activated (clicked) the ajax even click (submit) has been triggered and the ajax request has been initiated.
  • Triggering of Ajax events doesn’t mean anymore that the jsf will render any components when the Ajax call returns because you didn’t specify a render for the used f:ajax. If you’ve noted the index.xhtml, you will find that the f:ajax tag has defined a render attribute.
[wpdm_file id=30]

About Amr Mohammed