Components Index


Calendar
<q:calendar>


The Calendar component enables the user to select a date from a one-month calendar and easily navigate between months and years. A specific group of dates can be included in a date range. The Calendar component can use the client's locale or a specified one. Various style options for different parts of the Calendar component let you create the desired look-and-feel.


Documentation | Online Demo



Chart
<q:chart>

The Chart component represents various datasets in a graphical form, for example as a pie, line, or bar charts. The component is based on the JFreeChart engine and exposes a friendly API with JSF-specific features. Styles can be customized for every chart element (image, legend, title, etc.).




Documentation | Online Demo



Confirmation
<q:confirmation>

The Confirmation component allows users to confirm or reject critical actions before their execution. It is displayed over other page elements like a modal dialog and can be assigned to a client-side event of any component or invoked from JavaScript. In addition to multiple options to customize its appearance, the Confirmation component provides flexible invocation and auto-hiding mechanisms.


Documentation | Online Demo



DataTable
<q:dataTable>

The DataTable component is used to display data in a tabular format and effectively manipulate it. It supports the features of the JSF HtmlDataTable component and extends the standard functionality with such advanced features as sorting, row selection (both multiple and single), paging, filtering, keyboard navigation, and dynamic data loading (using Ajax). Plus, the DataTable component provides special support for handling large datasets with minimal overhead.


Documentation | Online Demo



DateChooser
<q:dateChooser>

The DateChooser component enables the user to enter a date either by typing it in the text field or selecting it from the drop-down calendar. With i18n support, a selected date can be displayed in different date formats and languages. The appearance of virtually every element of the DateChooser component can be customized.


Documentation | Online Demo



DropDownField
<q:dropDownField>

The DropDownField component is an input component for entering text with an attached drop-down list. The user can type in any text value into the text field (not necessarily available in the drop-down list) or select predefined values from the drop-down list. You can embed JSF components into list items and set timeout to automatically close the drop-down list. The DropDownField component provides a number of customization options and styles to define its look-and-feel.


Documentation | Online Demo



DynamicImage
<q:dynamicImage>

The DynamicImage component provides the ability to display an image which is dynamically generated at run time, or which is not available as an application file but, for example, is retrieved from a database. You can apply a style to the generated image.


Documentation | Online Demo



FoldingPanel
<q:foldingPanel>

The FoldingPanel component is a container for other components that can be expanded and collapsed by the user. The component supports different folding directions to reveal its content and provides various options to customize its appearance. Plus, there are several ways to control the content loading (using Ajax).


Documentation | Online Demo



HintLabel
<q:hintLabel>

The HintLabel component displays single-line text, which if it doesn't fit in the allotted space, is displayed fully in a tooltip. It also provides the ability to apply individual styles to the text and tooltip.


Documentation | Online Demo



PopupLayer
<q:popupLayer>

The PopupLayer component is a container for other JSF components that is displayed over the page contents. The size, placement, timeout value, and modality of the component can be easily customized. A convenient API lets you manage the display behavior of the PopupLayer component on the client side.


Documentation | Online Demo



TabbedPane
<q:tabbedPane>

The TabbedPane component is used to present related information on separate tabbed pages. It provides flexibility in configuring the tabs and the page content within them and offers several ways for dynamic content loading (using Ajax). A variety of style options let you customize the appearance of the entire TabbedPane component and its individual elements.


Documentation | Online Demo



TabSet
<q:tabSet>

The TabSet component represents a set of tabs of which one can be selected at a time. In addition to providing ways to configure the tabs, their content, and placement, the TabSet component offers numerous styles to define its appearance.


Documentation | Online Demo



TreeTable
<q:treeTable>

The TreeTable component is used to display hierarchical data in a tabular format. It provides flexible configuration of the tree structure and content and supports such advanced features as sorting, interactive filtering, node selection (both multiple and single), keyboard navigation, and dynamic data loading (using Ajax). You can also specify a node preloading mode for expanding TreeTable nodes on the client or server side.


Documentation | Online Demo



TwoListSelection
<q:twoListSelection>

The TwoListSelection component is another presentation for a selection component. It enables the user to select items from one list to the other and reorder the selected items. The TwoListSelection component provides flexibility in specifying list items and offers a variety of options and styles for designing its look-and-feel.


Documentation | Online Demo



Utility components

Focus
<q:focus>

The Focus component is a non-visual component that controls the focus on the page. With Focus, you can specify the component that is focused when the page is loaded. You can also set that the focus is saved between page submissions. There can be only one Focus component on the page.

Documentation

Scroll Position
<q:scrollPosition>

The ScrollPosition component is a non-visual component that controls the scroll position of the page. With ScrollPosition, you can specify where the position of the scroll when the page is loaded. You can also set that the scroll position is saved between page submissions. There can be only one ScrollPosition component on the page.

Documentation



QuipuKit Validation Framework

The QuipuKit validation framework is designed to compensate for a lack of explicit support for client-side validation in JSF and offers automatic porting of server-side validators to the client. You enhance your application with client-side validation in just one simple step.

The validation framework provides an easy way to assign client-side validators to any input component (both from JSF and QuipuKit library) in existing or newly developed forms. In addition, it extends the standard set of JSF validators with more server-side validators and messages.


Documentation | Online Demo


QuipuKit