Rich faces


Published on

Richfaces presentation for the JavaEE course (winter&summer 2010-2011).
Author Radoslav Ivanov
Presenter Mihail Stoynov
Presented on 16.04.2011.

Published in: Education, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

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

    1. 1. RichFaces
    2. 2. Contents <ul><li>Introduction to RichFaces </li></ul><ul><li>Ajax Action Components </li></ul><ul><li>RichFaces UI Components </li></ul><ul><li>Skins and Theming </li></ul>
    3. 3. Installation (JBoss Tools) <ul><li>Get a clean copy of Eclipse for JavaEE developers (helios)(32bit only)+tomcat7+ppt </li></ul><ul><li>Extract </li></ul><ul><li>Go to Eclipse->Help->Install new software </li></ul><ul><li>Location: </li></ul><ul><li>Click ONLY ON “ Jboss Tools Richfaces ” </li></ul><ul><li>Next -> Next -> Next ... Reboot Eclipse </li></ul><ul><li>Extract tomcat somewhere close to eclipse </li></ul><ul><li>Create workspace close to eclipse </li></ul>
    4. 4. Creating an eclipse project <ul><li>Create a new project -> JSF project </li></ul><ul><li>JSF Environment: JSF 1.2 + Facelets </li></ul><ul><li>Template: FaceletsKickStartWithRILibrs </li></ul><ul><li>Next </li></ul><ul><li>Servlet version: 2.5 </li></ul><ul><li>Runtime -> New -> Tomcat7 -> Browse... </li></ul><ul><li>Next ...Next... Finish </li></ul><ul><li>NOTE: DELETE .../WEB-INF/lib/el-api.jar </li></ul><ul><li>Go to project -> Run as -> Run on Server </li></ul>
    5. 5. Adding Richfaces <ul><li>MyProject -> right click -> Configure -> Add custom capabilities -> Richfaces 3.3.3 </li></ul><ul><li>Notification about which files have been changed. </li></ul><ul><li>Next.. Next... Finish </li></ul>
    6. 6. Introduction to RichFaces
    7. 7. What is RichFaces <ul><li>A framework designed to add Ajax functionality in JSF solutions </li></ul><ul><li>100+ AJAX enabled JSF components in two libraries </li></ul><ul><ul><li>a4j: page centric AJAX controls </li></ul></ul><ul><ul><li>rich: self contained, ready to use components </li></ul></ul><ul><li>Component Development Kit (CDK) </li></ul><ul><li>Skinnability mechanism </li></ul><ul><li>Dynamic resources handling </li></ul>
    8. 8. RichFaces History <ul><li>2005: started by Alexander Smirnov </li></ul><ul><li>2005-2007: Developed by Exadel </li></ul><ul><ul><li>Ajax4jsf - open source, free </li></ul></ul><ul><ul><li>RichFaces - commercial </li></ul></ul><ul><li>2007: Both are part of JBoss </li></ul><ul><ul><li>Open source </li></ul></ul><ul><ul><li>Ajax4jsf included in RichFaces </li></ul></ul><ul><ul><li>Exadel team continues to develop the framework </li></ul></ul>
    9. 9. Versions <ul><li>Just released – RichFaces 4 </li></ul><ul><ul><li>Final release end of March 2011 </li></ul></ul><ul><li>Previous stable version – RichFaces 3.3.3 </li></ul>* 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. 10. Example <%@ taglib uri=&quot;; prefix=&quot;a4j&quot;%> <%@ taglib uri=&quot;; prefix=&quot;h&quot;%> <%@ taglib uri=&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. 11. What do You Need to Start? <ul><li>Java </li></ul><ul><li>JavaServer Faces </li></ul><ul><li>Java application server or servlet container </li></ul><ul><li>Browser (on client side) </li></ul><ul><li>RichFaces framework </li></ul>
    12. 12. What do you get? <ul><li>Many ready to use components </li></ul>
    13. 13. Installing RichFaces <ul><li>Download latest version from </li></ul><ul><li>Add RichFaces jar files to WEB-INF/lib folder </li></ul><ul><li>Update web.xml file with the RichFaces Filter </li></ul><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. 14. Page Setup <ul><li>Add RichFaces namespaces and taglibs in your XHTML and JSP pages. </li></ul><ul><li>Facelets </li></ul><ul><li>JSP </li></ul>xmlns:a4j=&quot;; xmlns:rich=&quot;; <%@ taglib uri=&quot;; prefix=&quot;a4j&quot;%> <%@ taglib uri=&quot;; prefix=&quot;rich&quot;%>
    15. 15. Ajax Action Components
    16. 16. Sending Ajax Request <ul><li>a4j:support – add AJAX support to any parent component </li></ul><ul><li>a4j:commandButton , a4j:commandLink </li></ul><ul><li>a4j:poll – periodically send AJAX request </li></ul>
    17. 17. Frequently Used Attributes <ul><li>action – action to be invoked if component is activated </li></ul><ul><li>event – contains the JavaScript event </li></ul><ul><li>reRender – coma separated list of components to be re-rendered </li></ul><ul><li>ajaxSingle – set it to true in order to process only value of the current component </li></ul>
    18. 18. a4j:support <ul><li>Allow adding Ajax capability to any existing JSF component </li></ul><ul><li>Should be attached to direct child of the component </li></ul><ul><li>Key attributes </li></ul><ul><ul><li>event </li></ul></ul><ul><ul><li>reRender </li></ul></ul><h:inputText id=&quot;myinput&quot; value=&quot;#{}&quot;> <a4j:support event=&quot;onkeyup&quot; reRender=&quot;outtext&quot; /> </h:inputText> <h:outputText id=&quot;outtext&quot; value=&quot;#{}&quot; />
    19. 19. a4j:commandButton and a4j:commandLink <ul><li>Visualize as button or a link </li></ul><ul><li>Produces an Ajax request </li></ul><ul><li>Update specified elements </li></ul>< 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. 20. a4j:poll <ul><li>Periodically sends AJAX request to server </li></ul><ul><ul><li>Poll server data </li></ul></ul><ul><ul><li>Update the page </li></ul></ul><ul><li>interval – number of milliseconds between requests </li></ul><ul><li>enabled – whether the component should send requests or not </li></ul><ul><li>Component should be placed inside a form </li></ul>
    21. 21. a4j:poll – Example <ul><li>Using <a4j:poll> </li></ul><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;#{}&quot; /> </h:panelGrid>
    22. 22. RichFaces UI Components
    23. 23. RichFaces UI components <ul><li>Menus </li></ul><ul><li>Calendar </li></ul><ul><li>Trees </li></ul><ul><li>Selects </li></ul><ul><li>Data Iteration </li></ul><ul><li>Ajax Validators </li></ul>
    24. 24. Menus
    25. 25. Menus <ul><li>Menus available in RichFaces </li></ul><ul><ul><li><rich:contextMenu> </li></ul></ul><ul><ul><li><rich:dropDownMenu> </li></ul></ul><ul><li>Related components </li></ul><ul><ul><li><rich:menuItem> </li></ul></ul><ul><ul><li><rich:menuSeparator> </li></ul></ul><ul><ul><li><rich:menuGroup> </li></ul></ul>
    26. 26. Drop Down Menu <ul><li>Classic menu </li></ul><ul><ul><li>Support icons </li></ul></ul><ul><ul><li>Submenus </li></ul></ul><ul><li><rich:dropDownMenu> </li></ul><ul><li>Can contain </li></ul><ul><ul><li>Menu items </li></ul></ul><ul><ul><li>Menu groups </li></ul></ul><ul><ul><li>Menu separators </li></ul></ul>
    27. 27. Drop Down Menu – Key Attributes <ul><li>event – event that triggers menu appearance </li></ul><ul><li>direction – direction of appearance </li></ul><ul><li>joinPoint – corner of the label for the pop-up to be connected with </li></ul><ul><li>submitMode – server, ajax, none </li></ul><ul><li>value – text for the menu label </li></ul><ul><ul><li>Facet can be used instead </li></ul></ul>... <f:facet name=&quot;label&quot;>     <h:graphicImage value=&quot;/images/img1.png&quot;/> </f:facet> ...
    28. 28. Menu Item <ul><li>Defines a single item in a menu </li></ul><ul><li><rich:menuItem> </li></ul><ul><li>Key attributes </li></ul><ul><ul><li>value – text for the label </li></ul></ul><ul><ul><li>icon – icon of the menu item </li></ul></ul><ul><ul><li>action – action to be invoked </li></ul></ul><ul><ul><li>submitMode – server, ajax, none </li></ul></ul>
    29. 29. Menu Group & Menu Separator <ul><li><rich:menuGroup> </li></ul><ul><ul><li>Label for secondary levels on the menu </li></ul></ul><ul><ul><li>value – text for the label </li></ul></ul><ul><ul><li>icon – icon of the group </li></ul></ul><ul><li><rich:menuSeparator> </li></ul><ul><ul><li>Horizontal separator </li></ul></ul><ul><ul><li>Can be placed between groups and items </li></ul></ul>
    30. 30. Menu Components – Example <ul><li>Using menu components: </li></ul>... <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. 31. Context Menu <ul><li>Multilevel context menu </li></ul><ul><li><rich:contextMenu> </li></ul><ul><li>Can be applied to any element on the page </li></ul><ul><li>Can contain </li></ul><ul><ul><li>Menu items </li></ul></ul><ul><ul><li>Menu groups </li></ul></ul><ul><ul><li>Menu separators </li></ul></ul>
    32. 32. Context Menu – Key Attributes <ul><li>event – event that triggers menu appearance </li></ul><ul><ul><li>Default value is &quot;oncontextmenu&quot; </li></ul></ul><ul><li>disableDefaultMenu – forbids defaults handling e.g. standard browser menu </li></ul><ul><li>attached – weather to attach to parent or specific component </li></ul><ul><li>attachTo – id of the component to attach to </li></ul><ul><ul><li>Lower priority than attached attribute </li></ul></ul><ul><li>submitMode – server, ajax, none </li></ul>
    33. 33. Context Menu - Example <ul><li>Using <rich:contectMenu>: </li></ul>... <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. 34. Calendar
    35. 35. Calendar <ul><li>Allows date and time selection </li></ul><ul><li><rich:calendar> </li></ul><ul><li>Visualization </li></ul><ul><ul><li>Popup </li></ul></ul><ul><ul><li>Inline </li></ul></ul><ul><li>Customization </li></ul><ul><ul><li>Locales </li></ul></ul><ul><ul><li>Positioning </li></ul></ul><ul><ul><li>Date pattern </li></ul></ul>
    36. 36. Calendar – Key Attributes <ul><li>popup – specify popup or inline mode </li></ul><ul><li>locale – locale used for visualization </li></ul><ul><ul><li>Default – locale of the current page </li></ul></ul><ul><li>datePattern – defines date pattern </li></ul><ul><ul><li>Default is MMM d, yyyy </li></ul></ul><ul><li>showInput –to render or not input field </li></ul><ul><li>value – stores selected date </li></ul><ul><li>enableManualInput – allows manual entry in the input field (false by default) </li></ul>
    37. 37. Calendar – Example <ul><li>Using <rich:calendar>: </li></ul>... <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. 38. Trees
    39. 39. Trees <ul><li>Tree structure </li></ul><ul><li>Customizable </li></ul><ul><li>Build in Ajax processing </li></ul><ul><li>Drag and drop capability </li></ul><ul><li>Related components </li></ul><ul><ul><li>Tree </li></ul></ul><ul><ul><li>Tree node </li></ul></ul><ul><ul><li>Tree adaptor </li></ul></ul><ul><ul><li>Recursive tree adaptor </li></ul></ul>
    40. 40. Tree <ul><li><rich:tree> </li></ul><ul><li>Renders a tree control </li></ul><ul><ul><li>Using its immediate <rich:treeNode> children </li></ul></ul><ul><ul><li>From a tree like data model </li></ul></ul><ul><ul><ul><li>org.richfaces.model.TreeNode </li></ul></ul></ul><ul><ul><ul><li>javax.swing.tree.TreeNode </li></ul></ul></ul><ul><ul><ul><li>Custom implementations </li></ul></ul></ul>
    41. 41. Tree – Key Attributes <ul><li>value – contains the nodes structure </li></ul><ul><li>var – name used for accessing data defined with value </li></ul><ul><li>nodeFace – node face facet name </li></ul><ul><ul><li>Used for node representation in <rich:treeNode> </li></ul></ul><ul><li>switchType – tree switch type </li></ul><ul><ul><li>ajax – ajax request is send for collapse/expand operations </li></ul></ul><ul><ul><li>client – all node are rendered in advance </li></ul></ul><ul><ul><ul><li>Expand/collapse do not require server call </li></ul></ul></ul><ul><ul><li>server – full page content will be reloaded </li></ul></ul>
    42. 42. Tree Node <ul><li><rich:treeNode> – defines a template for nodes rendering within a <rich:tree> </li></ul><ul><li>Possibility for different images for each node </li></ul><ul><ul><li>specified with icon , iconCollapsed , iconExpanded , iconLeaf attributes </li></ul></ul><ul><li>type attribute – a node type </li></ul><ul><ul><li>Defines the rendering and behaviour </li></ul></ul><ul><ul><li>Its value is matched with the value of nodeFace </li></ul></ul><ul><li>rendered attribute – if false the component is not rendered </li></ul>
    43. 43. Trees – Example <ul><li><rich:tree value=&quot;#{}&quot; var=&quot;item&quot; </li></ul><ul><li>nodeFace=&quot;#{item.type}&quot; switchType=&quot;client&quot;> </li></ul><ul><li><rich:treeNode type=&quot;artist&quot; </li></ul><ul><li>iconLeaf=&quot;/images/tree/singer.gif&quot; </li></ul><ul><li>icon=&quot;/images/tree/singer.gif&quot;> </li></ul><ul><li><h:outputText value=&quot;#{}&quot; /> </li></ul><ul><li></rich:treeNode> </li></ul><ul><li><rich:treeNode type=&quot;album&quot; </li></ul><ul><li>iconLeaf=&quot;/images/tree/disc.gif&quot; </li></ul><ul><li>icon=&quot;/images/tree/disc.gif&quot;> </li></ul><ul><li><h:outputText value=&quot;#{item.title}&quot; /> </li></ul><ul><li></rich:treeNode> </li></ul><ul><li><rich:treeNode type=&quot;song&quot; </li></ul><ul><li>iconLeaf=&quot;/images/tree/song.gif&quot; </li></ul><ul><li>icon=&quot;/images/tree/song.gif&quot;> </li></ul><ul><li><h:outputText value=&quot;#{item.title}&quot; /> </li></ul><ul><li></rich:treeNode> </li></ul><ul><li></rich:tree> </li></ul><ul><li>Using trees: </li></ul>
    44. 44. Tree Node – Example <ul><li>type and rendered attributes usage: </li></ul>< rich:tree value=&quot;#{}&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;#{}&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. 45. Selects
    46. 46. Selects <ul><li>Implement user select functionality </li></ul><ul><li>Components </li></ul><ul><ul><li>List shuttle </li></ul></ul><ul><ul><li>Ordering list </li></ul></ul><ul><ul><li>Pick list </li></ul></ul>
    47. 47. List Shuttle <ul><li><rich:listShuttle> </li></ul><ul><li>Move items from one list into another </li></ul><ul><ul><li>Can contain several columns </li></ul></ul><ul><ul><li>Allow multiple selection </li></ul></ul><ul><ul><li>Support reordering </li></ul></ul><ul><li>Consist of: </li></ul><ul><ul><li>Two item lists </li></ul></ul><ul><ul><li>Optional caption element </li></ul></ul><ul><ul><li>Optional ordering control set </li></ul></ul><ul><ul><li>Move controls set </li></ul></ul>
    48. 48. List Shuttle – Attributes <ul><li>sourceValue – list of items for the source list </li></ul><ul><li>targetValue – list of items for the target list </li></ul><ul><li>var – shared between both lists to define lists on the page (variable name to access values) </li></ul><ul><li>sourceRequired , targetRequired – if it is required to have items in the source or target </li></ul><ul><li>sourceSelection , targetSelection – store items selected in the lists </li></ul><ul><li>converter – converts component data to a value that will be displayed </li></ul>
    49. 49. List Shuttle – Attributes (2) <ul><li>Define caption labels </li></ul><ul><ul><li>sourceCaptionLabel </li></ul></ul><ul><ul><li>targetCaptionLabel </li></ul></ul><ul><li>Define control labels </li></ul><ul><ul><li>topControlLabel </li></ul></ul><ul><ul><li>bottomControlLabel </li></ul></ul><ul><ul><li>upControlLabel </li></ul></ul><ul><ul><li>downControlLabel </li></ul></ul><ul><li>Define size </li></ul><ul><ul><li>listsHeight </li></ul></ul><ul><ul><li>sourceListWidth </li></ul></ul><ul><ul><li>targetListWidth </li></ul></ul>
    50. 50. List Shuttle – Example <ul><li>Using list shuttle: </li></ul>... <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. 51. Ordering List <ul><li><rich:orderingList> </li></ul><ul><li>Component for ordering items in a list </li></ul><ul><ul><li>Reordering possibility </li></ul></ul><ul><ul><li>Sorting possibility </li></ul></ul><ul><li>Consist of: </li></ul><ul><ul><li>Item list </li></ul></ul><ul><ul><li>Ordering control set </li></ul></ul>
    52. 52. Ordering List – Key Attributes <ul><li>value – list that will be shown </li></ul><ul><li>var – variable name to access values </li></ul><ul><li>controlsType – control rendering </li></ul><ul><ul><li>button or none </li></ul></ul><ul><li>selection – stores the selected items </li></ul><ul><li>captionLabel – defines the caption </li></ul><ul><li>topControlLabel , bottomControlLabel , upControlLabel , downControlLabel </li></ul>
    53. 53. Ordering List – Example <ul><li>Using ordering list: </li></ul>... < 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;#{ }&quot; / ><br/> </rich:column> </rich:orderingList> ...
    54. 54. Pick List <ul><li><rich:pickList> </li></ul><ul><li>Move selected items from one list to another </li></ul><ul><li>Simplified version of list shuttle </li></ul><ul><li>Consist of: </li></ul><ul><ul><li>Two item lists </li></ul></ul><ul><ul><li>Move controls set </li></ul></ul>
    55. 55. Pick List – Key Attributes <ul><li>value – the current value of the component </li></ul><ul><li><f:selectItem(s)> – define source items </li></ul><ul><li>switchByClick – move items with one click </li></ul><ul><li>showButtonsLabel – to display labels or not </li></ul><ul><li>listsHeight , sourceListWidth , targetListWidth </li></ul><ul><ul><li>Resizing </li></ul></ul><ul><li>copyAllControlLabel , copyControlLabel , removeControlLabel , removeAllControlLabel </li></ul><ul><ul><li>Labels definition </li></ul></ul>
    56. 56. Pick List – Example <ul><li>Using pick list: </li></ul>... <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. 57. Data Iteration
    58. 58. Data Iteration <ul><li>Components iterating over collection of data </li></ul><ul><li>Render data in tabular or list form </li></ul><ul><li>Several components with different functionality </li></ul><ul><ul><li><rich:dataGrid> </li></ul></ul><ul><ul><li><rich:dataList> </li></ul></ul><ul><ul><li><rich:dataOrderedList> </li></ul></ul><ul><ul><li><rich:dataTable> </li></ul></ul><ul><ul><li><rich:extendedDataTable </li></ul></ul><ul><ul><li>… </li></ul></ul>
    59. 59. Frequently Used Attributes <ul><li>value – the current value </li></ul><ul><li>var – name of the attribute used for accessing data object </li></ul><ul><li>rows – number of rows to display </li></ul><ul><li>columns – number of columns </li></ul><ul><li>selection – stores the selected items </li></ul>
    60. 60. Example – Data List <ul><li>Using data list: </li></ul>... <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;#{ }&quot; /> </rich:dataList> ...
    61. 61. Example – Data Grid <ul><li>Using Data Grid: </li></ul>... < 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. 62. Example – Scrollable Data Table <ul><li>Using scrollable data table: </li></ul>... < 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. 63. Ajax Validators
    64. 64. Ajax Validators <ul><li>Validate user input </li></ul><ul><li>Enhanse JSF validation with Ajax support </li></ul><ul><li>Possibility to use Hibernate validators </li></ul><ul><li>Components </li></ul><ul><ul><li>Ajax validator </li></ul></ul><ul><ul><li>Bean validator </li></ul></ul><ul><ul><li>Graph validator </li></ul></ul>
    65. 65. Ajax Validator <ul><li><rich:ajaxValidator> </li></ul><ul><li>Ajax validation for JSF inputs </li></ul><ul><ul><li>Should be added as child component </li></ul></ul><ul><ul><li>Event that triggers validation should be specified </li></ul></ul><ul><li>Can use both standard or custom validation </li></ul><ul><li>Can use Hibernate Validation </li></ul><ul><li>Skips all JSF processing except validation </li></ul>
    66. 66. Ajax Validator – Example <ul><li>Using Ajax validator: </li></ul>... <h:inputText value=&quot;#{}&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. 67. Bean Validator <ul><li><rich:beanValidator> </li></ul><ul><li>Validation using Hibernate constraints: </li></ul>... <h:inputText value=&quot;#{}&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. 68. Graph Validator <ul><li><rich:graphValidator> </li></ul><ul><li>Similar to bean validator </li></ul><ul><li>Wraps multiple input components </li></ul><ul><li>Validates all of them </li></ul><ul><li>Option to bind the component to a managed bean </li></ul><ul><ul><li>Using value attribute </li></ul></ul><ul><ul><li>After the input is validated all bean properties are validated again. </li></ul></ul>
    69. 69. Graph Validator - Example <ul><li>Using graph validator: </li></ul>... <rich:graphValidator summary=&quot;Invalid values: &quot;> <h:panelGrid columns=&quot;3&quot;>    <h:outputText value=&quot;Name:&quot; />    <h:inputText value=&quot;#{}&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;#{}&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. 70. Skins and theming
    71. 71. Skins <ul><li>Lightweight extension on top of CSS </li></ul><ul><li>Change look and feel of all Rich component with a few minor changes </li></ul><ul><li>Can be applied to standard JSF and HTML tags as well </li></ul><ul><li>Many ready to use skins </li></ul><context-param> <param-name></param-name> <param-value>ruby</param-value> </context-param>
    72. 72. Skins (2) <ul><li>Modify existing or create your own </li></ul><ul><li>Change skins in runtime </li></ul><context-param> <param-name></param-name> <param-value> myCustomSkin </param-value> </context-param> <context-param> <param-name></param-name> <param-value >#{} </param-value> </context-param>
    73. 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. 74. Creating a Custom Skin <ul><li>Define a skin property file </li></ul><ul><ul><li>You can use existing skin as a base </li></ul></ul><ul><li>File name should be in the format </li></ul><ul><ul><li><skinName> </li></ul></ul><ul><li>Place it in the project's source directory </li></ul><ul><li>Set the skin parameter in web.xml </li></ul>
    75. 75. Skins Example classic wine ruby japanCherry emeraldTown
    76. 76. RichFaces Demo
    77. 77. Summary <ul><li>Introduction to RichFaces </li></ul><ul><li>Ajax Action Components </li></ul><ul><li>RichFaces UI Components </li></ul><ul><li>Skins and Theming </li></ul>
    78. 78. Questions ?
    79. 79. Exercises <ul><li>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. </li></ul>
    80. 80. References <ul><li>RichFaces 4.0 Developer Guide - </li></ul><ul><li>RichFaces 3.3 Developer Guide - </li></ul><ul><li>DZone Refcardz - JBoss RichFaces - </li></ul><ul><li>RichFaces Live Demo </li></ul>