BG Java EE Course , profile picture
Uploaded byBG Java EE Course
PPT, PDF6,374 views

Rich faces

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

Embed presentation

Downloaded 243 times
RichFaces
Contents Introduction to RichFaces Ajax Action Components RichFaces UI Components Skins and Theming
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
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
Adding Richfaces MyProject -> right click -> Configure -> Add custom capabilities -> Richfaces 3.3.3 Notification about which files have been changed. Next.. Next... Finish
Introduction to RichFaces
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
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
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 ●
Example <%@ taglib uri=&quot;https://ajax4jsf.dev.java.net/ajax&quot; prefix=&quot;a4j&quot;%> <%@ taglib uri=&quot;http://java.sun.com/jsf/html&quot; prefix=&quot;h&quot;%> <%@ taglib uri=&quot;http://java.sun.com/jsf/core&quot; prefix=&quot;f&quot;%> <html> <head> <title>Repeater </title> </head> <body> <f:view> <h:form> <h:inputText size=&quot;50&quot; value=&quot;#{bean.text}&quot; > <a4j:support event=&quot;onkeyup&quot; reRender=&quot;rep&quot;/> </h:inputText> <h:outputText value=&quot;#{bean.text}&quot; id=&quot; rep &quot;/> </h:form> </f:view> </body> </html>
What do You Need to Start? Java JavaServer Faces Java application server or servlet container Browser (on client side) RichFaces framework
What do you get? Many ready to use components
Installing RichFaces Download latest version from www.jboss.org/jbossrichfaces/ Add RichFaces jar files to WEB-INF/lib folder Update web.xml file with the RichFaces Filter <filter> <display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping> <filter-name>richfaces</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> </filter-mapping>
Page Setup Add RichFaces namespaces and taglibs in your XHTML and JSP pages. Facelets JSP xmlns:a4j=&quot;http://richfaces.org/a4j&quot; xmlns:rich=&quot;http://richfaces.org/rich&quot; <%@ taglib uri=&quot;http://richfaces.org/a4j&quot; prefix=&quot;a4j&quot;%> <%@ taglib uri=&quot;http://richfaces.org/rich&quot; prefix=&quot;rich&quot;%>
Ajax Action Components
Sending Ajax Request a4j:support – add AJAX support to any parent component a4j:commandButton , a4j:commandLink a4j:poll – periodically send AJAX request
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
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=&quot;myinput&quot; value=&quot;#{userBean.name}&quot;> <a4j:support event=&quot;onkeyup&quot; reRender=&quot;outtext&quot; /> </h:inputText> <h:outputText id=&quot;outtext&quot; value=&quot;#{userBean.name}&quot; />
a4j:commandButton and a4j:commandLink Visualize as button or a link Produces an Ajax request Update specified elements < a4j:commandButton value=&quot; Calculate &quot; action=&quot;#{userBean. calculate }&quot; reRender=&quot; out &quot; /> <h:outputText id=&quot; out &quot; value=&quot;#{userBean. result }&quot;/> < a4j:commandLink  reRender=&quot;out&quot;>     <h:outputText value=&quot;Say Hello&quot; />  </a4j:commandLink>
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
a4j:poll – Example Using <a4j:poll> <a4j:poll id=&quot;poll&quot; interval=&quot;100&quot; enabled=&quot;#{clockBean.enabled}&quot; reRender=&quot;clock&quot; /> <h:panelGrid columns=&quot;3&quot;> <a4j:commandButton value=&quot;Start Clock&quot; action=&quot;#{clockBean.startClock}&quot; reRender=&quot;poll&quot; /> <a4j:commandButton value=&quot;Stop Clock&quot; action=&quot;#{clockBean.stopClock}&quot; reRender=&quot;poll&quot; /> <h:outputText id=&quot;clock&quot; value=&quot;#{clockBean.now}&quot; /> </h:panelGrid>
RichFaces UI Components
RichFaces UI components Menus Calendar Trees Selects Data Iteration Ajax Validators
Menus
Menus Menus available in RichFaces <rich:contextMenu> <rich:dropDownMenu> Related components <rich:menuItem> <rich:menuSeparator> <rich:menuGroup>
Drop Down Menu Classic menu Support icons Submenus <rich:dropDownMenu> Can contain Menu items Menu groups Menu separators
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=&quot;label&quot;>     <h:graphicImage value=&quot;/images/img1.png&quot;/> </f:facet> ...
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
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
Menu Components – Example Using menu components: ... <rich:dropDownMenu value=&quot;File&quot; direction=&quot;bottom-right&quot; jointPoint=&quot;bl&quot;>     <rich:menuItem submitMode=&quot;ajax&quot; value=&quot;New&quot; action=&quot;#{ddmenu.doNew}&quot;/>     <rich:menuItem   submitMode=&quot;ajax&quot;  value=&quot;Open&quot; action=&quot;#{ddmenu.doOpen}&quot;/>      <rich:menuGroup value=&quot;Save As...&quot;>         <rich:menuItem   submitMode=&quot;ajax&quot; value=&quot;Text File&quot;   action=&quot;#{ddmenu.doSaveText}&quot;/>          <rich:menuItem   submitMode=&quot;ajax&quot; value=&quot;PDF File&quot;   action=&quot;#{ddmenu.doSavePDF}&quot;/>     </rich:menuGroup>     <rich:menuItem  submitMode=&quot;ajax&quot; value=&quot;Close&quot; action=&quot;#{ddmenu.doClose}&quot;/>      <rich:menuSeparator id=&quot;menuSeparator11&quot;/>     <rich:menuItem  submitMode=&quot;ajax&quot; value=&quot;Exit&quot;  action=&quot;#{ddmenu.doExit}&quot;/> </rich:dropDownMenu> ...
Context Menu Multilevel context menu <rich:contextMenu> Can be applied to any element on the page Can contain Menu items Menu groups Menu separators
Context Menu – Key Attributes event – event that triggers menu appearance Default value is &quot;oncontextmenu&quot; 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
Context Menu - Example Using <rich:contectMenu>: ... <h:panelGrid columns=&quot;1&quot; columnClasses=&quot;cent&quot;> <h:panelGroup id=&quot;picture&quot;> <h:graphicImage value=&quot;/richfaces/jQuery/images/pic1.jpg&quot; id=&quot;pic&quot;/>   <rich:contextMenu event=&quot;oncontextmenu&quot;  attachTo=&quot;pic&quot; submitMode=&quot;none&quot;>      <rich:menuItem value=&quot;Zoom In&quot; onclick=&quot;enlarge('pic');&quot;  id=&quot;zin</rich:menuItem>       <rich:menuItem value=&quot;Zoom Out&quot; onclick=&quot;decrease('pic');&quot;  id=&quot;zout&quot;></rich:menuItem>     </rich:contextMenu> </h:panelGroup> </h:panelGrid> ...
Calendar
Calendar Allows date and time selection <rich:calendar> Visualization Popup Inline Customization Locales Positioning Date pattern
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)
Calendar – Example Using <rich:calendar>: ... <rich:calendar value=&quot;#{calendarBean.selectedDate}&quot; id=&quot;calendar&quot; locale=&quot;#{calendarBean.locale}&quot; popup=&quot;#{calendarBean.popup}&quot; datePattern=&quot;#{calendarBean.pattern}&quot; showApplyButton=&quot;#{calendarBean.showApply}&quot; cellWidth=&quot;24px&quot; cellHeight=&quot;22px&quot; style=&quot;width:200px&quot; disabled=&quot;#{calendarBean.disabled}&quot;> </rich:calendar> ...
Trees
Trees Tree structure Customizable Build in Ajax processing Drag and drop capability Related components Tree Tree node Tree adaptor Recursive tree adaptor
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
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
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
Trees – Example <rich:tree value=&quot;#{library.data}&quot; var=&quot;item&quot; nodeFace=&quot;#{item.type}&quot; switchType=&quot;client&quot;> <rich:treeNode type=&quot;artist&quot; iconLeaf=&quot;/images/tree/singer.gif&quot; icon=&quot;/images/tree/singer.gif&quot;> <h:outputText value=&quot;#{item.name}&quot; /> </rich:treeNode> <rich:treeNode type=&quot;album&quot; iconLeaf=&quot;/images/tree/disc.gif&quot; icon=&quot;/images/tree/disc.gif&quot;> <h:outputText value=&quot;#{item.title}&quot; /> </rich:treeNode> <rich:treeNode type=&quot;song&quot; iconLeaf=&quot;/images/tree/song.gif&quot; icon=&quot;/images/tree/song.gif&quot;> <h:outputText value=&quot;#{item.title}&quot; /> </rich:treeNode> </rich:tree> Using trees:
Tree Node – Example type and rendered attributes usage: < rich:tree value=&quot;#{library.data}&quot; var=&quot;item&quot; nodeFace=&quot;#{item.type}&quot;> <rich:treeNode type=&quot;album&quot; iconLeaf=&quot;/images/tree/album.gif&quot; icon=&quot;/images/tree/album.gif&quot; rendered=&quot;#{item.exist}&quot; > <h:outputText value=&quot;#{item.name}&quot; /> </rich:treeNode> <rich:treeNode type=&quot;album&quot; iconLeaf=&quot;/images/tree/album_absen.gif&quot; icon=&quot;/images/tree/album_absen.gif&quot;   rendered=&quot;#{not item.exist}&quot; > <h:outputText value=&quot;#{item.title}&quot; /> </rich:treeNode> <rich:treeNode type=&quot;song&quot; iconLeaf=&quot;/images/tree/song.gif&quot; ... </rich:tree>
Selects
Selects Implement user select functionality Components List shuttle Ordering list Pick list
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
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
List Shuttle – Attributes (2) Define caption labels sourceCaptionLabel targetCaptionLabel Define control labels topControlLabel bottomControlLabel upControlLabel downControlLabel Define size listsHeight sourceListWidth targetListWidth
List Shuttle – Example Using list shuttle: ... <rich:listShuttle sourceValue =&quot;#{toolBar.freeItems}&quot; targetValue =&quot;#{toolBar.items}&quot; var =&quot;items&quot; listsHeight =&quot;150&quot; sourceListWidth =&quot;130&quot; targetListWidth=&quot;130&quot; sourceCaptionLabel =&quot;Available Items&quot; targetCaptionLabel =&quot;Currently Active Items&quot; converter =&quot;listShuttleconverter&quot;> <rich:column width=&quot;18&quot;> <h:graphicImage value=&quot;#{ items.iconURI }&quot;> </h:graphicImage> </rich:column> <rich:column> <h:outputText value=&quot;#{ items.label }&quot;></h:outputText> </rich:column> </rich:listShuttle> ...
Ordering List <rich:orderingList> Component for ordering items in a list Reordering possibility Sorting possibility Consist of: Item list Ordering control set
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
Ordering List – Example Using ordering list: ... < rich:orderingList value =&quot;#{library.songsList}&quot; var =&quot;lib&quot; listHeight =&quot;300&quot; listWidth=&quot;350&quot; converter =&quot;orderingListConverter&quot; selection =&quot;#{library.selectedSongsSet}&quot;> <rich:column width=&quot;180&quot;> <f:facet name=&quot;header&quot;> <h:outputText value=&quot;Song Name&quot; /> </f:facet> <h:outputText value=&quot;#{ lib.title }&quot; / > </rich:column> <rich:column> <f:facet name=&quot;header&quot;> <h:outputText value=&quot;Artist Name&quot; /> </f:facet> <h:outputText value=&quot;#{ lib.album.artist.name }&quot; / ><br/> </rich:column> </rich:orderingList> ...
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
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
Pick List – Example Using pick list: ... <rich:pickList value=&quot;#{pickListBean.result}&quot;> < f:selectItems  value=&quot;#{capitalsBean.capitalsOptions}&quot;/>   <a4j:support event=&quot;onlistchanged&quot; reRender=&quot;result&quot;/> </rich:pickList>          <rich:panel id=&quot;result&quot; bodyClass=&quot;pbody&quot;> <f:facet name=&quot;header&quot;>    <h:outputText value=&quot;#{pickListBean.items} Options Choosen&quot; / >   </f:facet>   <rich:dataList value=&quot;#{pickListBean.result}&quot;  var=&quot;pickList&quot; rendered=&quot;#{pickListBean.items>0}&quot;>     <h:outputText value=&quot;#{pickList}&quot;/>   </rich:dataList>  </rich:panel> ...
Data Iteration
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 …
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
Example – Data List Using data list: ... <rich:dataList var=&quot;car&quot;  rows=&quot;10&quot; value=&quot;#{dataTableScrollerBean.allCars}&quot; > <h:outputText value=&quot;#{ car.make } #{ car.model }&quot;/><br/>   <h:outputText value=&quot;Price:&quot; />   <h:outputText value=&quot;#{ car.price } &quot; />   <h:outputText value=&quot;Mileage:&quot;/>   <h:outputText value=&quot;#{ car.mileage } &quot; />   <h:outputText value=&quot;VIN:&quot; />    <h:outputText value=&quot;#{ car.vin }&quot; /> </rich:dataList> ...
Example – Data Grid Using Data Grid: ... < rich:dataGrid   value =&quot;#{dataTableScrollerBean.allCars}&quot;  var=&quot;car&quot;   columns =&quot;3&quot;  elements =&quot;9&quot;  width =&quot;600px&quot;> <rich:panel bodyClass=&quot;pbody&quot;>    <f:facet name=&quot;header&quot;>      <h:outputText value=&quot;#{car.make} #{car.model}&quot; />     </f:facet>     <h:panelGrid columns=&quot;2&quot;>      <h:outputText value=&quot;Price:&quot; />       <h:outputText value=&quot;#{ car.price }&quot; />       <h:outputText value=&quot;Mileage:&quot; />       <h:outputText value=&quot;#{ car.mileage }&quot; /> ...      </h:panelGrid>   </rich:panel>   <f:facet name=&quot;footer&quot;>    <rich:datascroller></rich:datascroller>   </f:facet> </rich:dataGrid> ...
Example – Scrollable Data Table Using scrollable data table: ... < rich:scrollableDataTable   rowKeyVar =&quot;rkv&quot;  frozenColCount =&quot;1&quot;  height =&quot;400px&quot;         width =&quot;700px&quot;  id =&quot;carList&quot;  rows =&quot;40&quot;  columnClasses =&quot;col&quot;        value =&quot;#{dataTableScrollerBean.allCars}&quot; var =&quot;category&quot; sortMode=&quot;single&quot;        sortOrder =&quot;#{dataTableScrollerBean.order}&quot;        selection =&quot;#{dataTableScrollerBean.selection}&quot;> <rich:column id=&quot;make&quot;>    <f:facet name=&quot;header&quot;><h:outputText value=&quot;Make&quot; /></f:facet>     <h:outputText value=&quot;#{category.make}&quot; />   </rich:column>   <rich:column id=&quot;model&quot;>    <f:facet name=&quot;header&quot;><h:outputText value=&quot;Model&quot; /></f:facet>   <h:outputText value=&quot;#{category.model}&quot; />   </rich:column> ... </rich:scrollableDataTable>          ...
Ajax Validators
Ajax Validators Validate user input Enhanse JSF validation with Ajax support Possibility to use Hibernate validators Components Ajax validator Bean validator Graph validator
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
Ajax Validator – Example Using Ajax validator: ... <h:inputText value=&quot;#{userBean.name}&quot;  id=&quot;name&quot; required=&quot;true&quot;> <f:validateLength minimum=&quot;3&quot; maximum=&quot;12&quot;/>    <rich:ajaxValidator event=&quot;onblur&quot;/> </h:inputText> <rich:message for=&quot;name&quot; /> ...
Bean Validator <rich:beanValidator> Validation using Hibernate constraints: ... <h:inputText value=&quot;#{validationBean.email}&quot;  id=&quot;email&quot;> <rich:beanValidator summary=&quot;Invalid email&quot;/> </h:inputText> <rich:message for=&quot;email&quot; /> ... public class ValidationBean { ...      @Email     @NotEmpty     private String email;      /* Corresponding Getters and Setters */ ...
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.
Graph Validator - Example Using graph validator: ... <rich:graphValidator summary=&quot;Invalid values: &quot;> <h:panelGrid columns=&quot;3&quot;>    <h:outputText value=&quot;Name:&quot; />    <h:inputText value=&quot;#{validationBean.name}&quot; id=&quot;name&quot;>      <f:validateLength minimum=&quot;2&quot; />     </h:inputText>     <rich:message for=&quot;name&quot; />     <h:outputText value=&quot;Email:&quot; />     <h:inputText value=&quot;#{validationBean.email}&quot; id=&quot;email&quot;/>     <rich:message for=&quot;email&quot; />     <h:outputText value=&quot;Age:&quot; />     <h:inputText value=&quot;#{validationBean.age}&quot; id=&quot;age&quot; />     <rich:message for=&quot;age&quot; />   </h:panelGrid> </rich:graphValidator> ...
Skins and theming
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>
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>
Skin file (properties file) #Colors headerBackgroundColor=#900000 headerGradientColor=#DF5858 headerTextColor=#FFFFFF headerWeightFont=bold generalBackgroundColor=#f1f1f1 generalTextColor=#000000 generalSizeFont=11px generalFamilyFont=Arial, Verdana, sans-serif controlTextColor=#000000 controlBackgroundColor=#ffffff additionalBackgroundColor=#F9E4E4
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
Skins Example classic wine ruby japanCherry emeraldTown
RichFaces Demo http://livedemo.exadel.com/richfaces-demo
Summary Introduction to RichFaces Ajax Action Components RichFaces UI Components Skins and Theming
Questions ?
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.
References RichFaces 4.0 Developer Guide - http://www.jboss.org/richfaces/docs/4-0_guide RichFaces 3.3 Developer Guide - http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/ DZone Refcardz - JBoss RichFaces - http://refcardz.com/ RichFaces Live Demo http://livedemo.exadel.com/richfaces-demo

