• Settings
    • Locale
    • Change the locale of the datepicker, schedule and client side validation messages.

      Language
      English
      English
      English
      French
      German
      German
      German
      Italian
      Korean
      Spanish
      Catalan
      Dutch
      Portuguese
      Portuguese
      Arabic
      Arabic
      Bulgarian
      Bangla
      Bosnian
      Czech
      Greek
      Estonian
      Persian
      Finnish
      Danish
      Hindi
      Indonesian
      Icelandic
      Croatian
      Japanese
      Hungarian
      Hebrew
      Georgian
      Central Kurdish
      Khmer
      Kyrgyz
      Kazakh
      Lithuanian
      Latvian
      Malay
      Norwegian
      Polish
      Romanian
      Russian
      Slovak
      Slovenian
      Serbian
      Serbian
      Swedish
      Thai
      Turkish
      Ukrainian
      Uzbek
      Vietnamese
      Chinese
      Chinese
  • Resources

Functions/Utils

Built-in functions and utils are parts of PrimeFaces Extensions: the pe:switch tag and some configuration helpers for the OmniFaces CombinedResourceHandler, HTML sanitizing and MongoDB lazy data models.

Switch Tag Documentation

Switch evaluates a value and renders the matching case or defaultCase child.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
value Object false The value to compare against case values to determine which case to render.

Case Tag Documentation

Case rendered when its value matches the switch value.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
style String false Inline style of the component.
styleClass String false Style class of the component.
value Object true The case value to compare with the switch value.

DefaultCase Tag Documentation

Default case rendered when no case value matches the switch value.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
style String false Inline style of the component.
styleClass String false Style class of the component.
Tag Documentation
Switch

Sometimes you need to display different outputs or components depending on a value. Usually you can achieve this with ui:fragment and different rendered checks. The pe:switch util tag does it without declaring those fragments.

Case: Default

EscapeSanitizerComponentListener

System event listener that sanitizes HTML content in components with escape="false". This helps prevent XSS vulnerabilities while still allowing some HTML formatting using an OWASP Java HTML Sanitizer PolicyFactory. See also Sanitizing Converter.

pom.xml

<dependency>
     <groupId>com.googlecode.owasp-java-html-sanitizer</groupId>
     <artifactId>owasp-java-html-sanitizer</artifactId>
     <version>20240325.1</version>
</dependency>

faces-config.xml

<application>
    <system-event-listener>
        <system-event-listener-class>org.primefaces.extensions.application.EscapeSanitizerComponentListener</system-event-listener-class>
        <system-event-class>jakarta.faces.event.PostAddToViewEvent</system-event-class>
        <source-class>jakarta.faces.component.html.HtmlBody</source-class>
    </system-event-listener>
</application>

CombinedResourceHandler

The OmniFaces CombinedResourceHandler optimizes your website to send only 1 CSS and 1 JS file to the browser. It requires overriding some core PrimeFaces code, because PrimeFaces hard codes some resources in the HeadRenderer, which leaves them outside the scope of being combined, like the theme.css or beanvalidation.js.

BalusC has an excellent tutorial on how to make this work found here. PrimeFaces Extensions includes these classes so you don't have to write your own or keep them up to date with every PrimeFaces release.

faces-config.xml

<application>
    <system-event-listener>
        <system-event-listener-class>org.primefaces.extensions.application.PrimeFacesScriptProcessor</system-event-listener-class>
        <system-event-class>jakarta.faces.event.PostAddToViewEvent</system-event-class>
        <source-class>jakarta.faces.component.UIViewRoot</source-class>
    </system-event-listener>
</application>

<lifecycle>
    <phase-listener>org.primefaces.extensions.application.PrimeFacesResourceProcessor</phase-listener>
</lifecycle>

Disable PrimeFaces HeadRenderer (Mojarra)

<render-kit>
    <renderer>
        <component-family>jakarta.faces.Output</component-family>
        <renderer-type>jakarta.faces.Head</renderer-type>
        <renderer-class>com.sun.faces.renderkit.html_basic.HeadRenderer</renderer-class>
    </renderer>
</render-kit>

Disable PrimeFaces HeadRenderer (MyFaces)

<render-kit>
    <renderer>
        <component-family>jakarta.faces.Output</component-family>
        <renderer-type>jakarta.faces.Head</renderer-type>
        <renderer-class>org.apache.myfaces.renderkit.html.HtmlHeadRenderer</renderer-class>
    </renderer>
</render-kit>

MorphiaLazyDataModel

PrimeFaces Extensions provides an out-of-the-box implementation of a lazy data model for MongoDB using Morphia, which supports basic features.

pom.xml

<dependency>
    <groupId>dev.morphia.morphia</groupId>
    <artifactId>morphia-core</artifactId>
    <version>2.2.3</version>
    <optional>true</optional>
</dependency>

Bean (defaults using ID field)

new MorphiaLazyDataModel<>(MyEntity.class, () -> datastore);

Bean (using field name of class "getUuid()" for rowKey)

new MorphiaLazyDataModel<>(MyEntity.class, () -> datastore, "uuid");

Global Filter and customization

// let's implement a global filter here for the string fields
dataModel.globalFilter((query, filterMeta) -> {
    Object val = filterMeta.getFilterValue();
    query.filter(
            Filters.or(
                    Filters.regex("brand").pattern(val + "").caseInsensitive(),
                    Filters.regex("previousOwners").pattern(val + "").caseInsensitive(),
                    Filters.regex("color.name").pattern(val + "").caseInsensitive()
            )
    );
});

// override the default match mode query for the "sold" field to allow filtering with strings
dataModel.overrideFieldQuery("sold", (query, filterMeta) -> {
    if (filterMeta.getFilterValue().toString().startsWith("y")) {
        query.filter(Filters.eq("sold", true));
    } else if (filterMeta.getFilterValue().toString().startsWith("n")) {
        query.filter(Filters.eq("sold", false));
    }
});

Usage


<div class="card">
    <h5>Switch</h5>
    <p>Sometimes you need to display different outputs or components depending on a value. Usually you can achieve this with
        <code>ui:fragment</code> and different <code>rendered</code> checks. The <code>pe:switch</code> util tag does it without
        declaring those fragments.</p>
    <h:form id="formSwitch">
        <p:growl id="growl" showDetail="true"/>

        <p:selectOneMenu id="caseSelection" value="#{switchController.value}">
            <f:selectItem itemLabel="Default case" itemValue="default"/>
            <f:selectItem itemLabel="Case 1" itemValue="case1"/>
            <f:selectItem itemLabel="null" itemValue="#{null}"/>
            <f:selectItem itemLabel="Case 2" itemValue="case2"/>

            <p:ajax update="swichWrapper" process="@this"/>
        </p:selectOneMenu>

        <p:divider/>

        <p:outputPanel id="swichWrapper">
            <pe:switch id="switch" value="#{switchController.value}">
                <pe:defaultCase>
                    Case: Default
                </pe:defaultCase>

                <pe:case value="case1">
                    Case: <p:commandButton id="case1button" actionListener="#{switchController.listener('case1')}" update="growl"
                                           value="Call listener with 'case1'"/>
                </pe:case>

                <pe:case value="case2">
                    Case: <p:commandButton id="case2button" actionListener="#{switchController.listener('case2')}" update="growl"
                                           value="Call listener with 'case2'"/>
                </pe:case>

                <pe:case value="#{null}">
                    Case: Null
                </pe:case>
            </pe:switch>
        </p:outputPanel>
    </h:form>
</div>