JSF 2 ActionListener Attribute and Class Example

By Arvind Rai, January 21, 2015

In this page we will learn ActionListener attribute and class for registering ActionListener in components. Before any action, ActionListener is called to perform required task. To use ActionListener in UI, there is an attribute as actionListener and a tag as f:actionListener that can be used with h:commandButton. If using ActionListener as an attribute, we need to create a method in managed bean which will be referred with ActionListener attribute. Method has ActionEvent argument to access required values. If using ActionListener as a tag, we need to create a class that will implement ActionListener interface. There is a method as processAction, which needs to be overridden and method has ActionEvent argument to access required values.

ActionListener as an Attribute

To use ActionListener, JSF 2 has provided actionListener attribute. We can use the attribute with h:commandButton as below.

<h:commandButton id="commandButton" action="#{studentBean.submitActionForMethod}" 
   value="submit" actionListener="#{studentBean.performAction}">
</h:commandButton>

In the code snippet, actionListener attribute has been assigned with a method of managed bean which is called before submitting the page.

ActionListener as a Class

To use ActionListener as a class, we need to use f:actionListener tag which has a type element . Find the code snippet as below.

<h:commandButton id="commandButton" action="#{studentBean.submitActionForClass}" value="submit">
  <f:actionListener type="com.concretepage.SubmitActionListener" />
</h:commandButton>

f:actionListener tag needs fully qualified class of ActionListener interface implementation. ActionListener interface has processAction(ActionEvent event) method that is called before page submission.

Complete Example for ActionListener

For the ActionListener demo, we are creating a simple application. We have two webpage, one for attribute and one for tag demo. When we will click on submit button, there will be output in console.

Project Structure in Eclipse

Find the project structure in eclipse.

JSF 2 ActionListener Attribute and Class Example

Managed Bean

Find the managed bean being used in the example.
StudentBean.java

package com.concretepage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.ActionEvent;
@ManagedBean(name = "studentBean", eager = true)
@RequestScoped
public class StudentBean {
	public void performAction(ActionEvent event)
            throws AbortProcessingException {
            System.out.println("Form Id by ActionListener attribute:"+event.getComponent().getParent().getId());
        }
	public String submitActionForMethod()
            throws AbortProcessingException {
            System.out.println("Action Submitted for ActionListener attribute.");
            return "eventwithmethod";
        }
	public String submitActionForClass()
            throws AbortProcessingException {
            System.out.println("Action Submitted for ActionListener class.");
            return "eventwithclass";
        }
}

Implementation of ActionListener Interface

Find the implementation of ActionListener interface.
SubmitActionListener.java

package com.concretepage;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.ActionEvent;
import javax.faces.event.ActionListener;
public class SubmitActionListener implements ActionListener {
	@Override
	public void processAction(ActionEvent event)
			throws AbortProcessingException {
		System.out.println("Form Id by ActionListener class:"+event.getComponent().getParent().getId());
	}
}

UI for actionListener attribute and f:actionListener Tag

Find the XHTML for ActionListener attribute demo.
eventwithmethod.xhtml

<html lang="en"
      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>ActionListener with Method in JSF 2</title>
    </h:head>
    <h:body>
       <h3>ActionListener with Method in JSF 2</h3>
	<h:form id="studentForm">
           <h:commandButton id="commandButton" action="#{studentBean.submitActionForMethod}" 
               value="submit" actionListener="#{studentBean.performAction}">
           </h:commandButton>
        </h:form>   
    </h:body>
</html>

Find the XHTML for ActionListener class demo.
eventwithclass.xhtml

<html lang="en"
      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>ActionListener with Class in JSF 2</title>
    </h:head>
    <h:body>
       <h3>ActionListener with Class in JSF 2</h3>
	 <h:form id="studentForm">
           <h:commandButton id="commandButton" action="#{studentBean.submitActionForClass}" value="submit">
              <f:actionListener type="com.concretepage.SubmitActionListener" />
           </h:commandButton>
	 </h:form>
    </h:body>
</html>

Output

Access the URL http://localhost:8080/JSF2Demo-1/eventwithmethod.xhtml for ActionListener attribute demo and you will get web page as below.

Click on sumit button and check the output in console.

Form Id by ActionListener attribute:studentForm
Action Submitted for ActionListener attribute.

Access the URL http://localhost:8080/JSF2Demo-1/eventwithclass.xhtml for ActionListener class demo and you will get web page as below.

Click on sumit button and check the output in console.

Form Id by ActionListener class:studentForm
Action Submitted for ActionListener class.

Download Source Code

jsf-2-actionlistener-attribute-and-class-example.zip

POSTED BY

ARVIND RAI

Popular Tutorials: Java 8 | Spring 5 | Angular | Android