PrimeFaces Extensions Showcase

Counter

Counter animates a numerical value by counting to it.

Basic Usage
Start Value
Count Down
Decimal Places
Separators
Locale
Prefix Suffix
AJAX and Events

Source

XHTML page
Managed bean


                <h:panelGrid columns="2" columnClasses="normal, bold">
        <h:outputText value="Basic Usage"/>
        <pe:counter end="9000" separator=""/>
        <h:outputText value="Start Value"/>
        <pe:counter end="9000" start="1000"/>
        <h:outputText value="Count Down"/>
        <pe:counter start="9000" end="1000"/>
        <h:outputText value="Decimal Places"/>
        <pe:counter end="9000" decimals="2"/>
        <h:outputText value="Separators"/>
        <pe:counter end="9000" decimals="2" separator="." decimal=","/>
        <h:outputText value="Locale"/>
        <pe:counter end="9000" locale="fr_FR" decimals="2"/>
        <h:outputText value="Prefix Suffix"/>
        <pe:counter end="9000" prefix="USD " suffix=" $" style="background-color:black;color:MediumSeaGreen;"/>
        <h:outputText value="AJAX and Events"/>
        <pe:counter start="0" end="9000" duration="5" onstart="console.log('STARTED')" onend="console.log('ENDED')" autoStart="true">
            <p:ajax event="start" listener="#{counterController.startListener}"/>
            <p:ajax event="end" listener="#{counterController.endListener}"/>
        </pe:counter>
    </h:panelGrid>


                @Named
@ViewScoped
public class CounterController implements Serializable {

    private static final long serialVersionUID = 20120224L;

    public void startListener(final SelectEvent<Double> event) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Start fired",
                    "Value: " + event.getObject());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void endListener(final SelectEvent<Double> event) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_WARN, "End fired",
                    "Value: " + event.getObject());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

}