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 :
- PrimeFaces 3.3
- JSF 2.2.11
- Eclipse 4.2
- Maven 3
- Tomcat 7
Note
You may also interest at this awesome PrimeFaces idleMonitor showcase, it shows you a simple and ajax way of using
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?
- If yes, then close the confirm dialog, and display a welcome back message via
growlcomponent. - If user choose logout, close the confirm dialog also, and display a logout message via
growlcomponent.
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/
Download Source Code
Download it – primefaces-IdleMonitor-example.zip (11 KB)
References
About Author
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.
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
In Primefaces version 5 or higher the call has changed: PF(‘idleDialog’).show() instead of idleDialog.show()
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?
any one can help me to make example for pe:timer?
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:
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.
I downloaded the file, but this is the example of another component (p: editor). I think you uploaded a wrong file….regards
Download zip file is updated, thanks for your bug report 🙂