Search icon
Subscription
0
Cart icon
Close icon
You have no products in your basket yet
Save more on your purchases!
Savings automatically calculated. No voucher code required
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
$9.99 | ALL EBOOKS & VIDEOS
Over 7,000 tech titles at $9.99 each with AI-powered learning assistants on new releases
Learning PrimeFaces Extensions Development
Learning PrimeFaces Extensions Development

Learning PrimeFaces Extensions Development: This book covers all the knowledge you need to start developing extended or advanced PrimeFaces applications. With lots of screenshots and a clear step-by-step approach, it makes learning an enjoyable process.

By Sudheer Jonna
$25.99 $9.99
Book Mar 2014 192 pages 1st Edition
eBook
$25.99 $9.99
Print
$43.99
Subscription
$15.99 Monthly
eBook
$25.99 $9.99
Print
$43.99
Subscription
$15.99 Monthly

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now
Table of content icon View table of contents Preview book icon Preview Book

Learning PrimeFaces Extensions Development

Chapter 1. Introducing PrimeFaces Extensions

PrimeFaces is a leading lightweight, open source User Interface (UI) component library for web applications based on JavaServer Faces (JSF). It provides a set of more than 100 UI components with a single JAR that requires zero configuration and no dependencies. Just as JSF (the Apache MyFaces implementation) has some extension packages, PrimeFaces has also come up with a community-driven extension and a new components set called PrimeFaces Extensions. It is a community-driven open source library that has been founded by Thomas Andraschko and Oleg Varaksin. This project aims to be a lightweight and fast JSF 2 component library in addition to PrimeFaces. It contains various components that are neither available in PrimeFaces nor in any other JSF UI library.

In this chapter, we will cover:

  • An introduction to PrimeFaces Extensions and its features

  • Installing and configuring PrimeFaces Extensions

  • Creating a simple HelloWorld application using PrimeFaces Extensions

  • Working with PrimeFaces Extensions project resources

  • Community support and a showcase for PrimeFaces Extensions

An introduction to PrimeFaces Extensions and its features


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:

  • More than 20 UI components

  • Support for common utility components, client behaviors, converters, and optimization tools, such as the Maven resource optimizer plugin

  • Built-in Ajax support using jQuery widgets

  • Zero configuration and no third-party library dependencies for majority components

  • Theme support to all components

  • Multibrowser support (IE8+, Chrome, Firefox, Safari, and Opera)

Installing and configuring PrimeFaces Extensions


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.

Official releases

You can download the PrimeFaces Extensions library either manually or through a Maven download from the Maven central repository.

The Maven coordinates for the PrimeFaces Extensions library are as follows:

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

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

All the projects or source code for this book are available in the GitHub repository. You can download it from the following link:

https://github.com/sudheerj/Learning-Primefaces-Extension-Development

Snapshot releases

If you are interested in using snapshot releases in your web project in order to get newly added components that do not exist in the recent major release or bug fixes, then add the Sonatype snapshot repository to your project configurations.

PrimeFaces Extensions uses the CloudBees platform and Jenkins as its continuous integration tool. It builds the PrimeFaces Extensions project resources on a daily basis.

Note

The snapshot releases are not recommended to be used in the applications directly because they are currently in the development stage due to possible bugs and are not production-ready.

Maven users should configure the following repository in the project's pom.xml file:

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

If you are not a Maven user, then download the PrimeFaces Extensions distribution directly from the following URL:

https://oss.sonatype.org/content/groups/public/org/primefaces/extensions/

Mandatory dependencies

Apart from the PrimeFaces Extensions library, we need to add the compatible PrimeFaces core library, apache.commons.lang3, and any JavaServer Faces implementations, such as Oracle's Mojarra or MyFaces.

In the following table, there is a list of mandatory dependencies to use the PrimeFaces Extensions library in your project:

Dependency

Version

Description

JSF Runtime

2.0, 2.1, or 2.2

Apache MyFaces or Oracle's Mojarra

PrimeFaces

4.0

The PrimeFaces library

apache.commons.lang3

3.1

Provides extra methods for the manipulation of its core classes

Based on the PrimeFaces Extensions library version, you have to add the compatible JSF and PrimeFaces versions.

Note

The dependency for PrimeFaces is defined as a transitive dependency, so there is no need to include it explicitly. But it is also possible to exclude the PrimeFaces core transitive dependency with the help of the dependencyManagement tag so that you can use other versions apart from the one defined by this transitive dependency.

Proceed with the following usage of the dependencyManagement tag to exclude the transitive dependency and use the other versions of PrimeFaces:

<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>

Optional dependencies

Based on the PrimeFaces Extensions library's features that you want to use, you may need to use some third-party libraries. The following table describes the list of optional dependencies needed to use any particular feature:

Dependency

Version