More Related Content

PPT
Unified Expression Language
byBG Java EE Course
 
ODP
JavaScript and jQuery Fundamentals
byBG Java EE Course
 
PPT
Processing XML with Java
byBG Java EE Course
 
PPT
Web Applications and Deployment
byBG Java EE Course
 
PPT
Java Server Faces (JSF) - advanced
byBG Java EE Course
 
PPT
Jsp
byDSKUMAR G
 
PPT
Jsp 01
bySubhasis Nayak
 
PPTX
JSP Directives
byShahDhruv21
 
Unified Expression Language
byBG Java EE Course
 
JavaScript and jQuery Fundamentals
byBG Java EE Course
 
Processing XML with Java
byBG Java EE Course
 
Web Applications and Deployment
byBG Java EE Course
 
Java Server Faces (JSF) - advanced
byBG Java EE Course
 
Jsp
byDSKUMAR G
 
Jsp 01
bySubhasis Nayak
 
JSP Directives
byShahDhruv21
 

What's hot

PPTX
Servlet and jsp interview questions
bySujata Regoti
 
PPTX
Jsp
byPooja Verma
 
PPT
Boston Computing Review - Java Server Pages
byJohn Brunswick
 
PPTX
C:\fakepath\jsp01
bySubhasis Nayak
 
