Components of PrimeFaces Extensions

Exclusive offer: get 50% off this eBook here
Learning PrimeFaces Extensions Development

Learning PrimeFaces Extensions Development — Save 50%

Develop advanced frontend applications using PrimeFaces Extensions components and plugins with this book and ebook

$23.99    $12.00
by Sudheer Jonna | March 2014 | Open Source Web Development

This article by Sudheer Jonna, author of Learning PrimeFaces Extensions Development, provides a basic introduction for newly created advanced components, improved components along with the useful converters, validators, utility functions, and maven plugins to make the web development easier. After that, it explorers the basic input and advanced dynamic form components, commonly used input components and their features, InputNumber component, KeyFilter component, TriStateCheckbox and TriStateManyCheckbox, TimeLine component, MasterDetail component and its various features, and introduces the exporter component and its features.

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

The commonly used input components and their features

The PrimeFaces Extensions team created some basic form components that are frequently used in registration forms. These frequently used components are the InputNumber component that formats the input fields with numeric strings, the KeyFilter component for filtering the keyboard input whereas select components such as TriStateCheckbox and TriStateCheckboxMany are used for adding a new state to the select Boolean checkbox and Many checkbox components in an order.

Understanding the InputNumber component

The InputNumber component can be used to format the input form fields with custom number strings. The main features of this component include support for currency symbols, min and max values, negative numbers, and many more rounding methods. The component development is based on the autoNumeric jQuery plugin.

The InputNumber component features are basically categorized into two main sections:

  • Common usage
  • Validations, conversions, and rounding methods

Common usage

The InputNumber use case is used for basic common operations such as appending currency symbols on either side of the number (that is, prefix and suffix notations), custom decimal and thousand separators, minimum and maximum values, and custom decimal places.

The following XHTML code is used to create InputNumber with all possible custom options in the form of attributes:

<pe:inputNumber id="customInput" value="#{inputNumberController.value}" symbol=" $" symbolPosition="p" decimalSeparator="," thousandSeparator="." minValue="-99.99" maxValue="99.99" decimalPlaces="4" >

Validations, conversions, and rounding methods

The purpose of this use case is just like any other standard JSF and PrimeFaces input components where we can also apply different types of converters and validators to the InputNumber component. Apart from these regular features, you can also control the empty input display with different types of options such as empty, sign, and zero values. The InputNumber component is specific to Numeric types; rounded methods are a commonly used feature for InputNumber in web applications. You can use the roundMethod attribute of InputNumber; its default value is Round-Half-Up Symmetric.

Exploring the KeyFilter component to restrict input data

On a form-based screen, you need to restrict the input on specific input components based on the component's nature and functionality. Instead of approaching plain JavaScript with regularExpressions, the Extensions team provided the KeyFilter component to filter the keyboard input. It is not a standalone component and always depends on the input components by referring through the for attribute.

TriStateCheckbox and TriStateManyCheckbox

Both the TriStateCheckbox and TriStateManyCheckbox components provide a new state to the standard SelectBooleanCheckbox and SelectManyBooleanCheckbox components respectively. Each state is mapped to the 0, 1, and 2 string values.

TriStateCheckbox can be customized using the title, custom icons for three states, and item label features. Just as with any other standard input component, you can apply the Ajax behavior listeners to this component as well.

Managing events using the TimeLine component

TimeLine is an interactive visualization chart for scheduling and manipulating the events in a certain period of time. The time axis scale can be auto-adjusted and ranges from milliseconds to years. The events can take place on a single date or a particular date range.

The TimeLine component supports many features such as read only events, editable events, grouping events, client-side and server-side API, and drag-and-drop.

Understanding the MasterDetail component and its various features

The MasterDetail component allows us to group data contents into multiple levels and save the web page space for the remaining important areas of the application. The grouped data is maintained in a hierarchical manner and can be navigated through flexible built-in breadcrumbs or command components to go forward and backward in the web interface.

Each level in the content flow is represented by a MasterDetailLevel component. This component will hold the PrimeFaces/JSF data iterative or form components inside the grouping components. You can also switch between levels with the help of the SelectDetailLevel handler, which is based on Ajax, and dynamically load the levels through Ajax behavior. The SelectDetailLevel handler can be attached to the ajaxified PrimeFaces components and standard JSF components. These components also support the header and footer facets.

