PrimeFaces idleMonitor example

The idleMonitor component, monitor user action and fire when user goes idle or active again. By default, the idle time is set to 5 minutes (300000 ms), and you can customize the duration via timeout attribute like below :


  <!-- fire if user idle for 10 seconds -->
  <p:idleMonitor timeout="10000" onidle="idleDialog.show()" />

In this tutorial, we will show you a idleMonitor example, prompts a confirm dialog if user idle for 10 seconds. Actually, this example is inspired by my bank website, it always prompts me and ask whether I want to continue after idle for 5 minutes.

Tools Used :

  1. PrimeFaces 3.3
  2. JSF 2.2.11
  3. Eclipse 4.2
  4. Maven 3
  5. Tomcat 7
Note
You may also interest at this awesome PrimeFaces idleMonitor showcase, it shows you a simple and ajax way of using idleMonitor.

1. idleMonitor Component

If user goes idle for 10 seconds, a confirm dialog will be prompted, and ask if user want to continue or logout?

  1. If yes, then close the confirm dialog, and display a welcome back message via growl component.
  2. If user choose logout, close the confirm dialog also, and display a logout message via growl component.
index.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
</h:head>
<h:body>
 <h1>PrimeFaces idleMonitor example</h1>

  <h:form>
	<p:growl id="msg" showDetail="true" sticky="true" />

	<!-- If idle 10 seconds, run 'idleDialog' -->
	<p:idleMonitor timeout="10000" onidle="idleDialog.show()" />

	<p:confirmDialog id="confirmDialog"
		message="You have been idle for at least 10 seconds, 
                            Please click ok to continue."
		header="Are you there?" severity="alert" widgetVar="idleDialog">

		<p:commandButton id="confirm" value="Ok" update="msg"
			oncomplete="idleDialog.hide()"
			actionListener="#{idleBean.welcomeListener}" />

		<p:commandButton id="Logout" value="LogMeOut" update="msg"
			oncomplete="idleDialog.hide()"
			actionListener="#{idleBean.logoutListener}" />

	</p:confirmDialog>

  </h:form>

</h:body>
</html>

2. ManageBean

Provide faces message for growl component.

IdleMonitorBean.java

package com.mkyong;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;

@ManagedBean(name = "idleBean")
public class IdleMonitorBean {

	public void welcomeListener() {
	    FacesContext.getCurrentInstance().addMessage(
		null,
		new FacesMessage(FacesMessage.SEVERITY_WARN, "Welcome Back",
			"Continue your works."));

	}

	public void logoutListener() {
	    FacesContext.getCurrentInstance().addMessage(
		null,
		new FacesMessage(FacesMessage.SEVERITY_WARN,
			"You Have Logged Out!",
			"Thank you for using abc Online Financial Services"));

		// invalidate session, and redirect to other pages
	}
}

3. Demo

http://localhost:8080/primefaces/

PrimeFaces idleMonitor example
PrimeFaces idleMonitor example

Download Source Code

Download it – primefaces-IdleMonitor-example.zip (11 KB)

References

  1. PrimeFaces idleMonitor show case

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
7 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
AbhishekGlaydson MartinsEngels MedinaAmit KumarAlan B. Dee Recent comment authors
newest oldest most voted
Abhishek
Guest
Abhishek

what about the multiple tab for a single browser issue …take for instance its opened in two different tabs for one tab it shows the message properly and you can continue the session or cancel it but for the other tab you have to manually close the popup ……..how can that be managed the action taken for one tab to followed by other tabs as well. Thanks

Glaydson Martins
Guest
Glaydson Martins

In Primefaces version 5 or higher the call has changed: PF(‘idleDialog’).show() instead of idleDialog.show()

Engels Medina
Guest
Engels Medina

Greetings, Did you know how I can set log out command after the current page is pressed F5 or set to update/refresh the page?

Amit Kumar
Guest
Amit Kumar

any one can help me to make example for pe:timer?

Alan B. Dee
Guest
Alan B. Dee

I just upgraded my project’s Primefaces to 5.1 and the registered globals for javascript items are no longer valid. The call for idleDialog.show() needs to be changed:

DougMH
Guest
DougMH

Is there anyway to put an idleMonitor in the confirmDialog of your example? What I need to do is have the dialog pop-up (after 13 minutes) with JUST the OK button. That’s easy. But then, if the user doesn’t click the OK button within 1 minute, I need to go to the logout. I tried, but from within the confirmDialog, it will not recognize the idleBean.logoutListener.

Alejandro Ayala
Guest
Alejandro Ayala

I downloaded the file, but this is the example of another component (p: editor). I think you uploaded a wrong file….regards