PPT
JSP
byvikram singh
 
PPTX
Jsp presentation
bySher Singh Bardhan
 
PPS
Jsp element
bykamal kotecha
 
PPT
Java Server Pages
byBG Java EE Course
 
PPT
Jsp Slides
byDSKUMAR G
 
PPTX
JSP - Java Server Page
byVipin Yadav
 
PPTX
Jsp elements
byNuha Noor
 
PPT
29 Jsp
byDSKUMAR G
 
PPT
Adam Peller Interoperable Ajax Tools And Mashups
byAjax Experience 2009
 
PPTX
Web programming
byLeo Mark Villar
 
PDF
Html 5 in a big nutshell
byLennart Schoors
 
PPT
JSP Standart Tag Lİbrary - JSTL
byseleciii44
 
PPS
Jsp chapter 1
bykamal kotecha
 
PPTX
Implicit objects advance Java
byDarshit Metaliya
 
PDF
Jsp
byPriya Goyal
 
PPSX
Java server pages
byTanmoy Barman
 
Servlet and jsp interview questions
bySujata Regoti
 
Jsp
byPooja Verma
 
Boston Computing Review - Java Server Pages
byJohn Brunswick
 
C:\fakepath\jsp01
bySubhasis Nayak
 
JSP
byvikram singh
 
Jsp presentation
bySher Singh Bardhan
 
Jsp element
bykamal kotecha
 
Java Server Pages
byBG Java EE Course
 
Jsp Slides
byDSKUMAR G
 
JSP - Java Server Page
byVipin Yadav
 
Jsp elements
byNuha Noor
 
29 Jsp
byDSKUMAR G
 
Adam Peller Interoperable Ajax Tools And Mashups
byAjax Experience 2009
 
Web programming
byLeo Mark Villar
 
Html 5 in a big nutshell
byLennart Schoors
 
JSP Standart Tag Lİbrary - JSTL
byseleciii44
 
Jsp chapter 1
bykamal kotecha
 
Implicit objects advance Java
byDarshit Metaliya
 
Jsp
byPriya Goyal
 
