This article is written by Sudheer Jonna and Ramkumar Pillai, the authors of PrimeFaces Blueprints. This article will give you an introduction to setting up PrimeFaces using Maven or Ant.

The specific topics that will be covered in this article are as follows:

• An introduction to PrimeFaces, its features, and its role in customized application development
• PrimeFaces setup and configuration for development

(For more resources related to this topic, see here.)

An introduction to JavaServer Faces and PrimeFaces

JavaServer Faces (JSF) is a component-based MVC framework used for building rich User Interface (UI) Java web applications. JSF is a powerful framework with a six-phase lifecycle, and it will automate the common web application tasks such as decoding the user input, processing the input validations and conversions, and rendering or updating the output in the form of generated HTML. Page authors can easily build a customized UI by just dragging-and-dropping the reusable components on the page that provide a rich look and feel to modern UI applications. JSF has built-in support for input conversions and validations, and Ajax support for the components.

Going by the growing popularity of JSF technology, many open source and proprietary UI component frameworks were created to have user interfaces with a fancier look and feel. These component suites were created by introducing their own new components and extending the standard JSF components with additional features. Among all these component suites, PrimeFaces is the best and most popular component suite considering its features, quick releases with more new components and bug fixes, ease of development, extensive documentation, and support from its community.

PrimeFaces is a leading, lightweight, open source user interface component library for JSF-based web applications. In the JSF world, it is miles ahead of the other existing component sets because of the many features it has at its disposal:

• Over 100 sets of components
• Built-in Ajax-supported components
• Ease of development, as there are no configurations required
• A single jar install without the need for any mandatory third-party libraries
• More than 30 predefined themes and custom themes by using the ThemeRoller support
• Multibrowser support

It is so well designed that it is important to consider its importance when developing web applications. Page authors and application developers can easily develop web pages by simply dragging-and-dropping the components of the webpage and then adding the required features in a step-by-step fashion: customizing the CSS style classes, extending the component widgets, and rendering according to the custom requirements.

Setting up and configuring PrimeFaces

PrimeFaces is a lightweight single library with minimal external libraries. The only external libraries required are those with component-specific features. Apart from these component-specific features, projects only require JSF runtime implementations such as Oracle Mojarra or Apache MyFaces.

The setup and configuration for Maven and non-Maven users is explained in the following two sections.

Setting up and configuring using Maven

In this section, we will define the various Maven configuration steps required to run a PrimeFaces-based application. Perform the following steps:

1. Configure the PrimeFaces library dependency or Maven coordinates in your project pom.xml file as shown here:

              <dependency>
                    <groupId>org.primefaces</groupId>
                    <artifactId>primefaces</artifactId>
                    <version>5.0</version>
              </dependency>

2. Add the PrimeFaces repository to the repositories list of your project pom.xml file as follows:

              <repository>
                    <id>prime-repo</id>
                    <name>Prime Repo</name>
                    <url>http://repository.primefaces.org</url>
              </repository>

   Note that this step is not required for releases after PrimeFaces 4.0. The team started adding its library in the Maven central repository.

3. Configure either of the JSF runtime implementations, Oracle Mojarra or Apache MyFaces. Choose either of the following two blocks of code:

   • • This is the runtime implementation for Oracle Mojarra:

     <dependency>
         <groupId>com.sun.faces</groupId>
         <artifactId>jsf-impl</artifactId>
         <version>2.2.6</version>6
     </dependency>

   • • This is the runtime implementation for Apache MyFaces:

     <dependency>
         <groupId>org.apache.myfaces.core</groupId>
         <artifactId>myfaces-impl</artifactId>
         <version>2.2</version>
     </dependency>

Depending on the component-specific features, you can use the following mandatory and optional dependencies. Here is a list of dependencies categorized into mandatory and optional. The following are the mandatory dependencies:

The following are the optional dependencies:

Setting up and configuring for non-Maven (or Ant) users

In this section, we will define the various non-Maven (or Ant) configurations required to run a PrimeFaces-based application. Perform the following steps:

1. Download the PrimeFaces library from the official download section of PrimeFaces at http://www.primefaces.org/downloads.html.
2. Following this, add the PrimeFaces JAR library to the classpath.
3. You should then download either the JSF library runtimes from Oracle’s Mojarra or those from Apache MyFaces from their official sites and add them to the classpath. You can access the JSF library at Oracle by going to https://javaserverfaces.java.net/2.2/download.html or alternatively access it at Apache by going to http://myfaces.apache.org/download.html.
4. After this, you should download the component-specific third-party libraries from their official site and add them to the classpath.

Application-level configuration

As you know, PrimeFaces is a JSF-based component suite. Therefore, the first thing you have to do is configure the JSF Faces Servlet in your project deployment descriptor file (web.xml). The following is a mandatory configuration for any JSF-based application:

<servlet>
  <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>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.faces</url-pattern>
</servlet-mapping>
<servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

It is not mandatory to use all of the JSF extensions or servlet mappings. Any of the preceding servlet mappings is enough to configure Faces Servlet to your project.

There are other configurations that can be made to your project. These are shown in the following table:

As an example, the following code snippet configures a theme with context-param:

<context-param>
         <param-name>primefaces.THEME</param-name>
         <param-value>delta</param-value>
</context-param>

Checking the JSF runtime compatibility

PrimeFaces 5.0 supports all the JSF runtime versions: 2.0, 2.1, and 2.2 at the same time using feature detection without having to compile a dependency to any specific version. In other words, some of the features that are available are based on the runtime version used. The newly released JSF 2.2 version supports more popular HTML5.

The runtime detection policy for PrimeFaces is quite useful for the newly added features in JSF library. The JSF 2.2 passthrough attribute’s feature is a good example of the runtime detection policy. That is, the passthrough attribute only gets rendered if the runtime is JSF 2.2.

An introduction to the autofocus and pattern HTML5 attributes’ integration with PrimeFaces can be seen in the following example:

<!DOCTYPE html>
<html 


>
   <h:head>
   </h:head>
      <h:body>
        <h:form>
           <p:inputText value="#{bean.value}" pt_autofocus="autofocus"         pt_pattern= "[A-Za-z]"/>
        </h:form>
      </h:body>
</html>

Summary

In this article, you have been introduced to the PrimeFaces component suite, its features, and its role in developing custom applications. You have also learned about the setup and configuration for the PrimeFaces library.

Resources for Article:

Further resources on this subject:

• Components of PrimeFaces Extensions [Article]
• Getting Started with PrimeFaces [Article]
• Integrating Images with JSF, CSS with JSF and, JS with JSF [Article]