Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Rich faces

12.166 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Bildung, Technologie
  • Als Erste(r) kommentieren

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>

×