General Information

OpenFaces is an open-source library of AJAX-powered JSF components, an Ajax framework and a client-side validation framework. OpenFaces is based on the set of JSF components formerly known as QuipuKit library. Here's a list of components inherited from the QuipuKit library: Calendar, Chart, Confirmation, DataTable, DateChooser, DynamicImage, FoldingPanel, GraphicText, HintLabel, PopupLayer, SuggestionField, TabSet, TabbedPane, TreeTable, TwoListSelection, Utility Components (Focus, ScrollPosition, LoadBundle). See the OpenFaces Components page for the full description of these components.

Ajax Framework

OpenFaces 2.0 introduces an Ajax framework which allows adding Ajax-based interactions in cases when components' built-in Ajax capabilities are not enough. OpenFaces Ajax framework addresses a common scenario where the whole page has to be submitted to perform some application-specific action and reload the page with the results. OpenFaces Ajax framework allows resolving such use cases without full page reload using a new non-visual component called ReloadComponents, and an appropriate client-side API. The main purpose of this component is reloading one or more components with Ajax, plus it provides additional features such as choosing the components whose data should be submitted to the server, invoking a server action as part of the Ajax request, and handling frequent requests.

Here's a simple example which demonstrates the usage of the new component:

  <h:inputText id="in" value="#{requestScope['ajaxText']}"/>
  <h:commandButton value="Update">
      <o:reloadComponents submittedComponentIds="in" componentIds="out" disableDefault="true"/>
  </h:commandButton>
  <h:outputText id="out" value="#{requestScope['ajaxText']}"/>

You can see Ajax Framework in action in OpenFaces demo.

In addition to the declarative tag-based syntax, you can use a client-side API that provides access to the same functionality for a JavaScript code. OpenFaces also allows customizing various aspects of Ajax framework using the AjaxSettings component, which can be used to customize Ajax progress message and the way of handling session expiration during Ajax requests. See the documentation for more information.

New Components

• BorderLayoutPanel – a container used to layout groups of components by container's edges. The separators between component groups can either be fixed to introduce a static layout, or can be made draggable and/or collapsible to make a dynamic layout.
  
• DayTable – a component that allows displaying and editing schedule of events for a day. Each event has a start time, end time, event name, description and other fields. There is also the possibility to show timetable for multiple resources, for example the schedule of tasks for several people.
  
• ForEach – an iterator component that renders the specified set of components multiple times based on its parameters. The ForEach component is similar to the JSTL <c:forEach> tag, though it can be used to overcome some of the shortcomings of <c:forEach> tag and to eliminate the need for an additional JSTL dependency.
• InputText – supports all of the features of the standard JSF InputText component and extends it with some additional features like rollover and focused styles and prompt text.
• InputTextarea – supports all of the features of the standard JSF InputTextarea component and extends it with some additional features like rollover and focused styles and prompt text.
• PopupMenu – a component that displays a set of actions in a pop-up box for a user to choose from, and is often used as a context menu. The PopupMenu component can be attached to any component to appear when any particular event occurs in that component. A PopupMenu can be configured to have sub-menus to represent complex hierarchies of actions.
• SelectBooleanCheckbox – an extended version of the standard <h:selectBooleanCheckbox> component that adds such possibilities as tri-state support, customizing checkbox images and state-dependent styles.
• Spinner – an input field for entering numbers, which consists of a text field and the attached increase/decrease buttons.
• Window – a window-styled container for other JSF components that is displayed over the page content. The Window component has a caption and a content area, it can be dragged around on the page, and resized. Besides, it has the usual maximize/restore, minimize and close buttons in the caption.

New Features

Extended Keyboard Support

OpenFaces 2.0 has extended keyboard support for its components. The following components now include keyboard support:

• Calendar
• Confirmation
• DataTable
• DateChooser
• DropDownField
• InputText (native keyboard support)
• InputTextarea (native keyboard support)
• FoldingPanel
• PopupMenu
• SelectBooleanCheckbox
• Spinner
• SuggestionField
• TabSet
• TabbedPane
• TreeTable
• TwoListSelection (native keyboard support)

Miscellaneous

• Extended validation framework: added the possibility for annotation-based validation with <o:validateAll> tag.
• A new simpler way of attaching Confirmation to components: now you can simply add a Confirmation component inside of other component (like it can be done with <o:reloadComponents> tag) and it will automatically be attached to the "onclick" event of the parent component. The event to which confirmation is attached can be customized with the "event" attribute.
• New "draggableByContent" attribute for <o:confirmation> tag (false by default). If confirmation is configured to be draggable, chooses whether the confirmation window can be dragged by window caption (the default behavior), or by any part of the confirmation window.
• Added an ability to place custom caption buttons into Confirmation and FoldingPanel components.
• Added an ability to place custom caption buttons into FoldingPanel's caption
• Added pressedButtonStyle/pressedButtonClass attributes for DropDownButton and DateChooser.
• Added focusedStyle/focusedClass for all input components.
• Added tabIndex attribute for TwoListSelection component.
• Added standard client events to DynamicImage component.
• Added mouse events to GrahicText component.
• Extended client-side API for TabSet and TabbedPane components: added getTabCount and getPageCount functions respectively.
• Extended client-side API for TwoListSelection component: added selectAll and unselectAll functions.
• Added typingAllowed attribute for DateChooser component to enable scenario where a date should only be selectable from drop-down calendar.