QuipuKit Components

Below is a list of the QuipuKit components with their short description. To find more about them, read the documentation or take a look at the online demo.

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

Calendar

Chart

The Chart component represents various datasets in a graphical form, for example as 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.).

Chart

Confirmation

The Confirmation component allows users to confirm or reject critical actions before 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.

Confirmation

Data Table

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

Date Chooser

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

Drop Down Field

The DropDownField component is an input component using which the user can either type in a value or select one of the values from an attached drop-down list. The component provides a way to show a list of suggestions based on user input and the ability to auto-complete user input in the input field. The drop-down list can be displayed in multiple columns and contain other JSF components. A variety of customization options and styles lets you easily define the look-and-feel of the DropDownField component. DropDown

Dynamic Image

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

Folding Panel

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). FoldingPanel

Graphic Text

GraphicText is a component that displays styled rotated text. It has API similar to the standard <h:outputText> component, though unlike the <h:outputText> component, the GraphicText component displays a text with an image generated on the server. This component can be useful for displaying vertical headers in a table having a lot of thin columns, vertical TabSet components, etc. GraphicText

Hint Label

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

Popup Layer

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

Suggestion Field

The SuggestionField component is an input component that shows a list of suggestions based on user input and completes user input right in the input field. This component has a similar functionality as DropDownField, but unlike DropDownField it looks as a plain text field. There are both client and Ajax-based suggestion modes. You can create a multi-column drop-down list and embed JSF components into it. SuggestionField

Tabbed Pane

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

Tab Set

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

Tree Table

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

Two List Selection

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