Java server pages
byTanmoy Barman
 

Viewers also liked

PPT
Java Server Faces (JSF) - Basics
byBG Java EE Course
 
PDF
RichFaces 4 webinar #2: RichFaces 3 toRichFaces 4
byMax Katz
 
PPTX
Introduction to jsf 2
byyousry ibrahim
 
PPTX
JSF 2.2
byEdward Burns
 
PDF
Jsf 2 slideshare
byAntonio Lazaro Carvalho Borges
 
PPTX
WEB PAGE DESIGN USING HTML
bySneha Mukherjee
 
PPT
Introduction to html
byvikasgaur31
 
PDF
Web technology practical list
bydesaipratu10
 
PPT
JSP Custom Tags
byBG Java EE Course
 
ODP
Creating Web Sites with HTML and CSS
byBG Java EE Course
 
DOCX
Practical file on web technology(html)
byRAJWANT KAUR
 
PDF
HTML practicals
byAbhishek Sharma
 
PDF
Java EE 8 Recipes
byJosh Juneau
 
PDF
Java EE 7 - Overview and Status
byJava Usergroup Berlin-Brandenburg
 
PPT
Java EE Introduction
byejlp12
 
PDF
Developing Modern Java Web Applications with Java EE 7 and AngularJS
byShekhar Gulati
 
PPTX
Rich dad poor dad presentation
byAvenue Supermarts Ltd
 
PPTX
Rich dad poor dad ppt
bysabyasachi sethi
 
PDF
Alphorm.com Formation Java Server Faces
byAlphorm
 
KEY
HTML presentation for beginners
byjeroenvdmeer
 
Java Server Faces (JSF) - Basics
byBG Java EE Course
 
RichFaces 4 webinar #2: RichFaces 3 toRichFaces 4
byMax Katz
 
Introduction to jsf 2
byyousry ibrahim
 
JSF 2.2
byEdward Burns
 
Jsf 2 slideshare
byAntonio Lazaro Carvalho Borges
 
WEB PAGE DESIGN USING HTML
bySneha Mukherjee
 
Introduction to html
byvikasgaur31
 
Web technology practical list
bydesaipratu10
 
JSP Custom Tags
byBG Java EE Course
 
Creating Web Sites with HTML and CSS
byBG Java EE Course
 
Practical file on web technology(html)
byRAJWANT KAUR
 
HTML practicals
byAbhishek Sharma
 
Java EE 8 Recipes
byJosh Juneau
 
Java EE 7 - Overview and Status
byJava Usergroup Berlin-Brandenburg
 
Java EE Introduction
byejlp12
 
Developing Modern Java Web Applications with Java EE 7 and AngularJS
byShekhar Gulati
 
Rich dad poor dad presentation
byAvenue Supermarts Ltd
 
Rich dad poor dad ppt
bysabyasachi sethi
 
Alphorm.com Formation Java Server Faces
byAlphorm
 
HTML presentation for beginners
byjeroenvdmeer
 

Similar to Rich faces

PPT
Ajax Applications with RichFaces and JSF 2
byMax Katz
 
PDF
What You Need To Build Cool Enterprise Applications With JSF
byMax Katz
 
PDF
RichFaces 4: Rich Ajax Components For Your JSF Applications
byMax Katz
 
PDF
A Peek At The Future: Going Beyond JavaServer Faces 2.0 With RichFaces 4
bybalunasj
 
PDF
RichFaces: rich:* component library
byMax Katz
 
PDF
Introduction to RichFaces
byMax Katz
 
PDF
Going Above JSF 2.0 with RichFaces and Seam
byLincoln III
 
PDF
Jsf Ajax
byrajivmordani
 
PDF
Ajax Applications with JSF 2 and New RichFaces 4 - TSSJS
byMax Katz
 
PDF
Ajax Applications with JSF2 and New RichFaces 4 at JAX 2011
byMax Katz
 
PDF
RichFaces 4 webinar #1: Everything You Need To Know
byMax Katz
 
PPT
JSF 2 and beyond: Keeping progress coming
byAndy Schwartz
 
PDF
RichFaces: more concepts and features
byMax Katz
 
PDF
Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011
byMax Katz
 
PDF
Hands On With Rich Faces 4 - JavaOne 2010
byMax Katz
 
ODP
A Complete Tour of JSF 2
byJim Driscoll
 
PPT
What's new and exciting with JSF 2.0
byMichael Fons
 
PDF
RichFaces 4 Component Deep Dive - JAX/JSFSummit
bybalunasj
 
PDF
Ajax Applications with JSF 2 and New RichFaces 4 - JAX/JSF Summit
byMax Katz
 
PDF
Ajax Applications with JSF 2 and new RichFaces 4 - Herbstcampus
byMax Katz
 
Ajax Applications with RichFaces and JSF 2
byMax Katz
 
What You Need To Build Cool Enterprise Applications With JSF
byMax Katz
 
RichFaces 4: Rich Ajax Components For Your JSF Applications
byMax Katz
 
A Peek At The Future: Going Beyond JavaServer Faces 2.0 With RichFaces 4
bybalunasj
 
RichFaces: rich:* component library
byMax Katz
 
Introduction to RichFaces
byMax Katz
 
Going Above JSF 2.0 with RichFaces and Seam
byLincoln III
 
Jsf Ajax
byrajivmordani
 
Ajax Applications with JSF 2 and New RichFaces 4 - TSSJS
byMax Katz
 
Ajax Applications with JSF2 and New RichFaces 4 at JAX 2011
byMax Katz
 
RichFaces 4 webinar #1: Everything You Need To Know
byMax Katz
 
JSF 2 and beyond: Keeping progress coming
byAndy Schwartz
 
RichFaces: more concepts and features
byMax Katz
 
Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011
byMax Katz
 
Hands On With Rich Faces 4 - JavaOne 2010
byMax Katz
 
A Complete Tour of JSF 2
byJim Driscoll
 
What's new and exciting with JSF 2.0
byMichael Fons
 
RichFaces 4 Component Deep Dive - JAX/JSFSummit
bybalunasj
 
Ajax Applications with JSF 2 and New RichFaces 4 - JAX/JSF Summit
byMax Katz
 
Ajax Applications with JSF 2 and new RichFaces 4 - Herbstcampus
byMax Katz
 

More from BG Java EE Course

PPT
JSTL
byBG Java EE Course
 
PPT
Java Servlets
byBG Java EE Course
 
PPTX
CSS
byBG Java EE Course
 
PPTX
HTML: Tables and Forms
byBG Java EE Course
 
PPTX
HTML Fundamentals
byBG Java EE Course
 
PPTX
WWW and HTTP
byBG Java EE Course
 
PPT
Introduction to XML
byBG Java EE Course
 
PPT
Data Access with JDBC
byBG Java EE Course
 
PPT
Introduction to-sql
byBG Java EE Course
 
PPT
Introduction to-RDBMS-systems
byBG Java EE Course
 
PPT
Basic data-structures-v.1.1
byBG Java EE Course
 
PPT
Basic input-output-v.1.1
byBG Java EE Course
 
PPT
Strings v.1.1
byBG Java EE Course
 
PPT
Object-oriented concepts
byBG Java EE Course
 