Description

CKEditor

1.2.1

To use the CKEditor component.

CodeMirror

1.2.1

To use the CodeMirror component.

IText

2.1.7

Exporter (PDF).

Apache POI

3.9

Exporter (Excel).

Gson

2.2.4

To use the layout, timeline, and jsonConverter components.

For Maven users, this library is available as a transitive dependency.

The list of maven coordinates for the preceding optional dependencies is shown as follows:

  <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>

Note

Please refer to the JobHub application's pom.xml file in GitHub for the preceding configuration's details.

If you are using the iText library in your project, then don't forget to add the following exclusions in your iText Maven dependency (these APIs are not required for the PDF Exporter component):

  <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>

The following section shows the steps to install and configure PrimeFaces Extensions to your project. It has been split up into instructions for Maven users and non-Maven users.

If you are a Maven user, perform the following steps:

  1. Add the following PrimeFaces Extensions library's Maven dependency to your pom.xml file; it will download the library from the Maven central repository as follows:

      <dependency>
          <groupId>org.primefaces.extensions</groupId>
          <artifactId>primefaces-extensions</artifactId>
          <version>1.2.1</version>
      </dependency>
  2. Add the following PrimeFaces core Maven dependency to your pom.xml file; it will be downloaded to the library from the Maven central repository as follows:

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

    For the projects using lower versions of the PrimeFaces library, you have to add the PrimeFaces Maven repository to the repository list in pom.xml as follows:

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

    The PrimeFaces core dependency is optional for Maven users because the PrimeFaces Extensions library has transitive dependency for the PrimeFaces core. This step is only required when you are going to use other PrimeFaces versions over the default PrimeFaces transitive dependency with the help of the dependencyManagement tag.

  3. Configure the following code for either of the JSF dependencies in your project's pom.xml file:

      <dependency>
          <groupId>com.sun.faces</groupId>
          <artifactId>jsf-impl</artifactId>
          <version>2.2.4</version>
          <scope>compile</scope>
      </dependency> 

    The following is an equivalent block of code:

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

If you are a non-Maven user, perform the following steps:

  1. Download the PrimeFaces Extensions 1.2.1 library from the Maven central repository and add it to the classpath.

  2. Download PrimeFaces-4.0.jar from http://www.primefaces.org/downloads.html and add it to the classpath.

  3. Download either the Oracle Mojarra or Apache MyFaces JSF implementation from their official site and add it to the classpath.

  4. Download the optional dependencies, such as POI, iText, CKEditor, and CodeMirror, and add them to the classpath based on your application requirement.

Creating a HelloWorld application using PrimeFaces Extensions


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.

Working with PrimeFaces Extensions project resources


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:

  • The Maven run command for Oracle Mojarra showcase is as follows:

    mvn jetty:run
    
  • The Maven run command for Apache MyFaces showcase is as follows:

    mvn jetty:run -Pmyfaces
    

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

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

Community support and a showcase for PrimeFaces Extensions


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:

Summary


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.

Left arrow icon Right arrow icon

Key benefits

What you will learn

Create frequently used enhanced form components and advanced editor components in the form filling applications Design the web page structure and improve the web user interface using screen blocking components Organize and manipulate events with time tracking components Generate a wide range of data reports in various file formats and image manipulation components Explore the extended data container, cascading components, and QR codes for ecommerce applications Enhance web development using utility components, exception handlers, and Maven plugins Learn more about the features of the PrimeFaces Extensions component library and their role in PrimeFaces application development

Product Details

Country selected

Publication date : Mar 26, 2014
Length 192 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781783983247
Category :
Languages :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details


Publication date : Mar 26, 2014
Length 192 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781783983247
Category :
Languages :

Table of Contents

14 Chapters
Learning PrimeFaces Extensions Development Chevron down icon Chevron up icon
Credits Chevron down icon Chevron up icon
About the Author Chevron down icon Chevron up icon
About the Reviewers Chevron down icon Chevron up icon
www.PacktPub.com Chevron down icon Chevron up icon
Preface Chevron down icon Chevron up icon
1. Introducing PrimeFaces Extensions Chevron down icon Chevron up icon
2. Enhanced Form and Editor Components Chevron down icon Chevron up icon
3. Layout and Screen Blocking Components Chevron down icon Chevron up icon
4. The Enriched Data Container and QR Code Components Chevron down icon Chevron up icon
5. Time Tracking and Scheduling Components Chevron down icon Chevron up icon
6. Extended Data Reporting and Image Components Chevron down icon Chevron up icon
7. Common Utility Solutions, Error Handling, and Plugins Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Empty star icon Empty star icon Empty star icon Empty star icon Empty star icon 0
(0 Ratings)
5 star 0%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
Filter icon Filter
Top Reviews

Filter reviews by


No reviews found
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.