Tutorial: Build a Spring WebMVC App with Primefaces

by Team Stormpath | September 7, 2016 |

Java

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:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

<groupId>com.stormpath.blog</groupId>

<artifactId>SpringPrimefacesDemo</artifactId>

<version>0.0.1-SNAPSHOT</version>

<name>SpringPrimefacesDemo</name>

<url>http://maven.apache.org</url>

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

</properties>

</project>

Add Spring Libraries

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

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

<jdk.version>1.7</jdk.version>

<spring.version>4.3.2.RELEASE</spring.version>

</properties>

<groupId>junit</groupId>

<artifactId>junit</artifactId>

</dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-webmvc</artifactId>

<version>${spring.version}</version>

</dependency>

</dependencies>

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:

package com.stormpath.blog.SpringPrimefacesDemo.model;

public class Customer {

private String firstName;

private String lastName;

private Integer customerId;

public String getFirstName() {

return firstName;

}

public void setFirstName(String firstName) {

this.firstName = firstName;

}

public String getLastName() {

return lastName;

}

public void setLastName(String lastName) {

this.lastName = lastName;

}

public Integer getCustomerId() {

return customerId;

}

public void setCustomerId(Integer customerId) {

this.customerId = customerId;

}

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

package com.stormpath.blog.SpringPrimefacesDemo.presentation;

import java.util.ArrayList;

import java.util.List;

import javax.annotation.PostConstruct;

import javax.faces.bean.ManagedBean;

import javax.faces.bean.ViewScoped;

import com.stormpath.blog.SpringPrimefacesDemo.model.Customer;

@ManagedBean

@ViewScoped

public class CustomerBean {

private List<Customer> customers;

public List<Customer> getCustomers() {

return customers;

}

@PostConstruct

public void setup() {

List<Customer> customers = new ArrayList<Customer>();

Customer customer1 = new Customer();

customer1.setFirstName("John");

customer1.setLastName("Doe");

customer1.setCustomerId(123456);

customers.add(customer1);

Customer customer2 = new Customer();

customer2.setFirstName("Adam");

customer2.setLastName("Scott");

customer2.setCustomerId(98765);

customers.add(customer2);

Customer customer3 = new Customer();

customer3.setFirstName("Jane");

customer3.setLastName("Doe");

customer3.setCustomerId(65432);

customers.add(customer3);

this.customers = customers;

}

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:

…..

<servlet.version>3.1.0</servlet.version>

<jsf.version>2.2.8</jsf.version>

…..

</properties>

…

<groupId>javax.servlet</groupId>

<artifactId>javax.servlet-api</artifactId>

<version>${servlet.version}</version>

<scope>provided</scope>

</dependency>

<groupId>com.sun.faces</groupId>

<version>${jsf.version}</version>

</dependency>

<groupId>com.sun.faces</groupId>

<version>${jsf.version}</version>

</dependency>

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.

<groupId>com.sun.faces</groupId>

<version>${jsf.version}</version>

<scope>provided</scope>

</dependency>

<groupId>com.sun.faces</groupId>

<version>${jsf.version}</version>

<scope>provided</scope>

</dependency>

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

webapp/

├── META-INF

│ └── MANIFEST.MF

├── WEB-INF

│ ├── faces-config.xml

│ └── web.xml

└── index.xhtml

web.xml content:

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"

version="3.0">

<servlet-name>Faces Servlet</servlet-name>

<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>*.xhtml</url-pattern>

</servlet-mapping>

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>/faces/*</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>faces/index.xhtml</welcome-file>

</welcome-file-list>

</web-app>

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

<?xml version="1.0" encoding="UTF-8"?>

<faces-config

xmlns="http://xmlns.jcp.org/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"

version="2.2">

</faces-config>

Add index.xhtml to the webapp folder.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head></h:head>

<body>

<h1>Spring MVC Web with Primefaces</h1>

</body>

</html>

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

…

...

<primefaces.version>6.0</primefaces.version>

</properties>

...

<groupId>org.primefaces</groupId>

<artifactId>primefaces</artifactId>

<version>${primefaces.version}</version>

</dependency>

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.

package com.stormpath.blog.SpringPrimefacesDemo;

import javax.servlet.ServletContext;

import javax.servlet.ServletException;

import org.springframework.context.annotation.ComponentScan;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.WebApplicationInitializer;

import org.springframework.web.context.ContextLoaderListener;

import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;

import org.springframework.web.servlet.config.annotation.EnableWebMvc;

@EnableWebMvc

@Configuration

@ComponentScan

public class WebAppInitializer implements WebApplicationInitializer {

@Override

public void onStartup(ServletContext sc) throws ServletException {

AnnotationConfigWebApplicationContext context = new AnnotationConfigWebApplicationContext();

sc.addListener(new ContextLoaderListener(context));

}

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:p="http://primefaces.org/ui">

<h:head></h:head>

<body>

<h1>Spring MVC Web with Primefaces</h1>

<p:dataTable var="customer" value="#{customerBean.customers}" widgetVar="customerTable" emptyMessage="No customers found">

<p:column headerText="Id">

<h:outputText value="#{customer.customerId}"/>

</p:column>

<p:column headerText="First Name">

<h:outputText value="#{customer.firstName}"/>

</p:column>

<p:column headerText="Last Name">

<h:outputText value="#{customer.lastName}"/>

</p:column>

</p:dataTable>

</body>

</html>

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:

1 2	private List<Customer> filteredCustomers;

…and:

public List<Customer> getFilteredCustomers() {

return filteredCustomers;

}

public void setFilteredCustomers(List<Customer> filteredCustomers) {

this.filteredCustomers = filteredCustomers;

}

Modify index.xhtml to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:p="http://primefaces.org/ui">

<h:head></h:head>

<body>

<h1>Spring MVC Web with Primefaces</h1>

<h:form>

<p:dataTable var="customer" value="#{customerBean.customers}" widgetVar="customerTable" emptyMessage="No customers found" filteredValue="#{customerBean.filteredCustomers}">

<p:column headerText="Id" sortBy="#{customer.customerId}" filterBy="#{customer.customerId}">

<h:outputText value="#{customer.customerId}"/>

</p:column>

<p:column headerText="First Name" sortBy="#{customer.firstName}" filterBy="#{customer.firstName}">

<h:outputText value="#{customer.firstName}"/>

</p:column>

<p:column headerText="Last Name" sortBy="#{customer.lastName}" filterBy="#{customer.lastName}">

<h:outputText value="#{customer.lastName}"/>

</p:column>

</p:dataTable>

</h:form>

</body>

</html>

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: