RichFaces JQuery UI Session Timeout – POPUP
RichFaces JQuery UI Session Timeout – popup:
The goal is to implement JQuery Session Timeout – UI Popup in RichFaces 4.2.2.Final:
While googling I found some useful java script, css files and tried to integrate those in RichFaces. I found it useful and would like to share with everyone.
Here is the UI. Test.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jsp/jstl/core"
lang="en">
<h:head/>
<h:body>
<ui:composition>
<h:head>
<style type="text/css">
#idletimeout { background:#CC5100; border:3px solid #FF6500;
color:#fff; font-family:arial, sans-serif; text-align:center; font-size:12px;
padding:10px; position:relative; top:0px; left:0; right:0; z-index:100000; display:none; }
#idletimeout a { color:#fff; font-weight:bold }
#idletimeout span { font-weight:bold }
</style>
<link type="text/css" href="../css/jquery-ui-1.8rc1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8rc1.custom.min.js"></script>
<script type="text/javascript" src="../js/timeout.js"></script>
<script type="text/javascript" src="../js/jquery.idletimer.js"></script>
<style type="text/css">
body {
font-family:Arial,Geneva,Verdana,sans-serif;
font-size: 0.8em;
}
</style>
<script type="text/javascript">
var idleTime = 2000; // number of miliseconds until the user is considered idle
var initialSessionTimeoutMessage = 'Your session will expire in seconds.
Click on OK to continue your session.';
Click on OK to continue your session.';
var sessionTimeoutCountdownId = 'sessionTimeoutCountdown';
var redirectAfter = 59; // number of seconds to wait before redirecting the user
var redirectTo = '/webproject/pagesErrors/viewExpired.jsp'; // URL to relocate the user to once they have timed out
var keepAliveURL = 'keepAlive.php'; // URL to call to keep the session alive
var expiredMessage = 'Your session has expired. You are being logged out for security reasons.'; // message to show user when the countdown reaches 0
var running = false; // var to check if the countdown is running
var timer; // reference to the setInterval timer so it can be stopped
</script>
</h:head>
<h:form id="form">
<div id="sessionTimeoutWarning" style="display: none"></div>
</h:form>
</ui:composition>
</h:body>
</ui:composition>
(Copy the CSS file to CSS folder - Didn't have time to go through the css classes of which one being used )
Download the CSS and JS files
jquery-ui-1.8rc1.custom.css - https://code.google.com/p/hrit/source/browse/src/main/webapp/scripts/jquery/smoothness/jquery-ui-1.8rc1.custom.css?spec=svn.cortexrestletform.e49862f2ea5d989d0557a9a733c6d9e27370a765&repo=cortexrestletform&r=e49862f2ea5d989d0557a9a733c6d9e27370a765
jquery-1.4.1.min.js - http://jquery.com/download/
jquery-ui-1.8rc1.custom.min.js https://code.google.com/p/trespams/source/browse/trunk/media/admin_tools/js/jquery/jquery-ui-1.8rc1.custom.min.js?r=153
timeout.js
$(document).ready(function() {
// create the warning window and set autoOpen to false
var sessionTimeoutWarningDialog = $("#sessionTimeoutWarning");
$(sessionTimeoutWarningDialog).html(initialSessionTimeoutMessage);
$(sessionTimeoutWarningDialog).dialog({
title: 'Session Expiration Warning',
autoOpen: false, // set this to false so we can manually open it
closeOnEscape: false,
draggable: false,
width: 460,
minHeight: 50,
modal: true,
beforeclose: function() { // bind to beforeclose so if the user clicks on the "X" or escape to close the dialog, it will work too
// stop the timer
clearInterval(timer);
// stop countdown
running = false;
// ajax call to keep the server-side session alive
$.ajax({
url: keepAliveURL,
async: false
});
},
buttons: {
OK: function() {
// close dialog
$(this).dialog('close');
}
},
resizable: false,
open: function() {
// scrollbar fix for IE
$('body').css('overflow','hidden');
},
close: function() {
// reset overflow
$('body').css('overflow','auto');
}
}); // end of dialog
// start the idle timer
$.idleTimer(idleTime);
// bind to idleTimer's idle.idleTimer event
$(document).bind("idle.idleTimer", function(){
// if the user is idle and a countdown isn't already running
if($.data(document,'idleTimer') === 'idle' && !running){
var counter = redirectAfter;
running = true;
// intialisze timer
$('#'+sessionTimeoutCountdownId).html(redirectAfter);
// open dialog
$(sessionTimeoutWarningDialog).dialog('open');
// create a timer that runs every second
timer = setInterval(function(){
counter -= 1;
// if the counter is 0, redirect the user
if(counter === 0) {
$(sessionTimeoutWarningDialog).html(expiredMessage);
$(sessionTimeoutWarningDialog).dialog('disable');
window.location = redirectTo;
} else {
$('#'+sessionTimeoutCountdownId).html(counter);
};
}, 1000);
};
});
});
jquery.idletimer.js - https://code.google.com/p/fasttimesheet/source/browse/trunk/jquery/jquery.idle-timer.js?spec=svn26&r=26
Run the test.xhtml, the popup will appear in 2 seconds and will be visible for 59 seconds.
Modify the JavaScript to play around:
<script type="text/javascript">
var idleTime = 2000; // number of miliseconds until the user is considered idle
var redirectAfter = 59; // number of seconds to wait before redirecting the user
var redirectTo = '/webproject/pagesErrors/viewExpired.jsp'; // URL to relocate the user to once they have timed out
</script>
If you feel this article is useful, please leave your comments.