PPT
Inheritance and Polymorphism
byBG Java EE Course
 
PPT
Defining classes-and-objects-1.0
byBG Java EE Course
 
PPT
Algorithms with-java-advanced-1.0
byBG Java EE Course
 
PPT
Algorithms with-java-1.0
byBG Java EE Course
 
PPT
Methods intro-1.0
byBG Java EE Course
 
PPT
Introduction to-programming
byBG Java EE Course
 
JSTL
byBG Java EE Course
 
Java Servlets
byBG Java EE Course
 
CSS
byBG Java EE Course
 
HTML: Tables and Forms
byBG Java EE Course
 
HTML Fundamentals
byBG Java EE Course
 
WWW and HTTP
byBG Java EE Course
 
Introduction to XML
byBG Java EE Course
 
Data Access with JDBC
byBG Java EE Course
 
Introduction to-sql
byBG Java EE Course
 
Introduction to-RDBMS-systems
byBG Java EE Course
 
Basic data-structures-v.1.1
byBG Java EE Course
 
Basic input-output-v.1.1
byBG Java EE Course
 
Strings v.1.1
byBG Java EE Course
 
Object-oriented concepts
byBG Java EE Course
 
Inheritance and Polymorphism
byBG Java EE Course
 
Defining classes-and-objects-1.0
byBG Java EE Course
 
Algorithms with-java-advanced-1.0
byBG Java EE Course
 
Algorithms with-java-1.0
byBG Java EE Course
 
Methods intro-1.0
byBG Java EE Course
 
Introduction to-programming
byBG Java EE Course
 

Recently uploaded

PDF
Fast Followers Project, Embedding Net Zero into Wakefield Metropolitan Distri...
byAssociation for Project Management
 
PPTX
The night at deoli - Ruskin bond's story of first love
byrajibhammar4
 
PDF
West Hatch High School - GCSE Media Specification
byWestHatch
 
PPTX
Drug Distribution in Pharmacology: Mechanisms, Barriers, Factors & Volume of ...
byamrin3379
 
PPTX
Exploring Higher education and its pathways
byEVAMAEBONGHANOY5
 
PPTX
literary theory and criticism by Vivek p
byvivekrathodborda
 
PPTX
That long silence - Novel by Shashi Deshapande
bysanjanavaghela65
 
PPTX
Grade 9 and 10 learner Fuse and Switch.pptx
byCarlJohnCabayao
 
PDF
Darwinism: Theory of Natural Selection and Origin of Species
byIPGDCWA,NAMPALLY
 
PPTX
Unit 3- Culture.pptx....................
byAkanksha Kotangale
 
PPTX
West Hatch High School -- GCSE Geography
byWestHatch
 
PPTX
TLE 8 W1 Q4 D2.pptx COMMON FLOOR PLAN SYMBOLS PLUMBING SYMBOLS
byraquelanaaltres1
 
PDF
Information about the author Shashi Deshpande
bydarshanaparmar6522
 
PPTX
COMMUNICATION ITS PROCESS ELEMENTS & BARRIER .pptx
byPoojaSen20
 
PPTX
YSPH VMOC Special Report - Measles - The Americas 1-25-2026
byYale School of Public Health - The Virtual Medical Operations Center (VMOC)
 
PDF
Risks and opportunities of artificial intelligence in education: A critical view
byYannis
 
PPTX
Definition of communication skills and it's process.
bypurvrajsinhsarvaiya0
 
PPTX
HABIT. Cognitive process. I Semester Shilpa Hotakar pptx
bySHILPA HOTAKAR
 
PDF
Information about Presentation strategies
bymansivaja18126
 
PPTX
Appreciations - Jan 26 01.pptxkjkjkkjkjkjkj
bypreetheshparmar
 
Fast Followers Project, Embedding Net Zero into Wakefield Metropolitan Distri...
byAssociation for Project Management
 
The night at deoli - Ruskin bond's story of first love
byrajibhammar4
 
West Hatch High School - GCSE Media Specification
byWestHatch
 
Drug Distribution in Pharmacology: Mechanisms, Barriers, Factors & Volume of ...
byamrin3379
 
Exploring Higher education and its pathways
byEVAMAEBONGHANOY5
 
literary theory and criticism by Vivek p
byvivekrathodborda
 
That long silence - Novel by Shashi Deshapande
bysanjanavaghela65
 
Grade 9 and 10 learner Fuse and Switch.pptx
byCarlJohnCabayao
 
Darwinism: Theory of Natural Selection and Origin of Species
byIPGDCWA,NAMPALLY
 
Unit 3- Culture.pptx....................
byAkanksha Kotangale
 
West Hatch High School -- GCSE Geography
byWestHatch
 
TLE 8 W1 Q4 D2.pptx COMMON FLOOR PLAN SYMBOLS PLUMBING SYMBOLS
byraquelanaaltres1
 
Information about the author Shashi Deshpande
bydarshanaparmar6522
 
COMMUNICATION ITS PROCESS ELEMENTS & BARRIER .pptx
byPoojaSen20
 
YSPH VMOC Special Report - Measles - The Americas 1-25-2026
byYale School of Public Health - The Virtual Medical Operations Center (VMOC)
 
Risks and opportunities of artificial intelligence in education: A critical view
byYannis
 
Definition of communication skills and it's process.
bypurvrajsinhsarvaiya0
 
HABIT. Cognitive process. I Semester Shilpa Hotakar pptx
bySHILPA HOTAKAR
 
Information about Presentation strategies
bymansivaja18126
 
Appreciations - Jan 26 01.pptxkjkjkkjkjkjkj
bypreetheshparmar
 

