Learning PrimeFaces Extensions Development

PrimeFaces Extensions is a lightweight, open source UI component library for applications based on JavaServer Faces 2.x. This project has been built on top of the PrimeFaces core library to allow users to create their own components. PrimeFaces Extensions consists of newly added components that don't exist in other JSF 2 based libraries as well as extended or improved component features missing in other popular JSF 2 libraries. Besides these components, it provides useful client behaviors, converters, validators, and other useful tools, such as a Maven plugin, for web resource optimization. It only uses standards and is highly compatible with existing JSF 2 frameworks.

Even though the earlier versions of component development with PrimeFaces started with the YUI API, in just a few days after getting negative results, the PrimeFaces team opted to go with the popular JavaScript framework jQuery to create their widgets and plugins. Because jQuery creates amazing widgets, custom plugins, themes, and Ajax-interactive features, considering these benefits, the PrimeFaces Extensions team also uses the jQuery framework behind the scenes to create its widgets. Hence, it is used instead of other JavaScript / UI frameworks available on the market.

The PrimeFaces Extensions library is a community-driven, open source project. This project has been licensed under Apache License Version 2 just as with many other open source projects, including the PrimeFaces library. You can use this library completely free for any open source or commercial project by following the terms and conditions of the Apache License Version 2.

PrimeFaces Extensions provides the following set of features as an extension UI component suite to the PrimeFaces core library:

The PrimeFaces Extensions library comes with a single JAR and does not require any mandatory third-party libraries. To use the PrimeFaces Extensions library in any web projects, just make sure to add the compatible PrimeFaces library and any JavaServer Faces implementations, such as Oracle Mojarra or Apache MyFaces.

At the time of writing this book, the latest version of PrimeFaces Extensions is 1.2.1, which is compatible with PrimeFaces 4.0.

    <dependency>
      <groupId>org.primefaces.extensions</groupId>
      <artifactId>primefaces-extensions</artifactId>
      <version>1.2.1</version>
    </dependency>

<repositories>
  <repository>
    <id>sonatype-oss-public</id>
    <url>https://oss.sonatype.org/content/groups/public/</url>
    <snapshots>
      <enabled>true</enabled>
    </snapshots>
  </repository>
</repositories>

<dependencyManagement>  
    <dependency>
        <groupId>org.primefaces.extensions</groupId>
        <artifactId>primefaces-extensions</artifactId>
        <version>1.2.1</version>
    </dependency>
    <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>4.0</version>
    </dependency>
</dependencyManagement>

  <dependency>
      <groupId>org.primefaces.extensions</groupId>
      <artifactId>resources-ckeditor</artifactId>
      <version>1.2.1</version>
  </dependency>
  <dependency>
      <groupId>org.primefaces.extensions</groupId>
      <artifactId>resources-codemirror</artifactId>
      <version>1.2.1</version>
  </dependency>
  <dependency>
      <groupId>com.lowagie</groupId>
      <artifactId>itext</artifactId>
      <version>2.1.7</version>
  </dependency> 
  <dependency>
      <groupId>org.apache.poi</groupId>
      <artifactId>poi</artifactId>
      <version>3.9</version>
  </dependency>
  <dependency>
      <groupId>org.apache.poi</groupId>
      <artifactId>poi-ooxml</artifactId>
      <version>3.9</version>
  </dependency>

  <exclusions>
  <exclusion>
      <groupId>bouncycastle</groupId>
      <artifactId>bcprov-jdk14</artifactId>
  </exclusion>
  <exclusion>
      <groupId>bouncycastle</groupId>
      <artifactId>bcmail-jdk14</artifactId>
  </exclusion>
  <exclusion>
      <groupId>org.bouncycastle</groupId>
      <artifactId>bctsp-jdk14</artifactId>
  </exclusion>
  </exclusions>

After installing and configuring the PrimeFaces Extensions environment, we have to add the PrimeFaces Extensions xmlns:pe="http://primefaces.org/ui/extensions" namespace in the web page to work with the extension components. You should have at least one PF Extensions component on the XHTML page, otherwise the core JavaScript with the namespace PrimeFacesExt will not be loaded.