Introducing exporter components and its features

The PrimeFaces Core dataExporter component works very well on the plain dataTable components along with providing some custom features. But the PrimeFaces Extensions exporter component is introduced to work on all the major features of the dataTable component, provides full control of customization, and extends its features to dataList components.

The exporter component is used to extract and report the tabular form of data in different formats. This component is targeted to work with all major features of dataTable, subTable, and other data iteration components such as dataList as well. Currently, the supported file formats are PDF and Excel. Both headerText and footerText columns are supported along with the value holders.


The CKEditor is a WYSIWYG text editor that is to be used for the web pages that bring the desktop editing application features from Microsoft Word and OpenOffice to web applications. The text being edited in this editor makes the results similar to what you can see after the web page is published. The CKEditor component is available as a separate JAR file from the Extensions library; this library or dependency needs to be included on demand.

The CKEditor component provides more custom controls with the custom toolbar template and skinning in user interfaces using the theme and interfaceColor properties as compared to the PrimeFaces editor component.

The editor component is, by default, displayed with all the controls to make the content customizable. You can supply a few more customizations through interfaceColor to change the interface dynamically and checkDirtyInterval for repeated time interval checks after the content has been changed. To make asynchronous communication calls on the server-side code, many Ajax events are supported by this component.

The following XHTML code creates a CKEditor component with custom interface colors:

<pe:ckEditor id="editor" value="#{ckeditorController.content}" interfa ceColor="#{ckeditorController.color}" checkDirtyInterval="0"> <p:ajax event="save" listener="#{ckeditorController.saveListener}" update="growl"/> </pe:ckEditor>

You can write any number of instances on the same page. There are two ways in which we can customize the CKEditor toolbar component:

  1. Toolbar defined with default custom controls: You can customize the editor toolbar by declaring the control names in the form of a string name or an array of strings.
  2. CustomConfig JavaScript file for user-defined controls: You can also customize the toolbar by defining the custom config JavaScript file through the customConfig attribute and register the control configuration names on the toolbar attribute.


In this article, we discussed some commonly used input components and their features, and introduced how to manage events using the TimeLine component. Then we covered the MasterDetail component and introduced exporter component and its features.

Resources for Article:

Further resources on this subject:

Learning PrimeFaces Extensions Development Develop advanced frontend applications using PrimeFaces Extensions components and plugins with this book and ebook
Published: March 2014
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :

Sudheer Jonna

Sudheer Jonna was born in Andhra Pradesh, India, in 1987. Currently, he is working as a software engineer in Chennai, India. He has completed his Master's degree in Computer Applications from JNTU University. In the last 3 years, he has worked on providing architectural designs and built various web applications based on Struts, JSF, Spring, jQuery, and JPA technologies.

He is an experienced JSF and PrimeFaces expert. He has been working with the PrimeFaces component library since 2011. He is a committer/project member of the PrimeFaces and PrimeFaces Extensions open source projects. He is also a wellknown, recognized member of the PrimeFaces community over the last few years.

Apart from the aforementioned technologies, he writes technical articles; is involved with online training, web application architectural design and development, and writing books and reviews (for Packt Publishing); and provides suggestions through forums and blogs. He is interested in the R&D of various popular JEE frameworks and many other technologies.

Sudheer shares his knowledge through GitHub ( You can follow him on Twitter (@SudheerJonna) and contact him at

Books From Packt

PrimeFaces Cookbook
PrimeFaces Cookbook

Instant PrimeFaces Starter
Instant PrimeFaces Starter

PrimeFaces Beginner's Guide
PrimeFaces Beginner's Guide

Java EE 6 Development with NetBeans 7
Java EE 6 Development with NetBeans 7

JSF 2.0 Cookbook
JSF 2.0 Cookbook

Java EE 5 Development with NetBeans 6
Java EE 5 Development with NetBeans 6

JSF 1.2 Components
JSF 1.2 Components

Java EE 5 Development using GlassFish Application Server
Java EE 5 Development using GlassFish Application Server

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software