JSF 2 InputText with AJAX Example

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. JSF 2.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 inputText jsf component, whereas the others will be covered at other posts.

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 afterPhase="#{indexBean.phaseListener}"
		beforePhase="#{indexBean.phaseListener}">
		<h1>JavaBeat JSF 2.2 Examples</h1>
		<h2>JSF2 Ajaxify UI Input Example</h2>
		<h:form>
			<h3>This Ajax is Triggered On KeyDown</h3>
			<h:inputText id="input" value="#{indexBean.message}">
				<f:ajax event="keydown" execute="input" render="output"></f:ajax>
			</h:inputText>
					#{' '}
					<h:outputText id="output" value="#{indexBean.message}"></h:outputText>
		</h:form>
	</f:view>
</h:body>
</html>
  • Note using of PhaseListener to ensure that there is a real request has been initiated.

2. Managed Bean

IndexBean.java

package net.javabeat.jsf;

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

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

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

	public void phaseListener(PhaseEvent e){
		System.out.println(e);
	}
}

3. The Deployment Descriptor

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>

5. JSF 2 Ajaxify InputText Demo

The below snapshot shows you the using of f:ajax for initiating a partial request and so render the partial response that already returned from the server.

JSF 2 Ajaxify InputText Example

  • The above demo has covered the case of entering characters inside the input, while the output has been changed automatically.
  • The inputText and the event keydown has been associated with an Ajax request.
  • The identification of components that being sent or rendered partially has been done through execute and render respectively.
  • Only those components that are mentioned in the f:ajax render attribute gets rendered while the jsf framework has drawn the component view.
  • Only those components that are mentioned in the f:ajax execute attribute gets executed while the submission being processed.
  • The f:ajax event attribute determines the even on which the ajax request has submitted.

Comments

comments

About Amr Mohammed

Speak Your Mind

*