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);
    }

}

Use Cases

Documentation pe:counter

Attributes (move mouse over the names to see data types)

Name	Description
autoStart	Whether to start the counter automatically.Default is true.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
decimal	Decimal separator character.
decimals	Number of decimal places.Default is 0.
duration	Animation duration in seconds.Default is 2.
end	Ending value for the counter.
id	Unique identifier of the component in a namingContainer.Default is generated.
locale	Locale for number formatting. Can be a string or java.util.Locale instance.
onend	Client-side callback when the counter animation ends.
onstart	Client-side callback when the counter animation starts.
prefix	Text to display before the number.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
separator	Thousands grouping separator character.
smartEasingAmount	Amount for smart easing.Default is 333.
smartEasingThreshold	Threshold for smart easing.Default is 999.
start	Starting value for the counter.Default is 0.0.
style	Inline style of the component.
styleClass	Style class of the component.
suffix	Text to display after the number.
useEasing	Whether to use easing in the animation.Default is true.
useGrouping	Whether to use grouping separators (e.g. 1,000).Default is true.
visible	Whether the component is initially visible.Default is true.
widgetVar	Name of the client side widget.