1. Introduction
Primefaces is an open source UI component suite for Java Server Faces (JSF) applications.
In this tutorial, we’ll give an introduction to Primefaces, and demonstrate how to configure it and use some of its main features.
2. Overview
2.1. Java Server Faces
Java Server Faces is a component-oriented framework for building user interfaces for Java web applications. The JSF specification is formalized through the Java Community Process and is a standardized display technology.
More about JSF in Spring environment can be found here.
2.2. Primefaces
Built on top of JSF, Primefaces supports rapid application development by providing pre-built UI components which can be added to any project.
In addition to Primefaces, there is also the Primefaces Extensions project. This community-based, open-source project provides additional components besides the standard ones.
3. Application Setup
For the purpose of demonstrating some Primefaces components, let’s create a simple web application using Maven.
3.1. Maven Configuration
Primefaces has a lightweight configuration with only one jar so to get started, let’s add the dependency to our pom.xml:
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>6.2</version>
</dependency>
The latest version can be found here.
3.2. Controller – Managed Bean
Next, let’s create the bean class for our component:
@ManagedBean(name = "helloPFBean")
public class HelloPFBean {
}
We need to provide a @ManagedBean annotation to bind our controller to a view component.
3.3. View
Finally, let’s declare the Primefaces namespace in our .xhtml file:
<html xmlns:p="http://primefaces.org/ui">
4. Example Components
To render the page, start the server and navigate to:
http://localhost:8080/jsf/pf_intro.xhtml
4.1. PanelGrid
Let’s use PanelGrid as an extension to standard JSF panelGrid:
<p:panelGrid columns="2">
<h:outputText value="#{helloPFBean.firstName}"/>
<h:outputText value="#{helloPFBean.lastName}" />
</p:panelGrid>
Here, we’ve defined a panelGrid with two columns and set the outputText from JSF facelets to display data from a managed bean.
The values declared in each outputText correspond to firstName and lastName properties declared in our @ManagedBean:
private String firstName;
private String lastName;
Let’s take a look at our first, simple component:
<img class=" wp-image-32802 alignnone" style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; white-space: normal;" src="https://www.baeldung.com/wp-content/uploads/2018/04/panelGridPF-300x68.png" alt="" width="256" height="58" />
4.2. SelectOneRadio
We can use selectOneRadio component to provide a radio button functionality:
<h:panelGrid columns="2">
<p:outputLabel for="jsfCompSuite" value="Component Suite" />
<p:selectOneRadio id="jsfCompSuite" value="#{helloPFBean.componentSuite}">
<f:selectItem itemLabel="ICEfaces" itemValue="ICEfaces" />
<f:selectItem itemLabel="RichFaces" itemValue="Richfaces" />
</p:selectOneRadio>
</h:panelGrid>
We need to declare the value variable in the backing bean to hold the radio button value:
private String componentSuite;
This setup will result in a 2 option radio button which is tied to the underlying String property componentSuite:
4.3. Data Table
Next, let’s use the dataTable component to display data in a table layout:
<p:dataTable var="technology" value="#{helloPFBean.technologies}">
<p:column headerText="Name">
<h:outputText value="#{technology.name}" />
</p:column>
<p:column headerText="Version">
<h:outputText value="#{technology.currentVersion}" />
</p:column>
</p:dataTable>
Similarly, we need to provide a Bean property to hold the data for our table:
private List<Technology> technologies;
Here, we have a list of various technologies and their version numbers:
4.4. Ajax With InputText
We can also use p:ajax to provide Ajax features to our components.
For example, let’s use this component to apply a blur event:
<h:panelGrid columns="3">
<h:outputText value="Blur event " />
<p:inputText id="inputTextId" value="#{helloPFBean.inputText}}">
<p:ajax event="blur" update="outputTextId"
listener="#{helloPFBean.onBlurEvent}" />
</p:inputText>
<h:outputText id="outputTextId"
value="#{helloPFBean.outputText}" />
</h:panelGrid>
Accordingly, we’ll need to provide properties in the bean:
private String inputText;
private String outputText;
In addition, we also need to provide a listener method in our bean for our AJAX blur event:
public void onBlurEvent() {
outputText = inputText.toUpperCase();
}
Here, we’ve simply converted the text to upper case to demonstrate the mechanism:
Besides that, we can also use p:commandButton as an extension to the standard h:commandButton component.
For example:
<p:commandButton value="Open Dialog"
icon="ui-icon-note"
onclick="PF('exDialog').show();">
</p:commandButton>
As a result, with this configuration, we have the button which we’ll use to open dialog (using onclick attribute):
4.6. Dialog
Furthermore, to provide the functionality of the dialog, we can use p:dialog component.
Let’s also use the button from the last example to open dialog on click:
<p:dialog header="Example dialog" widgetVar="exDialog" minHeight="40">
<h:outputText value="Hello Baeldung!" />
</p:dialog>
In this case, we have a dialog with the basic configuration which can be triggered using the commandButton described in the previous section:
5. Primefaces Mobile
Primefaces Mobile (PFM) provides a UI kit to create Primefaces applications for mobile devices.
For this reason, PFM supports responsive design adjusted for mobile devices.
5.1. Configuration
To begin with, we need to enable mobile navigation support inside our faces-config.xml:
<navigation-handler>
org.primefaces.mobile.application.MobileNavigationHandler
</navigation-handler>
5.2. Namespace
Then, to use PFM components, we need to include the PFM namespace in our .xhtml file:
xmlns:pm="http://primefaces.org/mobile"
Besides the standard Primefaces jar, there is no need for any additional library in our configuration.
5.3. RenderKit
Last, we need to provide RenderKit, which is used to render the components in the mobile environment.
In case of a single PFM page within an application, we can define a RenderKit inside our page:
<f:view renderKitId="PRIMEFACES_MOBILE" />
With a full PFM application, we can define our RenderKit at the application scope inside faces-config.xml:
<default-render-kit-id>PRIMEFACES_MOBILE</default-render-kit-id>
5.4. Example Page
Now, let’s make example PFM page:
<pm:page id="enter">
<pm:header>
<p:outputLabel value="Introduction to PFM"></p:outputLabel>
</pm:header>
<pm:content>
<h:form id="enterForm">
<pm:field>
<p:outputLabel
value="Enter Magic Word">
</p:outputLabel>
<p:inputText id="magicWord"
value="#{helloPFMBean.magicWord}">
</p:inputText>
</pm:field>
<p:commandButton
value="Go!" action="#{helloPFMBean.go}">
</p:commandButton>
</h:form>
</pm:content>
</pm:page>
As can be seen, we used page, header and content component from PFM to build a simple form with a header:
Furthermore, we used our backing bean for user input check and navigation:
public String go() {
if(this.magicWord != null
&& this.magicWord.toUpperCase().equals("BAELDUNG")) {
return "pm:success";
}
return "pm:failure";
}
In case of a correct word, we navigate to next page:
<pm:page id="success">
<pm:content>
<p:outputLabel value="Correct!">
</p:outputLabel>
<p:button value="Back"
outcome="pm:enter?transition=flow">
</p:button>
</pm:content>
</pm:page>
This configuration results in this layout:
In case of an incorrect word, we navigate to next page:
<pm:page id="failure">
<pm:content>
<p:outputLabel value="That is not the magic word">
</p:outputLabel>
<p:button value="Back" outcome="pm:enter?transition=flow">
</p:button>
</pm:content>
</pm:page>
This configuration will result in this layout:
Note that PFM is deprecated in version 6.2 and will be removed in version 6.3 in favor of a responsive standard kit.
6. Conclusion
In this tutorial, we’ve explained the benefits of using the Primefaces JSF component suite and demonstrated how to configure and use Primefaces in a Maven-based project.
In addition, we introduced Primefaces Mobile, UI kit specialized for mobile devices.
As always, the code samples from this tutorial are provided over on GitHub.
