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
2. Contents Introduction to RichFaces Ajax Action Components RichFaces UI Components Skins and Theming
3. Installation (JBoss Tools) Get a clean copy of Eclipse for JavaEE developers (helios)(32bit only)+tomcat7+ppt Extract Go to Eclipse->Help->Install new software Location: http://download.jboss.org/jbosstools/updates/stable/helios/ Click ONLY ON “ Jboss Tools Richfaces ” Next -> Next -> Next ... Reboot Eclipse Extract tomcat somewhere close to eclipse Create workspace close to eclipse
4. Creating an eclipse project Create a new project -> JSF project JSF Environment: JSF 1.2 + Facelets Template: FaceletsKickStartWithRILibrs Next Servlet version: 2.5 Runtime -> New -> Tomcat7 -> Browse... Next ...Next... Finish NOTE: DELETE .../WEB-INF/lib/el-api.jar Go to project -> Run as -> Run on Server
5. Adding Richfaces MyProject -> right click -> Configure -> Add custom capabilities -> Richfaces 3.3.3 Notification about which files have been changed. Next.. Next... Finish
7. What is RichFaces A framework designed to add Ajax functionality in JSF solutions 100+ AJAX enabled JSF components in two libraries a4j: page centric AJAX controls rich: self contained, ready to use components Component Development Kit (CDK) Skinnability mechanism Dynamic resources handling
8. RichFaces History 2005: started by Alexander Smirnov 2005-2007: Developed by Exadel Ajax4jsf - open source, free RichFaces - commercial 2007: Both are part of JBoss Open source Ajax4jsf included in RichFaces Exadel team continues to develop the framework
9. Versions Just released – RichFaces 4 Final release end of March 2011 Previous stable version – RichFaces 3.3.3 * Note: RichFaces 3.3.3 has basic JSF 2.0 support Version JSF 1.1 JSF 1.2 JSF 2.0 RichFaces 3.1.x ● RichFaces 3.3.3* ● ● RichFaces 4 ●
16. Sending Ajax Request a4j:support – add AJAX support to any parent component a4j:commandButton , a4j:commandLink a4j:poll – periodically send AJAX request
17. Frequently Used Attributes action – action to be invoked if component is activated event – contains the JavaScript event reRender – coma separated list of components to be re-rendered ajaxSingle – set it to true in order to process only value of the current component
18. a4j:support Allow adding Ajax capability to any existing JSF component Should be attached to direct child of the component Key attributes event reRender <h:inputText id="myinput" value="#{userBean.name}"> <a4j:support event="onkeyup" reRender="outtext" /> </h:inputText> <h:outputText id="outtext" value="#{userBean.name}" />
19. a4j:commandButton and a4j:commandLink Visualize as button or a link Produces an Ajax request Update specified elements < a4j:commandButton value=" Calculate " action="#{userBean. calculate }" reRender=" out " /> <h:outputText id=" out " value="#{userBean. result }"/> < a4j:commandLink reRender="out"> <h:outputText value="Say Hello" /> </a4j:commandLink>
20. a4j:poll Periodically sends AJAX request to server Poll server data Update the page interval – number of milliseconds between requests enabled – whether the component should send requests or not Component should be placed inside a form
25. Menus Menus available in RichFaces <rich:contextMenu> <rich:dropDownMenu> Related components <rich:menuItem> <rich:menuSeparator> <rich:menuGroup>
26. Drop Down Menu Classic menu Support icons Submenus <rich:dropDownMenu> Can contain Menu items Menu groups Menu separators
27. Drop Down Menu – Key Attributes event – event that triggers menu appearance direction – direction of appearance joinPoint – corner of the label for the pop-up to be connected with submitMode – server, ajax, none value – text for the menu label Facet can be used instead ... <f:facet name="label"> <h:graphicImage value="/images/img1.png"/> </f:facet> ...
28. Menu Item Defines a single item in a menu <rich:menuItem> Key attributes value – text for the label icon – icon of the menu item action – action to be invoked submitMode – server, ajax, none
29. Menu Group & Menu Separator <rich:menuGroup> Label for secondary levels on the menu value – text for the label icon – icon of the group <rich:menuSeparator> Horizontal separator Can be placed between groups and items
31. Context Menu Multilevel context menu <rich:contextMenu> Can be applied to any element on the page Can contain Menu items Menu groups Menu separators
32. Context Menu – Key Attributes event – event that triggers menu appearance Default value is "oncontextmenu" disableDefaultMenu – forbids defaults handling e.g. standard browser menu attached – weather to attach to parent or specific component attachTo – id of the component to attach to Lower priority than attached attribute submitMode – server, ajax, none
35. Calendar Allows date and time selection <rich:calendar> Visualization Popup Inline Customization Locales Positioning Date pattern
36. Calendar – Key Attributes popup – specify popup or inline mode locale – locale used for visualization Default – locale of the current page datePattern – defines date pattern Default is MMM d, yyyy showInput –to render or not input field value – stores selected date enableManualInput – allows manual entry in the input field (false by default)
37. Calendar – Example Using <rich:calendar>: ... <rich:calendar value="#{calendarBean.selectedDate}" id="calendar" locale="#{calendarBean.locale}" popup="#{calendarBean.popup}" datePattern="#{calendarBean.pattern}" showApplyButton="#{calendarBean.showApply}" cellWidth="24px" cellHeight="22px" style="width:200px" disabled="#{calendarBean.disabled}"> </rich:calendar> ...
39. Trees Tree structure Customizable Build in Ajax processing Drag and drop capability Related components Tree Tree node Tree adaptor Recursive tree adaptor
40. Tree <rich:tree> Renders a tree control Using its immediate <rich:treeNode> children From a tree like data model org.richfaces.model.TreeNode javax.swing.tree.TreeNode Custom implementations
41. Tree – Key Attributes value – contains the nodes structure var – name used for accessing data defined with value nodeFace – node face facet name Used for node representation in <rich:treeNode> switchType – tree switch type ajax – ajax request is send for collapse/expand operations client – all node are rendered in advance Expand/collapse do not require server call server – full page content will be reloaded
42. Tree Node <rich:treeNode> – defines a template for nodes rendering within a <rich:tree> Possibility for different images for each node specified with icon , iconCollapsed , iconExpanded , iconLeaf attributes type attribute – a node type Defines the rendering and behaviour Its value is matched with the value of nodeFace rendered attribute – if false the component is not rendered
46. Selects Implement user select functionality Components List shuttle Ordering list Pick list
47. List Shuttle <rich:listShuttle> Move items from one list into another Can contain several columns Allow multiple selection Support reordering Consist of: Two item lists Optional caption element Optional ordering control set Move controls set
48. List Shuttle – Attributes sourceValue – list of items for the source list targetValue – list of items for the target list var – shared between both lists to define lists on the page (variable name to access values) sourceRequired , targetRequired – if it is required to have items in the source or target sourceSelection , targetSelection – store items selected in the lists converter – converts component data to a value that will be displayed
50. List Shuttle – Example Using list shuttle: ... <rich:listShuttle sourceValue ="#{toolBar.freeItems}" targetValue ="#{toolBar.items}" var ="items" listsHeight ="150" sourceListWidth ="130" targetListWidth="130" sourceCaptionLabel ="Available Items" targetCaptionLabel ="Currently Active Items" converter ="listShuttleconverter"> <rich:column width="18"> <h:graphicImage value="#{ items.iconURI }"> </h:graphicImage> </rich:column> <rich:column> <h:outputText value="#{ items.label }"></h:outputText> </rich:column> </rich:listShuttle> ...
51. Ordering List <rich:orderingList> Component for ordering items in a list Reordering possibility Sorting possibility Consist of: Item list Ordering control set
52. Ordering List – Key Attributes value – list that will be shown var – variable name to access values controlsType – control rendering button or none selection – stores the selected items captionLabel – defines the caption topControlLabel , bottomControlLabel , upControlLabel , downControlLabel
54. Pick List <rich:pickList> Move selected items from one list to another Simplified version of list shuttle Consist of: Two item lists Move controls set
55. Pick List – Key Attributes value – the current value of the component <f:selectItem(s)> – define source items switchByClick – move items with one click showButtonsLabel – to display labels or not listsHeight , sourceListWidth , targetListWidth Resizing copyAllControlLabel , copyControlLabel , removeControlLabel , removeAllControlLabel Labels definition
58. Data Iteration Components iterating over collection of data Render data in tabular or list form Several components with different functionality <rich:dataGrid> <rich:dataList> <rich:dataOrderedList> <rich:dataTable> <rich:extendedDataTable …
59. Frequently Used Attributes value – the current value var – name of the attribute used for accessing data object rows – number of rows to display columns – number of columns selection – stores the selected items
60. Example – Data List Using data list: ... <rich:dataList var="car" rows="10" value="#{dataTableScrollerBean.allCars}" > <h:outputText value="#{ car.make } #{ car.model }"/><br/> <h:outputText value="Price:" /> <h:outputText value="#{ car.price } " /> <h:outputText value="Mileage:"/> <h:outputText value="#{ car.mileage } " /> <h:outputText value="VIN:" /> <h:outputText value="#{ car.vin }" /> </rich:dataList> ...
61. Example – Data Grid Using Data Grid: ... < rich:dataGrid value ="#{dataTableScrollerBean.allCars}" var="car" columns ="3" elements ="9" width ="600px"> <rich:panel bodyClass="pbody"> <f:facet name="header"> <h:outputText value="#{car.make} #{car.model}" /> </f:facet> <h:panelGrid columns="2"> <h:outputText value="Price:" /> <h:outputText value="#{ car.price }" /> <h:outputText value="Mileage:" /> <h:outputText value="#{ car.mileage }" /> ... </h:panelGrid> </rich:panel> <f:facet name="footer"> <rich:datascroller></rich:datascroller> </f:facet> </rich:dataGrid> ...
62. Example – Scrollable Data Table Using scrollable data table: ... < rich:scrollableDataTable rowKeyVar ="rkv" frozenColCount ="1" height ="400px" width ="700px" id ="carList" rows ="40" columnClasses ="col" value ="#{dataTableScrollerBean.allCars}" var ="category" sortMode="single" sortOrder ="#{dataTableScrollerBean.order}" selection ="#{dataTableScrollerBean.selection}"> <rich:column id="make"> <f:facet name="header"><h:outputText value="Make" /></f:facet> <h:outputText value="#{category.make}" /> </rich:column> <rich:column id="model"> <f:facet name="header"><h:outputText value="Model" /></f:facet> <h:outputText value="#{category.model}" /> </rich:column> ... </rich:scrollableDataTable> ...
64. Ajax Validators Validate user input Enhanse JSF validation with Ajax support Possibility to use Hibernate validators Components Ajax validator Bean validator Graph validator
65. Ajax Validator <rich:ajaxValidator> Ajax validation for JSF inputs Should be added as child component Event that triggers validation should be specified Can use both standard or custom validation Can use Hibernate Validation Skips all JSF processing except validation
67. Bean Validator <rich:beanValidator> Validation using Hibernate constraints: ... <h:inputText value="#{validationBean.email}" id="email"> <rich:beanValidator summary="Invalid email"/> </h:inputText> <rich:message for="email" /> ... public class ValidationBean { ... @Email @NotEmpty private String email; /* Corresponding Getters and Setters */ ...
68. Graph Validator <rich:graphValidator> Similar to bean validator Wraps multiple input components Validates all of them Option to bind the component to a managed bean Using value attribute After the input is validated all bean properties are validated again.
71. Skins Lightweight extension on top of CSS Change look and feel of all Rich component with a few minor changes Can be applied to standard JSF and HTML tags as well Many ready to use skins <context-param> <param-name>org.richfaces.skin</param-name> <param-value>ruby</param-value> </context-param>
72. Skins (2) Modify existing or create your own Change skins in runtime <context-param> <param-name>org.richfaces.skin</param-name> <param-value> myCustomSkin </param-value> </context-param> <context-param> <param-name>org.richfaces.skin</param-name> <param-value >#{bean.skin} </param-value> </context-param>
74. Creating a Custom Skin Define a skin property file You can use existing skin as a base File name should be in the format <skinName>.skin.properties Place it in the project's source directory Set the skin parameter in web.xml
79. Exercises Review the usage of < rich:treeNodesAdaptor > and < rich:recursiveTreeNodesAdaptor > and try to understand how they work. Create a simple application that uses one of them.
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.