• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JSF 2 CommandLink and CommandButton with AJAX Example

April 2, 2014 //  by Amr Mohammed//  Leave a Comment

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 CommandLink  and CommandButton jsf component, whereas the others will be covered at other posts.

Also Read:

  • JSF 2 Tutorials
  • JSF Tutorials
  • Introduction to JSF

1. The View

index.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: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 CommandLink &amp; CommandButton Example</h2>
		<h:form>
			<h3>This Ajax is Triggered On Action Click</h3>
			<h:inputText id="input" value="#{indexBean.message}"/>
			#{' '}
			<h:commandButton value="Display" action="#{indexBean.displayText}">
				<f:ajax event="click" execute="input" render="output"></f:ajax>
			</h:commandButton>
			#{' '}
			<h:commandLink value="Display" action="#{indexBean.displayText}">
				<f:ajax event="click" execute="input" render="output"></f:ajax>
			</h:commandLink>
			#{' '}
			<h:outputText id="output" value="#{indexBean.message}"></h:outputText>
		</h:form>
	</f:view>
</h:body>
</html>

2. Managed Bean

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 String displayText(){
		return "";
	}

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

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. JSF 2 Ajaxify CommandLink & CommandButton Demo

The below snapshot shows you the Ajaxifyig implementation for commandLink & commandButton.

JSF 2 Ajaxifying Action Source

  • Ajaxifying of Action Sources (CommandLink and CommandButton) requires to use f:ajax.
  • 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.
[wpdm_file id=29]

Category: JSFTag: JSF 2

About Amr Mohammed

Previous Post: « JSF 2 InputText with AJAX Example
Next Post: JSF 2 Form with AJAX Example »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact