PrimeFaces Extensions Showcase

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

Callback: onOpen and onClose		Event Result
Callback: onButton		Event Result

Source

XHTML page
Managed bean


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


@Named
@ViewScoped
public class CalculatorController implements Serializable {

    private static final long serialVersionUID = 20120224L;

    private BigDecimal hInputText;
    private BigDecimal pInputText;
    private BigDecimal pInputNumber = new BigDecimal("0.00");
    private String language = "fr";
    private boolean rtl = false;

    public List<SelectItem> getLanguages() {
        final List<SelectItem> results = new ArrayList<>();
        results.add(new SelectItem("ms", "Bahasa Melayu (Malaysian)"));
        results.add(new SelectItem("ca", "Català (Catalan)"));
        results.add(new SelectItem("da", "Dansk (Danish)"));
        results.add(new SelectItem("de", "Deutsch (German)"));
        results.add(new SelectItem("es", "Español (Spanish)"));
        results.add(new SelectItem("fr", "Français (French)"));
        results.add(new SelectItem("hr", "Hrvatski jezik (Croatian)"));
        results.add(new SelectItem("it", "Italiano (Italian)"));
        results.add(new SelectItem("nl", "Nederlands (Dutch)"));
        results.add(new SelectItem("no", "Norsk (Norwegian)"));
        results.add(new SelectItem("pl", "Polski (Polish)"));
        results.add(new SelectItem("pt_BR", "Português (Portuguese/Brazilian)"));
        results.add(new SelectItem("ru", "\u0420\u0443\u0441\u0441\u043a\u0438\u0439 (Russian)"));
        results.add(new SelectItem("sl", "Slovenski Jezik (Slovenian)"));
        results.add(new SelectItem("sr", "\u0421\u0440\u043f\u0441\u043a\u0438 (Serbian)"));
        results.add(new SelectItem("tr", "Türkçe (Turkish)"));
        results.add(new SelectItem("uk", "\u0423\u043a\u0440\u0430\u0457\u043d\u0441\u044c\u043a\u0430 (Ukrainian)"));
        results.add(new SelectItem("zh_CN", "\u4e2d\u6587 (\u7b80\u4f53) (Chinese, Simplified)"));
        results.add(new SelectItem("zh_TW", "\u6b63\u9ad4\u4e2d\u6587 (\u7e41\u9ad4) (Chinese, Traditional)"));
        return results;
    }

    public void closeListener(final CloseEvent closeEvent) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Close fired",
                    "Component id: " + closeEvent.getComponent().getId());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void openListener(final OpenEvent openEvent) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Open fired",
                    "Component id: " + openEvent.getComponent().getId());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void buttonListener(final ButtonEvent buttonEvent) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Button fired",
                    "Name: " + buttonEvent.getName() + " Value: " + buttonEvent.getValue());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public BigDecimal gethInputText() {
        return hInputText;
    }

    public void sethInputText(final BigDecimal hInputText) {
        this.hInputText = hInputText;
    }

    public BigDecimal getpInputText() {
        return pInputText;
    }

    public void setpInputText(final BigDecimal pInputText) {
        this.pInputText = pInputText;
    }

    public BigDecimal getpInputNumber() {
        return pInputNumber;
    }

    public void setpInputNumber(final BigDecimal pInputNumber) {
        this.pInputNumber = pInputNumber;
    }

    public String getLanguage() {
        return language;
    }

    public void setLanguage(final String language) {
        this.language = language;
    }

    public boolean isRtl() {
        return rtl;
    }

    public void setRtl(final boolean rtl) {
        this.rtl = rtl;
    }

}