Input
Editors
Data
Charts & Maps
Panel & Layout
Overlay & Feedback
Media
Misc
Resources
Timer Basic
Timer fires a JSF listener after a customizable interval. It also provides a JavaScript API to start, pause and stop the timer.
Basic usage
The interval is set via timeout. Set singleRun to false to make it periodic; the listener fires every 5 seconds here.
Direction
Choose the direction of the timer with the forward attribute.
JS Api
The timer can be controlled from JavaScript: start, pause, restart and stop. When stopping, pass true to stop silently and skip the JSF listener.
Usage
<div class="card">
<h5>Basic usage</h5>
<p>The interval is set via <code>timeout</code>. Set <code>singleRun</code> to <code>false</code> to make it periodic; the listener fires every 5 seconds here.</p>
<h:form id="formBasic">
<p:messages id="messages" showSummary="true" showDetail="true"/>
<pe:timer
timeout="5"
singleRun="false"
listener="#{basicTimerController.onTimeout}"
update="messages"
style="color: red;"/>
</h:form>
</div>
<div class="card">
<h5>Direction</h5>
<p>Choose the direction of the timer with the <code>forward</code> attribute.</p>
<h:form id="formDirection">
<h:panelGrid columns="2">
<h:outputText value="Forward"/>
<h:outputText value="Backward"/>
<pe:timer
timeout="1000"
forward="true"/>
<pe:timer
timeout="1000"
forward="false"/>
</h:panelGrid>
</h:form>
</div>
<div class="card">
<h5>JS Api</h5>
<p>The timer can be controlled from JavaScript: start, pause, restart and stop. When stopping, pass <code>true</code> to stop silently and skip the JSF listener.</p>
<h:form id="formJsApi">
<p:messages id="messages" showSummary="true" showDetail="true"/>
<pe:timer
widgetVar="timerJsApi"
timeout="10000"
forward="true"
listener="#{jsApiTimerController.listener}" update="messages"
singleRun="false"/>
<hr/>
<p:commandButton value="Start" onclick="PF('timerJsApi').start()" type="button"/>
<p:commandButton value="Pause" onclick="PF('timerJsApi').pause()" type="button"/>
<p:commandButton value="Restart" onclick="PF('timerJsApi').restart()" type="button"/>
<p:commandButton value="Stop" onclick="PF('timerJsApi').stop()" type="button"/>
<p:commandButton value="Stop (Silent)" onclick="PF('timerJsApi').stop(true)" type="button"/>
</h:form>
</div>
package org.primefaces.extensions.showcase.controller.timer;
import java.io.Serial;
import java.io.Serializable;
import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.inject.Named;
@Named
@RequestScoped
public class BasicTimerController implements Serializable {
@Serial
private static final long serialVersionUID = 1L;
public void onTimeout() {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "BOOM", null));
}
}
package org.primefaces.extensions.showcase.controller.timer;
import java.io.Serial;
import java.io.Serializable;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
@Named
@ViewScoped
public class JsApiTimerController implements Serializable {
@Serial
private static final long serialVersionUID = 1L;
public void listener() {
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO, "Stopped", null));
}
}