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

CKEditor

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.

Summary

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:

• Getting Started with PrimeFaces [Article]
• JSF2 composite component with PrimeFaces [Article]
• JSF 2.0 Features: An Extension [Article]