Rich faces

  • 1.
  • 2.
    Contents Introduction toRichFaces 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 eclipseproject 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
  • 6.
  • 7.
    What is RichFacesA 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 ●
  • 10.
    Example <%@ tagliburi=&quot;https://ajax4jsf.dev.java.net/ajax&quot; prefix=&quot;a4j&quot;%> <%@ taglib uri=&quot;http://java.sun.com/jsf/html&quot; prefix=&quot;h&quot;%> <%@ taglib uri=&quot;http://java.sun.com/jsf/core&quot; prefix=&quot;f&quot;%> <html> <head> <title>Repeater </title> </head> <body> <f:view> <h:form> <h:inputText size=&quot;50&quot; value=&quot;#{bean.text}&quot; > <a4j:support event=&quot;onkeyup&quot; reRender=&quot;rep&quot;/> </h:inputText> <h:outputText value=&quot;#{bean.text}&quot; id=&quot; rep &quot;/> </h:form> </f:view> </body> </html>
  • 11.
    What do YouNeed to Start? Java JavaServer Faces Java application server or servlet container Browser (on client side) RichFaces framework
  • 12.
    What do youget? Many ready to use components
  • 13.
    Installing RichFaces Downloadlatest version from www.jboss.org/jbossrichfaces/ Add RichFaces jar files to WEB-INF/lib folder Update web.xml file with the RichFaces Filter <filter> <display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping> <filter-name>richfaces</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> </filter-mapping>
  • 14.
    Page Setup AddRichFaces namespaces and taglibs in your XHTML and JSP pages. Facelets JSP xmlns:a4j=&quot;http://richfaces.org/a4j&quot; xmlns:rich=&quot;http://richfaces.org/rich&quot; <%@ taglib uri=&quot;http://richfaces.org/a4j&quot; prefix=&quot;a4j&quot;%> <%@ taglib uri=&quot;http://richfaces.org/rich&quot; prefix=&quot;rich&quot;%>
  • 15.
  • 16.
    Sending Ajax Requesta4j:support – add AJAX support to any parent component a4j:commandButton , a4j:commandLink a4j:poll – periodically send AJAX request
  • 17.
    Frequently Used Attributesaction – 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 addingAjax capability to any existing JSF component Should be attached to direct child of the component Key attributes event reRender <h:inputText id=&quot;myinput&quot; value=&quot;#{userBean.name}&quot;> <a4j:support event=&quot;onkeyup&quot; reRender=&quot;outtext&quot; /> </h:inputText> <h:outputText id=&quot;outtext&quot; value=&quot;#{userBean.name}&quot; />
  • 19.
    a4j:commandButton and a4j:commandLinkVisualize as button or a link Produces an Ajax request Update specified elements < a4j:commandButton value=&quot; Calculate &quot; action=&quot;#{userBean. calculate }&quot; reRender=&quot; out &quot; /> <h:outputText id=&quot; out &quot; value=&quot;#{userBean. result }&quot;/> < a4j:commandLink  reRender=&quot;out&quot;>     <h:outputText value=&quot;Say Hello&quot; />  </a4j:commandLink>
  • 20.
    a4j:poll Periodically sendsAJAX 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
  • 21.
    a4j:poll – Example Using <a4j:poll> <a4j:poll id=&quot;poll&quot; interval=&quot;100&quot; enabled=&quot;#{clockBean.enabled}&quot; reRender=&quot;clock&quot; /> <h:panelGrid columns=&quot;3&quot;> <a4j:commandButton value=&quot;Start Clock&quot; action=&quot;#{clockBean.startClock}&quot; reRender=&quot;poll&quot; /> <a4j:commandButton value=&quot;Stop Clock&quot; action=&quot;#{clockBean.stopClock}&quot; reRender=&quot;poll&quot; /> <h:outputText id=&quot;clock&quot; value=&quot;#{clockBean.now}&quot; /> </h:panelGrid>
  • 22.
  • 23.
    RichFaces UI componentsMenus Calendar Trees Selects Data Iteration Ajax Validators
  • 24.
  • 25.
    Menus Menus availablein RichFaces <rich:contextMenu> <rich:dropDownMenu> Related components <rich:menuItem> <rich:menuSeparator> <rich:menuGroup>
  • 26.
    Drop Down MenuClassic 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=&quot;label&quot;>     <h:graphicImage value=&quot;/images/img1.png&quot;/> </f:facet> ...
  • 28.
    Menu Item Definesa 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
  • 30.
    Menu Components –Example Using menu components: ... <rich:dropDownMenu value=&quot;File&quot; direction=&quot;bottom-right&quot; jointPoint=&quot;bl&quot;>     <rich:menuItem submitMode=&quot;ajax&quot; value=&quot;New&quot; action=&quot;#{ddmenu.doNew}&quot;/>     <rich:menuItem   submitMode=&quot;ajax&quot;  value=&quot;Open&quot; action=&quot;#{ddmenu.doOpen}&quot;/>      <rich:menuGroup value=&quot;Save As...&quot;>         <rich:menuItem   submitMode=&quot;ajax&quot; value=&quot;Text File&quot;   action=&quot;#{ddmenu.doSaveText}&quot;/>          <rich:menuItem   submitMode=&quot;ajax&quot; value=&quot;PDF File&quot;   action=&quot;#{ddmenu.doSavePDF}&quot;/>     </rich:menuGroup>     <rich:menuItem  submitMode=&quot;ajax&quot; value=&quot;Close&quot; action=&quot;#{ddmenu.doClose}&quot;/>      <rich:menuSeparator id=&quot;menuSeparator11&quot;/>     <rich:menuItem  submitMode=&quot;ajax&quot; value=&quot;Exit&quot;  action=&quot;#{ddmenu.doExit}&quot;/> </rich:dropDownMenu> ...
  • 31.
    Context Menu Multilevelcontext 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 &quot;oncontextmenu&quot; 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
  • 33.
    Context Menu -Example Using <rich:contectMenu>: ... <h:panelGrid columns=&quot;1&quot; columnClasses=&quot;cent&quot;> <h:panelGroup id=&quot;picture&quot;> <h:graphicImage value=&quot;/richfaces/jQuery/images/pic1.jpg&quot; id=&quot;pic&quot;/>   <rich:contextMenu event=&quot;oncontextmenu&quot;  attachTo=&quot;pic&quot; submitMode=&quot;none&quot;>      <rich:menuItem value=&quot;Zoom In&quot; onclick=&quot;enlarge('pic');&quot;  id=&quot;zin</rich:menuItem>       <rich:menuItem value=&quot;Zoom Out&quot; onclick=&quot;decrease('pic');&quot;  id=&quot;zout&quot;></rich:menuItem>     </rich:contextMenu> </h:panelGroup> </h:panelGrid> ...
  • 34.
  • 35.
    Calendar Allows dateand time selection <rich:calendar> Visualization Popup Inline Customization Locales Positioning Date pattern
  • 36.
    Calendar – KeyAttributes 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 – ExampleUsing <rich:calendar>: ... <rich:calendar value=&quot;#{calendarBean.selectedDate}&quot; id=&quot;calendar&quot; locale=&quot;#{calendarBean.locale}&quot; popup=&quot;#{calendarBean.popup}&quot; datePattern=&quot;#{calendarBean.pattern}&quot; showApplyButton=&quot;#{calendarBean.showApply}&quot; cellWidth=&quot;24px&quot; cellHeight=&quot;22px&quot; style=&quot;width:200px&quot; disabled=&quot;#{calendarBean.disabled}&quot;> </rich:calendar> ...
  • 38.
  • 39.
    Trees Tree structureCustomizable Build in Ajax processing Drag and drop capability Related components Tree Tree node Tree adaptor Recursive tree adaptor
  • 40.
    Tree <rich:tree> Rendersa 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 – KeyAttributes 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
  • 43.
    Trees – Example <rich:tree value=&quot;#{library.data}&quot; var=&quot;item&quot; nodeFace=&quot;#{item.type}&quot; switchType=&quot;client&quot;> <rich:treeNode type=&quot;artist&quot; iconLeaf=&quot;/images/tree/singer.gif&quot; icon=&quot;/images/tree/singer.gif&quot;> <h:outputText value=&quot;#{item.name}&quot; /> </rich:treeNode> <rich:treeNode type=&quot;album&quot; iconLeaf=&quot;/images/tree/disc.gif&quot; icon=&quot;/images/tree/disc.gif&quot;> <h:outputText value=&quot;#{item.title}&quot; /> </rich:treeNode> <rich:treeNode type=&quot;song&quot; iconLeaf=&quot;/images/tree/song.gif&quot; icon=&quot;/images/tree/song.gif&quot;> <h:outputText value=&quot;#{item.title}&quot; /> </rich:treeNode> </rich:tree> Using trees:
  • 44.
    Tree Node –Example type and rendered attributes usage: < rich:tree value=&quot;#{library.data}&quot; var=&quot;item&quot; nodeFace=&quot;#{item.type}&quot;> <rich:treeNode type=&quot;album&quot; iconLeaf=&quot;/images/tree/album.gif&quot; icon=&quot;/images/tree/album.gif&quot; rendered=&quot;#{item.exist}&quot; > <h:outputText value=&quot;#{item.name}&quot; /> </rich:treeNode> <rich:treeNode type=&quot;album&quot; iconLeaf=&quot;/images/tree/album_absen.gif&quot; icon=&quot;/images/tree/album_absen.gif&quot;   rendered=&quot;#{not item.exist}&quot; > <h:outputText value=&quot;#{item.title}&quot; /> </rich:treeNode> <rich:treeNode type=&quot;song&quot; iconLeaf=&quot;/images/tree/song.gif&quot; ... </rich:tree>
  • 45.
  • 46.
    Selects Implement userselect 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
  • 49.
    List Shuttle –Attributes (2) Define caption labels sourceCaptionLabel targetCaptionLabel Define control labels topControlLabel bottomControlLabel upControlLabel downControlLabel Define size listsHeight sourceListWidth targetListWidth
  • 50.
    List Shuttle –Example Using list shuttle: ... <rich:listShuttle sourceValue =&quot;#{toolBar.freeItems}&quot; targetValue =&quot;#{toolBar.items}&quot; var =&quot;items&quot; listsHeight =&quot;150&quot; sourceListWidth =&quot;130&quot; targetListWidth=&quot;130&quot; sourceCaptionLabel =&quot;Available Items&quot; targetCaptionLabel =&quot;Currently Active Items&quot; converter =&quot;listShuttleconverter&quot;> <rich:column width=&quot;18&quot;> <h:graphicImage value=&quot;#{ items.iconURI }&quot;> </h:graphicImage> </rich:column> <rich:column> <h:outputText value=&quot;#{ items.label }&quot;></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
  • 53.
    Ordering List –Example Using ordering list: ... < rich:orderingList value =&quot;#{library.songsList}&quot; var =&quot;lib&quot; listHeight =&quot;300&quot; listWidth=&quot;350&quot; converter =&quot;orderingListConverter&quot; selection =&quot;#{library.selectedSongsSet}&quot;> <rich:column width=&quot;180&quot;> <f:facet name=&quot;header&quot;> <h:outputText value=&quot;Song Name&quot; /> </f:facet> <h:outputText value=&quot;#{ lib.title }&quot; / > </rich:column> <rich:column> <f:facet name=&quot;header&quot;> <h:outputText value=&quot;Artist Name&quot; /> </f:facet> <h:outputText value=&quot;#{ lib.album.artist.name }&quot; / ><br/> </rich:column> </rich:orderingList> ...
  • 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
  • 56.
    Pick List –Example Using pick list: ... <rich:pickList value=&quot;#{pickListBean.result}&quot;> < f:selectItems  value=&quot;#{capitalsBean.capitalsOptions}&quot;/>   <a4j:support event=&quot;onlistchanged&quot; reRender=&quot;result&quot;/> </rich:pickList>          <rich:panel id=&quot;result&quot; bodyClass=&quot;pbody&quot;> <f:facet name=&quot;header&quot;>    <h:outputText value=&quot;#{pickListBean.items} Options Choosen&quot; / >   </f:facet>   <rich:dataList value=&quot;#{pickListBean.result}&quot;  var=&quot;pickList&quot; rendered=&quot;#{pickListBean.items>0}&quot;>     <h:outputText value=&quot;#{pickList}&quot;/>   </rich:dataList>  </rich:panel> ...
  • 57.
  • 58.
    Data Iteration Componentsiterating 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 Attributesvalue – 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 – DataList Using data list: ... <rich:dataList var=&quot;car&quot;  rows=&quot;10&quot; value=&quot;#{dataTableScrollerBean.allCars}&quot; > <h:outputText value=&quot;#{ car.make } #{ car.model }&quot;/><br/>   <h:outputText value=&quot;Price:&quot; />   <h:outputText value=&quot;#{ car.price } &quot; />   <h:outputText value=&quot;Mileage:&quot;/>   <h:outputText value=&quot;#{ car.mileage } &quot; />   <h:outputText value=&quot;VIN:&quot; />    <h:outputText value=&quot;#{ car.vin }&quot; /> </rich:dataList> ...
  • 61.
    Example – DataGrid Using Data Grid: ... < rich:dataGrid   value =&quot;#{dataTableScrollerBean.allCars}&quot;  var=&quot;car&quot;   columns =&quot;3&quot;  elements =&quot;9&quot;  width =&quot;600px&quot;> <rich:panel bodyClass=&quot;pbody&quot;>    <f:facet name=&quot;header&quot;>      <h:outputText value=&quot;#{car.make} #{car.model}&quot; />     </f:facet>     <h:panelGrid columns=&quot;2&quot;>      <h:outputText value=&quot;Price:&quot; />       <h:outputText value=&quot;#{ car.price }&quot; />       <h:outputText value=&quot;Mileage:&quot; />       <h:outputText value=&quot;#{ car.mileage }&quot; /> ...      </h:panelGrid>   </rich:panel>   <f:facet name=&quot;footer&quot;>    <rich:datascroller></rich:datascroller>   </f:facet> </rich:dataGrid> ...
  • 62.
    Example – ScrollableData Table Using scrollable data table: ... < rich:scrollableDataTable   rowKeyVar =&quot;rkv&quot;  frozenColCount =&quot;1&quot;  height =&quot;400px&quot;         width =&quot;700px&quot;  id =&quot;carList&quot;  rows =&quot;40&quot;  columnClasses =&quot;col&quot;        value =&quot;#{dataTableScrollerBean.allCars}&quot; var =&quot;category&quot; sortMode=&quot;single&quot;        sortOrder =&quot;#{dataTableScrollerBean.order}&quot;        selection =&quot;#{dataTableScrollerBean.selection}&quot;> <rich:column id=&quot;make&quot;>    <f:facet name=&quot;header&quot;><h:outputText value=&quot;Make&quot; /></f:facet>     <h:outputText value=&quot;#{category.make}&quot; />   </rich:column>   <rich:column id=&quot;model&quot;>    <f:facet name=&quot;header&quot;><h:outputText value=&quot;Model&quot; /></f:facet>   <h:outputText value=&quot;#{category.model}&quot; />   </rich:column> ... </rich:scrollableDataTable>          ...
  • 63.
  • 64.
    Ajax Validators Validateuser 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
  • 66.
    Ajax Validator –Example Using Ajax validator: ... <h:inputText value=&quot;#{userBean.name}&quot;  id=&quot;name&quot; required=&quot;true&quot;> <f:validateLength minimum=&quot;3&quot; maximum=&quot;12&quot;/>    <rich:ajaxValidator event=&quot;onblur&quot;/> </h:inputText> <rich:message for=&quot;name&quot; /> ...
  • 67.
    Bean Validator <rich:beanValidator> Validation using Hibernate constraints: ... <h:inputText value=&quot;#{validationBean.email}&quot;  id=&quot;email&quot;> <rich:beanValidator summary=&quot;Invalid email&quot;/> </h:inputText> <rich:message for=&quot;email&quot; /> ... 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.
  • 69.
    Graph Validator -Example Using graph validator: ... <rich:graphValidator summary=&quot;Invalid values: &quot;> <h:panelGrid columns=&quot;3&quot;>    <h:outputText value=&quot;Name:&quot; />    <h:inputText value=&quot;#{validationBean.name}&quot; id=&quot;name&quot;>      <f:validateLength minimum=&quot;2&quot; />     </h:inputText>     <rich:message for=&quot;name&quot; />     <h:outputText value=&quot;Email:&quot; />     <h:inputText value=&quot;#{validationBean.email}&quot; id=&quot;email&quot;/>     <rich:message for=&quot;email&quot; />     <h:outputText value=&quot;Age:&quot; />     <h:inputText value=&quot;#{validationBean.age}&quot; id=&quot;age&quot; />     <rich:message for=&quot;age&quot; />   </h:panelGrid> </rich:graphValidator> ...
  • 70.
  • 71.
    Skins Lightweight extensionon 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) Modifyexisting 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>
  • 73.
    Skin file (propertiesfile) #Colors headerBackgroundColor=#900000 headerGradientColor=#DF5858 headerTextColor=#FFFFFF headerWeightFont=bold generalBackgroundColor=#f1f1f1 generalTextColor=#000000 generalSizeFont=11px generalFamilyFont=Arial, Verdana, sans-serif controlTextColor=#000000 controlBackgroundColor=#ffffff additionalBackgroundColor=#F9E4E4
  • 74.
    Creating a CustomSkin 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
  • 75.
    Skins Example classicwine ruby japanCherry emeraldTown
  • 76.
  • 77.
    Summary Introduction toRichFaces Ajax Action Components RichFaces UI Components Skins and Theming
  • 78.
  • 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.
  • 80.
    References RichFaces 4.0Developer Guide - http://www.jboss.org/richfaces/docs/4-0_guide RichFaces 3.3 Developer Guide - http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/ DZone Refcardz - JBoss RichFaces - http://refcardz.com/ RichFaces Live Demo http://livedemo.exadel.com/richfaces-demo

