JSF Event Listener - Action, Phase, Value Change With Examples

JSF Event and Listener model is based on the JavaBeans specification. An event is defined as a signal triggered based upon the user actions such as click of button, hyperlink, changing the input value etc. JSF tells the component to invoke the appropriate listener class that process the event generated by the user.

Lets now look in detail about the event classes and listener interfaces.

JSF Event Classes

The classes related to the JSF events are defined in the javax.faces.event package. While implementing the event classes in JSF, the javax.faces.event package has to be extended. The generated event can be obtained by calling event.getComponent as

The events can be queued at the end of request processing lifecycle by using the queue() method. The queuing at a particular stage can be done by using the following code

In the above code, the events will occur at the end of the process validation phase.

JSF Listener Classes

An event is associated with the listener class for all the events. For instance, if the event is a valuechange event then the corresponding listener class ValueChangeListener is associated with it. SImilarly the ActionListener is for the action event.

JavaBeans specifications makes the methods mandatory for registering a particular listener to an event. For example if the event name is MyOwnEvent and the Listener class is MyOwnListener and want this event to be called on MyOwnComponent then the following methods have to be defined for registering the listener class.

JSF Events

The JSF events fall into one of the three categories namely

  1. Action Events
  2. Value Change Events
  3. Phase Events

JSF Action Events

Action events are the events that are generated for the ui components like command button or command hyperlink. Any number of listeners can be attached to a single event.

Consider an example of submitting a form.

Create a JSF view page mobile.xhtml as shown below.

Here we define attribute actionListener calling the method processAction of MobileActionListener class.

Create MobileActionListener.java class as;

Here we implement the ActionListener class and override the processAction method. Inside this method we are just printing the event that is invoked by the user. The ui.getClass().getName() methods prints the action event triggered.

Make the following entry in faces-config.xml file to invoke the actionlistener class.

The managed bean Mobile Action Listener class path is specified in the faces-config.xml file.

Now run the application and go to the mobile.xhtml page in browser and click the submit button which produces the following output in the console

Since the submit button is the event fired the event is CommandButton tag which corresponds to submit button.

JSF Value Change Event

Value change events refers to the UI components textfield, radio button, list box etc. The value change event will get fired as soon as the value is changed in the UI component. Listeners for this event usually perform validations on the fields to check whether the entered value is valid or not according to the requirements.

Consider the following example of changing a value in a listbox and displaying the new value

Create mobilevalue.xhtml as;

Here we invoke the valueChangeListener attribute and invoke the onSelectNames method of the MobileValueChangeListener bean.

Create the MobileValueChangeListener.java bean as;

In the onSelectNames method we obtain the new value and old value through the getOldValue and getNewValue methods and check if the new value is not equal null and if true store the new value to the result variable and display the value of this variable on the JSF view page.

Now run the application that produces the following output on changing the value in the listbox.


JSF Phase Event

This type of event involves the events to be fired in one of the six phases of JSF lifecycle either during start or towards the end of each phase.

Consider an example of capturing the phase events by creating CustomPhaseListener.java as;

Create a JSF view page phaseListener.xhtml as;

Now run the application and enter some text on phaseListener page and click the submit button. Check the server logs and following output is produced.

The event id’s for each phase is printed in the console.

Finally below image shows the project structure.


You can download the final project from below link and play around with it to learn more about JSF Event and Listeners.

By admin

Leave a Reply