2012-02-24 93 views
0

我正在使用JSF 2.0,我有一个要求,当会话超时发生时,然后我想显示一个超时警告弹出窗口,如果我点击确定按钮从超时警告窗口点击弹出那么会话希望继续其他方式,它应该重定向到会话超时页面,可以请你帮我在这个如何创建这种类型的需求。Java会话超时弹出

感谢,玛尼

回答

2

仅从理论:Primefaces组件库有分量p:idleMonitor,其中在一定时间后会弹出一个对话框:

<p:idleMonitor timeout="10000" 
      onidle="idleDialog.show()" onactive="idleDialog.hide()"/> 

我从来没有使用过它在实践中,但是当我注意到这一点组件,我认为这可以用作会话超时警告系统。也许你可以根据你的特殊功能要求进行调整。但请记住,此组件会计算客户端空闲时间,而不是服务器空闲时间。

+0

感谢马特为您的快速反应我不想使用primefaces我可以使用jq uery或Ajax来实现这个 – user1166528 2012-02-24 09:25:59

+0

Primefaces在封面下使用JQuery。也许Primefaces展示中的源代码(我的答案中的链接)将引导您朝正确的方向前进一点。 – 2012-02-24 09:40:50

2

我得到了在Java脚本解决方案 我创建的所有jQuery函数作为公共

var defaults = { 
     inactivity: 600000, //10 Minutes 
     noconfirm: 300000, //5 minutes 
     sessionAlive: 900000, //15 Minutes 
     redirect_url: 'TimeOut.xhtml', 
     click_reset: true, 
     alive_url: '', 
     logout_url: 'TimeOut.xhtml' 
    } 


var opts = $.extend(defaults); 
var liveTimeout, confTimeout, sessionTimeout; 

$(function(){ 
    start_liveTimeout = function() 
     { 
     clearTimeout(liveTimeout); 
     clearTimeout(confTimeout); 
     liveTimeout = setTimeout(logout, opts.inactivity); 

     if(opts.sessionAlive) 
     { 
      clearTimeout(sessionTimeout); 
      sessionTimeout = setTimeout(keep_session, opts.sessionAlive); 
     } 
     };  
    }); 

$(function(){ 
    logout = function() {  
     confTimeout = setTimeout(redirect, opts.noconfirm); 
     showAlert();   
     };  
    }); 

$(function(){ 
    redirect = function() { 
     if(opts.logout_url) 
     { 
      $.get(opts.logout_url); 
     } 
     window.location.href = opts.redirect_url; 
     }; 
    }); 

$(function(){ 
    stay_logged_in = function(el) { 
     start_liveTimeout(); 
     if(opts.alive_url) 
     { 
      $.get(opts.alive_url); 
     } 
     }; 
    }); 

$(function(){ 
    keep_session = function() { 
     $.get(opts.alive_url); 
     clearTimeout(sessionTimeout); 
     sessionTimeout = setTimeout(keep_session, opts.sessionAlive); 
     } ; 

    }); 

(function($){ 
    $.fn.idleTimeout = function(options) { 

     return this.each(function() { 
     obj = $(this); 
     start_liveTimeout(); 
     if(opts.click_reset) 
     { 
      $(document).bind('click', start_liveTimeout); 
     } 
     if(opts.sessionAlive) 
     { 
      keep_session(); 
     } 
     }); 

    }; 
})(jQuery); 


$(document).ready(function(){ 
    $(document).idleTimeout(); 
    $("input[id$=btnOK]").click(function() { 
     $.modal.close(); 
     stay_logged_in(); 
    }); 
}); 

function showAlert() { 
    idleSessionAlert = $('#basic-modal-content').modal({ 
     opacity : 50, 
     overlayCss: {backgroundColor:"#000"}, 
     escClose : false, 
     modal:true,  
     onOpen: function (dialog) { 
      dialog.overlay.slideDown('slow', function() { 
       dialog.data.hide(); 
       dialog.container.fadeIn('slow', function() { 
        dialog.data.fadeIn('slow'); 
       }); 
      }); 
     }, 
     onClose: function (dialog) { 
      dialog.data.fadeOut('slow', function() { 
       dialog.container.hide('slow', function() { 
        dialog.overlay.slideUp('slow', function() { 
         $.modal.close(); 
        }); 
       }); 
      }); 
     } 

    }); 
} 

在CSS中

#basic-modal-content { 
    display: none; 
} 
#simplemodal-container { 
    display:none; 
    height:300px; 
    width:530px; 
    color:#000000; 
    background-color:#ffffff; 
    border:1px solid #ffffff; 
    border-radius: 10px; 
    padding:12px; 
} 
#simplemodal-container p { 
    color:#000000; 
    display:block; 
    font-size: 1em; 
    font-style: verdana normal; 
    padding: 10px 10px 5px 10px; 
    margin: 0px; 
    float: left; 
    width: 510px; 
} 
.modalGroupHeader { 
    line-height: 1.25; 
    font-style: arial normal; 
    font-size: 1em; 
    font-weight: bold; 
    position: relative; 
    display: block; 
    color: #000000; 
    padding-top: 0.615em; 
    padding-bottom: 0.615em; 
    padding-left: 10px; 
    float: left; 
} 
.modalSectionHeader { 
    line-height: 48px; 
    font-style: arial normal; 
    font-size: 1.308em; 
    font-weight: normal; 
    display: block; 
    color: #007dba; 
    float: left; 
    width: 530px; 
    padding-bottom: 10px; 
} 
.modalSectionHeader_left { 
    height: 48px; 
    width: 15px; 
    background-image: url(../images/sectionHeader/sectionHeader_left.gif); 
    float: left; 
    position: relative; 
} 
.modalSectionHeader_right { 
    right: 0; 
    height: 48px; 
    width: 15px; 
    background-image: url(../images/sectionHeader/sectionHeader_right.gif); 
    float: right; 
    position: relative; 
} 
.modalSectionHeader_body { 
    line-height: 48px; 
    height: 48px; 
    width: 500px; 
    background-image: url(../images/sectionHeader/sectionHeader_tile.gif); 
    background-repeat: repeat-x; 
    float: left; 
    position: relative; 
} 
.modalButtonPanel { 
    width: 530px; 
    float: left; 
    bottom: 10px; 
    position:absolute; 
} 

在我的XHTML我打电话按钮JSF Ajax请求,因此将扩大我的会议

<div id="basic-modal-content"> 
       <p>Click OK to continue your session</p> 
        <h:commandButton id="btnOK" styleClass="btnOK"> 
         <f:ajax event="click" listener="#{HandlerBean.extendSession()}" immediate="true" ></f:ajax> 
        </h:commandButton> 
      </div>