Let us create a simple HelloWorld application to make sure PrimeFaces Extensions has been installed and configured properly.

First, we will create the layout.xhtml page, which will render the HelloWorld message in the center pane of the layout component as shown in the following code (this layout can be used to maintain the templating mechanism of the web pages):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:pe="http://primefaces.org/ui/extensions">
<f:view contentType="text/html" locale="en">
    <pe:head title="PrimeFaces Extensions HelloWorld" shortcutIcon="#{request.contextPath}/favicon.ico">
        <f:facet name="first">
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <meta http-equiv="pragma" content="no-cache"/>
            <meta http-equiv="cache-control" content="no-cache"/>
            <meta http-equiv="expires" content="0"/>
        </f:facet>
    </pe:head>
    <h:body>
        <pe:layout resizerTip="Resize Me" togglerTipClosed="Open Me" togglerTipOpen="Close Me">
            <pe:layoutPane position="north">
                North Block
            </pe:layoutPane>
            <pe:layoutPane position="east">
                East Block
            </pe:layoutPane>
            <pe:layoutPane position="center">
                <h1>Hello, Welcome to Primefaces Extensions world</h1>
            </pe:layoutPane>
            <pe:layoutPane position="west" size="200">  
                West Block
            </pe:layoutPane>
            <pe:layoutPane position="south">
                 South Block
            </pe:layoutPane>
        </pe:layout>
    </h:body>  
</f:view>
</html>

In the code section, we used pe:head instead of the standard JSF h:head. There is not much difference between these two tags, but pe:head only provides two additional properties named title and shortcutIcon.

Just build and run the HelloWorld application using Maven as your build tool. Then make a request to the browser using the following URL path:

http://localhost:8080/helloworld/layout.jsf

After you have made the browser request, you should see something like the following screenshot:

Now, the application will render or output the helloworld greeting message in the layout component.

You can also build the PrimeFaces Extensions project resources directly from the source repositories. First, you need to clone all the PrimeFaces project resources as follows:

git clone git://github.com/primefaces-extensions/master-pom.git
git clone git://github.com/primefaces-extensions/core.git
git clone git://github.com/primefaces-extensions/resources-ckeditor.git
git clone git://github.com/primefaces-extensions/resources-codemirror.git
git clone git://github.com/primefaces-extensions/showcase.git

The master-pom project should be built first as it contains the required dependencies for all the PrimeFaces Extensions projects. So, we have to build the projects in the order they are cloned in. All the projects are compiled and installed in the local repository with the help of the mvn clean install command.

Now, we can run the showcase on the Jetty 8 server for both the implementations as follows:

Access the PrimeFaces Extensions showcase components through the following localhost URL:

http://localhost:8080/primeext-showcase/

PrimeFaces Extensions has its own active forum, just like the PrimeFaces core, to discuss all the questions related to this Extensions library. Apart from this, the Extensions team provides an Issue Tracker for bug fixes and new component features to track or resolve these bugs for future releases. The PrimeFaces Extensions team accepts suggestions and patches in the form of pull requests.

The extensive documentation and examples of the PrimeFaces Extensions components and their features are available through the common showcase. The showcase has been deployed on the Jetty8 server for both the current JSF implementations—Mojarra and MyFaces.

Visit the following URLs to get help with PrimeFaces Extensions components and their features:

In this chapter, you were introduced to the PrimeFaces Extensions library and its popular features. You also learned about installing and configuring the PrimeFaces Extensions suite, creating a simple HelloWorld application with a simple layout example, and working with PrimeFaces project resources.

In the next chapter, we will take a look at the form and editor components components of the PrimeFaces Extensions library, along with an introduction to a simple application named the JobHub application. The introduction to the JobHub application will then be used as our base to build upon in each chapter until we have finished acquiring knowledge on all the Extensions components and their features to create an enhanced PrimeFaces application.