Exemple de PrimeFaces idleMonitor

Le composant idleMonitor , surveille l’action de l’utilisateur et se déclenche lorsque l’utilisateur redevient inactif ou actif. Par défaut, la durée d’inactivité est définie sur 5 minutes (300 000 ms) et vous pouvez personnaliser la durée via l’attribut timeout comme ci-dessous:

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

Dans ce tutoriel, nous allons vous montrer un exemple idleMonitor , une boîte de dialogue de confirmation si l’utilisateur est inactif pendant 10 secondes. En fait, cet exemple est inspiré du site Web de ma banque. Il me demande toujours si je souhaite continuer après une pause de 5 minutes.

Les outils utilisés :

  1. PrimeFaces 3.3

  2. JSF 2.2.11

  3. Eclipse 4.2

  4. Maven 3

  5. Tomcat 7

1. Composant idleMonitor

Si l’utilisateur reste inactif pendant 10 secondes, une boîte de dialogue de confirmation s’affiche pour lui demander si l’utilisateur souhaite continuer ou s’il est déconnecté.

  1. Si oui, fermez la boîte de dialogue de confirmation et affichez un message de bienvenue

message via le composant growl .

  1. Si l’utilisateur choisit de se déconnecter, fermez également la boîte de dialogue de confirmation et affichez un message.

message de déconnexion via le composant growl .

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. ManagedBean

Fournit un message sur les faces pour le composant growl .

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. Démo

http://localhost : 8080/primefaces/

Exemple avec PrimeFaces idleMonitor

Exemple avec PrimeFaces idleMonitor

Télécharger le code source

Téléchargez-le - lien://wp-content/uploads/2012/08/primefaces-IdleMonitor-example.zip[primefaces-IdleMonitor-example.zip](11 Ko)

Références

cas d’exposition idleMonitor]