Primefaces is a JavaServer Faces (JSF) component suite. It extends JSF’s capabilities with rich components, skinning framework, a handy theme collection, built-in Ajax, mobile support, push support, and more. A basic input textbox in the JSF tag library becomes a fully-featured textbox with theming in Primefaces.

Frontend frameworks like AngularJS provide UI components, Ajax capabilities, and HTML5 compliance much like Primefaces does. If you are looking for a lightweight application with quick turnaround time, AngularJS could be your best bet. However, when dealing with an enterprise Java architecture, it is often best to use a mature framework like Primefaces. It is stable and ever-evolving, with the help of an active developer community.

Primefaces also makes a UI developer’s life easier by providing a set of ready-to-use components which, otherwise, would take a considerable amount of time to code – e.g., the dashboard component with drag and drop widgets. Some other examples are slider, autocomplete components, tab views for pages, charts, calendars, etc.

Spring WebMVC and Primefaces

In Spring WebMVC, components are very loosely coupled. It is easy to integrate different libraries to the model layer or the view layer.

In this tutorial, I am going to walk you through using Spring WebMVC and Primefaces to create a basic customer management application with a robust frontend. All the code can be found on Github.

Create a Maven Project

Create a new Maven Project using your favorite IDE. After creating the project, you should see the pom.xml in the project folder. A minimal pom.xml should like this:

Add Spring Libraries

Next, add the necessary Spring libraries to the dependencies section of the pom.xml.

Create Your Sample Project with Spring WebMVC

For the customer management application we are going to build, we need to create a mock customer database. It will be a POJO with three attributes. The Customer class would look like this:

Then we need to create a bean class to manipulate the Customer class:

Create the Frontend with Primefaces

Since we are going to add Primefaces components to our UI, we will need a UI with JSF capabilities. Add the JSF dependencies to your pom.xml:

Note: If your target server is a Java EE compliant server like jBoss, the JSF libraries will be provided by the server. In that case, the Maven dependencies can conflict with the server libraries. You can add scope provided to the JSF libraries in the pom.xml to solve this.

Create a web deployment descriptor – web.xml. The folder structure needs to be as shown below (the other files referenced will be created below):

web.xml content:

Create faces-config.xml in the WEB-INF folder:

Add index.xhtml to the webapp folder.

Note the XML namespaces for the JSF included in the xhtml. Now we can add the the proper dependencies to pom.xml.

Finally, add a class implementing WebApplicationInitializer interface. This will be a bootstrap class for Servlet 3.0+ environments, to start the servlet context programmatically, instead of (or in conjunction with) the web.xml approach.

Configure Primefaces

Now we will modify the index.xhtml file and create a data table to display the customer data. The xml namespace needs to be modified to add Primefaces reference.

Deploy to Your Application Server (and Test)

Build the project, deploy the war to the application server and check.

Extended Capabilities

Modify the code as shown below to easily produce a sortable data table with filters. Add the following line to CustomerBean.java:

…and:

Modify index.xhtml to:

More on Primefaces

All the UI components available with Primefaces have been showcased at Primefaces Showcase.

Apart from the components extended from the JSF Tag library, Primefaces has a lot of versatile components and plugins known as Primefaces extensions. They are meant to make developers’ lives easier and our web pages more beautiful.

And now, it’s time to add authentication to your Primefaces webapp! Learn more, and take Stormpath for a test drive, with these resources:

  • A Simple WebApp with Spring Boot, Spring Security, & Stormpath — In 15 Minutes!
  • 5 Practical Tips for Building Your Spring Boot API
  • OAuth 2.0 Token Management with Spring Boot and Stormpath