Editor's Notes

  • #8 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 * ##
  • #11 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 * ##
  • #21 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
  • #27 RichFaces Drop Down menu is a component that allows to organize the hierarchical menu similar to one that almost every desktop application has.
  • #28 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 &apos;event&apos; 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 &apos;submitMode&apos; attribute that has three possible options - &amp;quot;server&amp;quot;, &amp;quot;ajax&amp;quot; or &amp;quot;none&amp;quot;. Mode &amp;quot;none&amp;quot; does not produce any request, but allows you to provide your own functionality inside the menu item with an inline content. The &lt;rich:dropDownMenu&gt; &amp;quot;submitMode&amp;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&apos;s appearance. direction Defines direction of the popup list to appear. Possible values are &amp;quot;top-right&amp;quot;, &amp;quot;top-right&amp;quot;, &amp;quot;top-left&amp;quot;, &amp;quot;bottom-right&amp;quot;, &amp;quot;bottom-left&amp;quot;, &amp;quot;auto&amp;quot;. Default value is &amp;quot;auto&amp;quot;. jointPoint Sets the corner of the label for the pop-up to be connected with. Possible values are &amp;quot;tr&amp;quot;, &amp;quot;tl&amp;quot;, &amp;quot;bl&amp;quot;, &amp;quot;br&amp;quot;, &amp;quot;bottom-left&amp;quot;, &amp;quot;auto&amp;quot;. Default value is &amp;quot;auto&amp;quot;. &amp;quot;tr&amp;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 &amp;quot;ajax&amp;quot;,&amp;quot;server&amp;quot;,&amp;quot;none&amp;quot;. Default value is &amp;quot;sever&amp;quot;. value Defines representation text for Label used for menu calls
  • #33 event Defines an event on the parent element to display the menu. Default value is &amp;quot;oncontextmenu&amp;quot;. disableDefaultMenu Forbids default handling for adjusted event. Default value &amp;quot;false&amp;quot;. attached If the value of the &amp;quot;attached&amp;quot; attribute is true, the component is attached to the component, specified in the &amp;quot;attachTo&amp;quot; attribute or to the parent component, if &amp;quot;attachTo&amp;quot; is not defined. Default value is &amp;quot;true&amp;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 &apos;false&apos;, 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 &amp;quot;server&amp;quot;.
  • #41 The component is designed for hierarchical data presentation and allows rendering any tree-like data model. You can build your &lt;rich:tree&gt; using model (org.richfaces.model.TreeNode or javax.swing.tree.TreeNode). In this case the &lt;rich:tree&gt; component interacts with data model via &amp;quot;TreeNode&amp;quot; interface ( org.richfaces.model.TreeNode ) that is used for the &lt;rich:tree&gt; nodes representation. Actually you can develop and use your own implementation of the &amp;quot;TreeNode&amp;quot; interface or use a default one, which is defined with a default class &amp;quot;TreeNodeImpl&amp;quot; ( org.richfaces.model.TreeNodeImpl ). The &amp;quot;value&amp;quot; attribute of the &lt;rich:tree&gt; component contains a nodes structure defined in a bean property. When the &lt;rich:tree&gt; component is being rendered it iterates over the model nodes and renders them using one of its immediate &lt;rich:treeNode&gt; children. Data property of the current model TreeNode is exposed using &amp;quot;var&amp;quot; attribute, so if var=&amp;quot;station&amp;quot; you can refer to that data using #{station} syntax. * 07/16/96 * ##
  • #42 The &amp;quot;value&amp;quot; attribute of the &lt;rich:tree&gt; component contains a nodes structure defined in a bean property. When the &lt;rich:tree&gt; component is being rendered it iterates over the model nodes and renders them using one of its immediate &lt;rich:treeNode&gt; children. Data property of the current model TreeNode is exposed using &amp;quot;var&amp;quot; attribute, so if var=&amp;quot;station&amp;quot; you can refer to that data using #{station} syntax. It&apos;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 &amp;quot;var&amp;quot; attribute). The node behavior is defined by the components nested into the &lt;rich:treeNode&gt; (e.g. links or buttons). For these purposes you should use &amp;quot;nodeFace&amp;quot; attribute. For each tree node a value of &amp;quot;nodeFace&amp;quot; attribute is evaluated and &lt;rich:treeNode&gt; with a value of &amp;quot;type&amp;quot; attribute equal to a value of &amp;quot;nodeFace&amp;quot; is used for node representation. See an example below. * 07/16/96 * ##
  • #43 As an exercise at home review the usage of &lt;rich:treeNodeAdaptor&gt; and &lt;rich:recursiveTreeNodeAdaptor&gt; components * 07/16/96 * ##
  • #66 The &lt;rich:ajaxValidator&gt; 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
  • #68 The &lt;rich:beanValidator&gt; component designed to provide validation using Hibernate model-based constraints.
  • #69 * 07/16/96 * ##