Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Rich faces

12 215 vues

Publié le

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

Publié dans : Formation, Technologie
  • Soyez le premier à commenter

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: http://download.jboss.org/jbosstools/updates/stable/helios/ </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;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. 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 www.jboss.org/jbossrichfaces/ </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;http://richfaces.org/a4j&quot; xmlns:rich=&quot;http://richfaces.org/rich&quot; <%@ taglib uri=&quot;http://richfaces.org/a4j&quot; prefix=&quot;a4j&quot;%> <%@ taglib uri=&quot;http://richfaces.org/rich&quot; prefix=&quot;rich&quot;%>
  15. 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;#{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. 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;#{clockBean.now}&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;#{library.data}&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;#{item.name}&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;#{library.data}&quot; var=&quot;item&quot; nodeFace=&quot;#{item.type}&quot;> <rich:treeNode type=&quot;album&quot; iconLeaf=&quot;/images/tree/album.gif&quot; icon=&quot;/images/tree/album.gif&quot; rendered=&quot;#{item.exist}&quot; > <h:outputText value=&quot;#{item.name}&quot; /> </rich:treeNode> <rich:treeNode type=&quot;album&quot; iconLeaf=&quot;/images/tree/album_absen.gif&quot; icon=&quot;/images/tree/album_absen.gif&quot;   rendered=&quot;#{not item.exist}&quot; > <h:outputText value=&quot;#{item.title}&quot; /> </rich:treeNode> <rich:treeNode type=&quot;song&quot; iconLeaf=&quot;/images/tree/song.gif&quot; ... </rich:tree>
  45. 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;#{ lib.album.artist.name }&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;#{ car.vin }&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;#{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. 67. Bean Validator <ul><li><rich:beanValidator> </li></ul><ul><li>Validation using Hibernate constraints: </li></ul>... <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. 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;#{validationBean.name}&quot; id=&quot;name&quot;>      <f:validateLength minimum=&quot;2&quot; />     </h:inputText>     <rich:message for=&quot;name&quot; />     <h:outputText value=&quot;Email:&quot; />     <h:inputText value=&quot;#{validationBean.email}&quot; id=&quot;email&quot;/>     <rich:message for=&quot;email&quot; />     <h:outputText value=&quot;Age:&quot; />     <h:inputText value=&quot;#{validationBean.age}&quot; id=&quot;age&quot; />     <rich:message for=&quot;age&quot; />   </h:panelGrid> </rich:graphValidator> ...
  70. 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>org.richfaces.skin</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>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. 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>.skin.properties </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 http://livedemo.exadel.com/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 - http://www.jboss.org/richfaces/docs/4-0_guide </li></ul><ul><li>RichFaces 3.3 Developer Guide - http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/ </li></ul><ul><li>DZone Refcardz - JBoss RichFaces - http://refcardz.com/ </li></ul><ul><li>RichFaces Live Demo http://livedemo.exadel.com/richfaces-demo </li></ul>

×