Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
Calculator
Advanced example demonstrates using of ajax events, callbacks and interesting settings.

Examples include:
  • Javascript control of the component on the client
  • Javascript callbacks for "onOpen" and "onClose" events
  • p:ajax server side events for "open" ,"close", and "button" events
Event Result
Event Result

Source

<h:panelGrid columns="3">
        <p:outputLabel value="Callback: onOpen and onClose" />
        <p:inputText id="txtOnOpenClose" value="867">
            <pe:calculator id="calculator1" widgetVar="calc1" onopen="$('#lblOnOpenClose').text('Open Event: ' + value);"
                onclose="$('#lblOnOpenClose').text('Close Event: ' + value);" showOn="both">
                <p:ajax event="open" listener="#{calculatorController.openListener}" update="growl" />
                <p:ajax event="close" listener="#{calculatorController.closeListener}" update="growl" />
                <p:ajax event="button" listener="#{calculatorController.buttonListener}" update="growl" />
            </pe:calculator>
        </p:inputText>
        <h:outputText id="lblOnOpenClose" value="Event Result" style="font-weight:bold" />

        <p:outputLabel value="Callback: onButton" />
        <p:inputText widgetVar="txtOnButton" value="5309">
            <pe:calculator id="calculator2" widgetVar="calc2" showOn="both"
                onbutton="$('#lblOnButton').text('Button: ' + label + ' Current Value: ' + value)">
                <p:ajax event="button" listener="#{calculatorController.buttonListener}" update="growl" />
            </pe:calculator>
        </p:inputText>
        <h:outputText id="lblOnButton" value="Event Result" style="font-weight:bold" />
    </h:panelGrid>
    
    <p/>

    <h:panelGroup layout="block" style="text-align:left;margin-bottom:10px;">
        <p:commandButton value="Show" type="button" onclick="PF('calc1').show();" />
        <p:commandButton value="Hide" type="button" onclick="PF('calc1').hide();" />
        <p:commandButton value="Disable" type="button" onclick="PF('calc1').disable();PF('calc2').disable();" />
        <p:commandButton value="Enable" type="button" onclick="PF('calc1').enable();PF('calc2').enable();" />
        <p:commandButton value="Destroy" type="button" onclick="PF('calc1').destroy();PF('calc2').destroy();" />
    </h:panelGroup>
            
Components and more
Documentation pe:calculator
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
widgetVar Name of the client side widget.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An el expression referring to a server side UIComponent instance in a backing bean.
widgetVar Name of the client side widget.
showOn When to display the calculator: 'focus' for popup on focus, 'button' for trigger button, 'both' for either, 'operator' for non-numeric character entered, 'opbutton' for operator/button combination.
layout The layout of keys: 'standard', scientific', or a custom defined layout.
locale String or java.util.Locale representing user locale. Default is a locale specified in view root.
precision The number of digits of precision to use in rounding for display. Default is 10.
dir Defines text direction, valid values are "ltr" (default) and "rtl".
styleClass Style class of the main container element. Default value is null.
for The target input.
onopen Javascript handler to execute before a popup calculator opens and allows the field value to be altered before use.
onclose Javascript handler to execute when the calculator closes and provides the (possibly updated) field value, and the calculator instance object.
onbutton Javascript handler to execute for each activated button and provides the button's label, the current calculator value, and the calculator instance object.
Events (move mouse over the names to see classes)
Name Description
openfires when the calculator is opened
closefires when the calculator is closed
buttonfires when each calculator button is pressed
PrimeFaces Extensions Showcase - © 2011-2023,PrimeFaces: 14.0.5,PrimeFaces Extensions: 14.0.5,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2024-09-10 21:01