SlideShare a Scribd company logo
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

Rich faces

  • 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 ●
  • 10. 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>
  • 11. What do You Need to Start? Java JavaServer Faces Java application server or servlet container Browser (on client side) RichFaces framework
  • 12. What do you get? Many ready to use components
  • 13. 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>
  • 14. 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;%>
  • 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=&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: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>
  • 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
  • 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>
  • 23. RichFaces UI components Menus Calendar Trees Selects Data Iteration Ajax Validators
  • 24. Menus
  • 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=&quot;label&quot;>     <h:graphicImage value=&quot;/images/img1.png&quot;/> </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
  • 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 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 &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> ...
  • 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=&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. Trees
  • 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
  • 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>
  • 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
  • 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> ...
  • 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=&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 – 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> ...
  • 62. 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>          ...
  • 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
  • 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> ...
  • 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>
  • 73. 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
  • 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
  • 75. Skins Example classic wine ruby japanCherry emeraldTown
  • 77. Summary Introduction to RichFaces Ajax Action Components RichFaces UI Components Skins and Theming
  • 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.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

Editor's Notes

  1. 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 * ##
  2. 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 * ##
  3. 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
  4. RichFaces Drop Down menu is a component that allows to organize the hierarchical menu similar to one that almost every desktop application has.
  5. 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
  6. 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;.
  7. 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 * ##
  8. 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 * ##
  9. As an exercise at home review the usage of &lt;rich:treeNodeAdaptor&gt; and &lt;rich:recursiveTreeNodeAdaptor&gt; components * 07/16/96 * ##
  10. 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
  11. The &lt;rich:beanValidator&gt; component designed to provide validation using Hibernate model-based constraints.
  12. * 07/16/96 * ##