2012-02-24 64 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>