The document provides an overview of the RichFaces framework including:
- What RichFaces is and its history
- Installing and configuring RichFaces
- Ajax action components like a4j:support, a4j:commandButton, a4j:poll
- UI components like menus, calendar, trees
- Examples of using various RichFaces components
RichFaces is a JSF component library that consists of two main parts: AJAX enabled JSF components and the CDK (Component Development Kit). RichFaces UI components are divided into two tag libraries a4j: and rich:. Both tag libraries offer out-of-the-box AJAX enabled JSF components. The CDK is a facility for creating, generating and testing your own rich JSF components. * 07/16/96 * ##
package demo; public class Bean { private String text; public Bean() {} public void setText(String text) { this.text = text; } public String getText() { return text; } } * 07/16/96 * ##
a4j:poll is one of the way how you can organize the periodical polling of server data and updating the page. a4j:poll is a standard RichFaces Ajax component. Thus, you can use the same approach as for a4j:commandButton for example. I.e. you can use action attribute to invoke the action method and reRender attribute to update area(s) on the client when Ajax Response returns back. RichFaces uses the standard form based request, so the form around the a4j:poll component is required. interval attribute defines the interval in ms between the previous response and the next request. Hence, the total period between two requests generated by a4j:poll is a sum of interval and server response time. timeout attribute defines the time in ms for how long the the client will wait for the server response. if Ajax Response does not come during this period, the connection is aborted and the next request is sent. By default, the timeout is not set. enabled attribute defines should the a4j:poll send request or not. You can use EL to point to the bean property that will be the flag. Re-render the a4j:poll component itself to apply the current value. See the example how to accomplish this task. a4j:poll sends requests in parallel with user activities. The intersections between a4j:poll Ajax requests and other Ajax requests are possible. This might causes unpredictable glitches. Especially, it is true for the earlier version of JSF implementations when the parallel requests to the server was not expected. To avoid the problem, try to follow very simple rules: Have a separate form for a4j:poll. Note, that other fields will be included in request and processed on the server if the form contains not only a4j:poll; Surround a4j:poll with a4j:region. This allow to limit the part of the component tree that will be processed for each Ajax request; Try to avoid updating the same server data that might be updated by the Ajax requests produced by the user activities. If you need this, be sure your code allows to access the data from parallel thread without conflicts; Try to avoid re-rendering the area(s) with input field and other form controls. This causes the losing of input focus because the old elements are removed before the update with the upcomming ones Try to re-render as little area(s) on the client as possible. Try do not have intersections between the areas re-rendered by a4j:poll and areas re-rendered by other Ajax components; Use the eventsQueue with the same name as the name for other Ajax components. This allows to queue the Ajax request and avoid updating the server side data and re-rendering the page area(s) in parallel; Set the reasonable interval. Note that each Ajax request restores the session and a component tree as well as processes the whole JSF lifecycle. Too often requests just degrade the overall performance of an application
RichFaces Drop Down menu is a component that allows to organize the hierarchical menu similar to one that almost every desktop application has.
The drop down menu has a label that always appears on the page and invisible panel that appears with a particular client side event (onmouseover, onclick etc). The event is defined with an 'event' attribute. Drop Down Menu can contains a set of Menu Items, Menu Groups and Menu Separators. Group plays a role of label for secondary levels on the menu. Separator is represented with horizontal lines between the items or groups. An item is an active element that might produce Ajax or non-Ajax requests. The submittion mode is defined with 'submitMode' attribute that has three possible options - &quot;server&quot;, &quot;ajax&quot; or &quot;none&quot;. Mode &quot;none&quot; does not produce any request, but allows you to provide your own functionality inside the menu item with an inline content. The <rich:dropDownMenu> &quot;submitMode&quot; attribute can be set to three possible parameters: Server (default) - Regular form submission request is used. Ajax - Ajax submission is used for switching. None event Defines the event on the representation element that triggers the menu's appearance. direction Defines direction of the popup list to appear. Possible values are &quot;top-right&quot;, &quot;top-right&quot;, &quot;top-left&quot;, &quot;bottom-right&quot;, &quot;bottom-left&quot;, &quot;auto&quot;. Default value is &quot;auto&quot;. jointPoint Sets the corner of the label for the pop-up to be connected with. Possible values are &quot;tr&quot;, &quot;tl&quot;, &quot;bl&quot;, &quot;br&quot;, &quot;bottom-left&quot;, &quot;auto&quot;. Default value is &quot;auto&quot;. &quot;tr&quot; stands for top-right. submitMode Sets the submission mode for all menu items of the menu except ones where this attribute redefined. Possible values are &quot;ajax&quot;,&quot;server&quot;,&quot;none&quot;. Default value is &quot;sever&quot;. value Defines representation text for Label used for menu calls
event Defines an event on the parent element to display the menu. Default value is &quot;oncontextmenu&quot;. disableDefaultMenu Forbids default handling for adjusted event. Default value &quot;false&quot;. attached If the value of the &quot;attached&quot; attribute is true, the component is attached to the component, specified in the &quot;attachTo&quot; attribute or to the parent component, if &quot;attachTo&quot; is not defined. Default value is &quot;true&quot;. attachTo Client identifier of the component or id of the existing DOM element that is a source for a given event. If attachTo is defined, the event is attached on the client according to the AttachTiming attribute. If both attached and attachTo attributes are defined, and attribute attached has value 'false', it is considered to have higher priority. submitMode Sets the submission mode for all menu items of the menu except those where this attribute redefined. submitMode attribute can be set to three possible parameters: Server (default) - Regular form submission request is used. Ajax - Ajax submission is used for switching. None Default value is &quot;server&quot;.
The component is designed for hierarchical data presentation and allows rendering any tree-like data model. You can build your <rich:tree> using model (org.richfaces.model.TreeNode or javax.swing.tree.TreeNode). In this case the <rich:tree> component interacts with data model via &quot;TreeNode&quot; interface ( org.richfaces.model.TreeNode ) that is used for the <rich:tree> nodes representation. Actually you can develop and use your own implementation of the &quot;TreeNode&quot; interface or use a default one, which is defined with a default class &quot;TreeNodeImpl&quot; ( org.richfaces.model.TreeNodeImpl ). The &quot;value&quot; attribute of the <rich:tree> component contains a nodes structure defined in a bean property. When the <rich:tree> component is being rendered it iterates over the model nodes and renders them using one of its immediate <rich:treeNode> children. Data property of the current model TreeNode is exposed using &quot;var&quot; attribute, so if var=&quot;station&quot; you can refer to that data using #{station} syntax. * 07/16/96 * ##
The &quot;value&quot; attribute of the <rich:tree> component contains a nodes structure defined in a bean property. When the <rich:tree> component is being rendered it iterates over the model nodes and renders them using one of its immediate <rich:treeNode> children. Data property of the current model TreeNode is exposed using &quot;var&quot; attribute, so if var=&quot;station&quot; you can refer to that data using #{station} syntax. It's possible to define a visual representation of a node data model (to define a node icon) and its behavior in correspondence with the data contained in this node (with a value of the &quot;var&quot; attribute). The node behavior is defined by the components nested into the <rich:treeNode> (e.g. links or buttons). For these purposes you should use &quot;nodeFace&quot; attribute. For each tree node a value of &quot;nodeFace&quot; attribute is evaluated and <rich:treeNode> with a value of &quot;type&quot; attribute equal to a value of &quot;nodeFace&quot; is used for node representation. See an example below. * 07/16/96 * ##
As an exercise at home review the usage of <rich:treeNodeAdaptor> and <rich:recursiveTreeNodeAdaptor> components * 07/16/96 * ##
The <rich:ajaxValidator> component should be added as a child component to an input JSF tag which data should be validated and an event that triggers validation should be specified as well. The component is ajaxSingle by default so only the current field will be validated. Key Features Skips all JSF processing except validation Possibility to use both standard and custom validation Possibility to use Hibernate Validation Event based validation triggering
The <rich:beanValidator> component designed to provide validation using Hibernate model-based constraints.