Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Exadel#{Ajax Applications with JSF 2and New RichFaces 4}TheServerSide Java SymposiumMarch 18th, 2011Max KatzExadel
ExadelAbout Me● Senior   Systems Engineer at Exadel  ◦ JSF, RichFaces, Java EE  ◦ exadel.org – open source projects and   ...
Exadel                                          4                              New!    Author of             Lead-author o...
ExadelNew!
Exadelexadel.org – open sourceprojects and community● Exadel Flamingo● Exadel Fiji● Exadel jsf4birt● Exadel JavaFX Plug-in...
Exadel          TiggrCreating interactive Web and mobile HTML prototypes    [http://gotiggr.com]
Exadel
ExadelWeb Preview [desktop][gotiggr.com/preview/6669]Web Preview [mobile][gotiggr.com/preview/5673]
Exadel@maxkatzmkblog.exadel.com
ExadelExadel● Products   and services company● Founded in1998, headquarters in San Francisco Bay Area (Concord)● 350+   em...
ExadelExadel Locations – Europe
ExadelProducts● Open   Source with JBoss   ◦ RichFaces   ◦ JBoss Tools/JBoss Developer Studio● exadel.org  ◦ Flamingo  ◦ F...
ExadelServices● Rich enterprise application development● Eclipse development● Custom rich   component development● Mobile ...
ExadelThe Plan● Ajax features in   JSF 2● The   new RichFaces 4
ExadelJavaServer Faces™ (JSF) is the standard component- based user interface (UI)    framework for the Java EE (5 & 6) pl...
ExadelJSF 2● JSF   2 is a major upgrade over JSF 1.x● Many features, ideas taken from projects such as Seam and RichFaces,...
ExadelJSF 2 new features● Facelets             ● New   scopes● Composite              ◦ Flash, View, components           ...
ExadelJSF 2 <f:ajax>● Very   basic Ajax functionality● Greatly        inspired by RichFaces 3 <a4j:support> tag● Ajax in  ...
Exadel<h:form>   <h:input value="#{bean.word}"/>   <h:commandButton>      <f:ajax event="click" 1              execute="@f...
Exadel<h:form>   <h:input value="#{bean.word}"/>   <h:selectOneMenu value="#{bean.selected}">      <f:selectItems value="#...
Exadel             Attribute   ValueImportant                         Event on which to fire the<f:ajax>     event        ...
Exadel Thats good, but where doyou get rich components and            more?A rich component framework  is still(?) needed ...
ExadelRichFaces 4 – rich JSF framework   ● JSF   2 based   ● Components     ◦ a4j:* tag library (core)     ◦ rich:* tag li...
Exadel RichFaces versions       Version             JSF 1.1       JSF 1.2   JSF 2RichFaces 3.1.x              •RichFaces 3...
ExadelDeploy on any server which     supports JSF 2      Any browser
ExadelRichFaces history2005: started by Alexander Smirnov2005-2007: Developed by Exadel           Ajax4jsf - open source, ...
ExadelJust tell me when RichFaces 4   is going to be released?
Exadel Good, now tell me whatsreally new and improved in        RichFaces 4?
ExadelRichFaces 4 JavaScript in RichFaces is now entirely based on the  popular jQuery library.
ExadelRichFaces 4● All components are reviewed for consistency, usability● Redesigned following    semantic HTML principle...
ExadelRichFaces 4● Newclient-side validation based on Bean Validation (JSR 303)
ExadelRichFaces 4● Newand easy to use CDK (Component Development Kit)● Quickly build your   own custom rich components
ExadelCloud deployment●   Google App Engine (GAE)● Amazon    EC2● Special Maven-based plug-in    available
Exadel      RichFaces <a4j:ajax>       ● 100% based on     standard <f:ajax>       ● Just replace f: with a4j: and get    ...
Exadel    <a4j:ajax> attributes         Attribute                 Descriptiononbegin              JavaScript to execute be...
ExadelThats not all, there are more    RichFaces goodies...
ExadelRichFaces 4 core – firing an       Ajax request● a4j:ajax● a4j:commandButton● a4j:commandLink● a4j:jsFunction● a4j:p...
Exadel      <a4j:commandButton> –      Ajax button/* standard button with f:ajax */<h:commandButton value="Save" action="#...
Exadel      <a4j:jsFunction> – fire Ajax      request from any JavaScript      function<table>   ...   <td onmouseover="up...
Exadel      <a4j:poll> – periodically      send an Ajax request<a4j:poll interval="1000"          action="#{bean.count}"  ...
Exadel      <a4j:push>       ● Server-side  events are pushed to         client using Comet or WebSockets.       ● Impleme...
ExadelRichFace 4 core – advancedfeatures and rendering● a4j:outputPanel● limitRender   attribute● render=”{bean.renderList...
Exadel      <a4j:outputPanel> – auto      rendered panel<h:selectOneMenu value="#{bean.fruit}">   <a4j:ajax listener="#{be...
Exadel      Advanced rendering options:      limitRender<a4j:commandButton render="output"/><a4j:commandButton render="out...
Exadel       render=”#{bean.renderList}”JSF                            RichFaces1) Ajax request sent           1) Ajax req...
Exadel      <a4j:param>       ● Similar to <f:param>   but simpler as it         also assigns the value to a bean         ...
ExadelRichFace 4 core – advancedprocessing● a4j:region● bypassUpdates   attribute
Exadel<a4j:region> – declarativelydefine execute region<h:form>                                    Execute options:       ...
ExadelSkippingphaseswhenvalidating1.Restore View2.Apply Request Values3.Process Validation4.Update Model5.Invoke Applicati...
ExadelRichFace 4 core – otheradvanced features● a4j:status● a4j:log● a4j:queue● JavaScript   interactions
Exadel<a4j:status> – Ajax requeststatus<a4j:status name="ajaxStatus">  <f:facet name="start">    <h:graphicImage value="aj...
Exadel<a4j:log> – Ajax requestinformation● Levels:  ◦ debug, info, warn, error
ExadelJSF 2 queue● JSF2 has very basic queue functionality● Events   are queued and fired one at a time● Only one request ...
ExadelRichFaces queue upgrades● Delay firing   of a request● Combine requests      from one or more controls● Cancel DOM  ...
Exadel      RichFaces <a4j:queue><a4j:queue requestDelay="2000"/>...                                    Delay request     ...
Exadel      a4j:queue – “combining”      events<a4j:queue requestDelay="2000"/>...<a4j:commandButton>   <a4j:attachQueue r...
Exadel      a4j:queue – ignoring “stale”      responses<a4j:queue requestDelay="2000           ingoreDupResponses="true"/>...
Exadel      JavaScript interactions<h:commandLink value="Link"   <f:ajax onevent="ajaxEvent();"></h:commandLink>          ...
ExadelRichFaces UI components● Output, panels● Input● Menu● Data iteration● Tree● Drag   and drop● Client   side validatio...
Exadelrich:tabrich:accordionrich:progressBar
ExadelMore rich output, panels● rich:panel● rich:togglePanel● rich:popupPanel● rich:collapsiblePanel● rich:toolTip
Exadelrich:calendarrich:inplaceInputrich:inputNumberSliderrich:autocomplete
ExadelMore rich input● rich:inputNumberSpinner● rich:inplaceSelect● rich:select● rich:fileUpload
Exadelrich:panelMenurich:toolBarrich:dropDownMenu
Exadelrich:dataTablerich:dataTable withrich:collapsibleSubTablerich:dataScroller
Exadel             Partial table update                         render="@column"                                          ...
Exadel              Partial table updaterender="tableId:#{bean.rowsSet}"render="tableId:#{bean.rowsSet}:cellId"
ExadelMore rich data iteration● a4j:repeat● rich:extendedDataTable● rich:list  ◦ list | ordered | definition● rich:dataGri...
Exadelrich:tree
ExadelDrag and drop
ExadelClient-side validation based    on Bean Validation         (JSR 303)    New in RichFaces 4
Exadel      Bean Validation (JSR 303)       ● JSF 2 has support for Bean Validation         (server-side)public class Bean...
Exadel    RichFaces client validation        <rich:validator>public class Bean {  @Email  private String email;}<h:inputTe...
Exadel               RichFaces client validation                   <rich:graphValidator><rich:graphValidator value="#{bean...
Exadel         RichFaces client functions         Function                        Descriptionrich:client(id)           Ret...
Exadel      rich:component(id) function       ● Allows   to call JS API on a component<input type="button"       onclick="...
ExadelRich miscellaneous● rich:componentControl● rich:hashParam● rich:jQuery
Exadel      <rich:componentControl>       ● Allows  to call JS API on a component         in declarative fashion<h:outputL...
Exadel      <rich:hashParam>       ● Group   client side parameters into a         hash map to be passed to component     ...
Exadel      <rich:jQuery><input type="button" id="changeButton"                      value="Change title" /><rich:jQuery s...
ExadelSkins
ExadelSkins● Lightweight   extension on top of CSS● Change       look and feel of all rich component with a few minor chan...
ExadelReady-to-use skins● classic       <context-param>                  <param-name>org.richfaces.skin</param-name>● wine...
Exadel      Skin file (just a property file)#ColorsheaderBackgroundColor=#900000headerGradientColor=#DF5858headerTextColor...
ExadelSkins● Modify   existing or create your own  <context-param>    <param-name>org.richfaces.skin</param-name>    <para...
Exadel      Overwriting skins<style> .rf-p-hr {    // your custom style, applied to all panels on    // on page  } .panelH...
Exadel       Skinning standard JSF tags       and HTML tagsApply to each control:<h:button style="background-color:       ...
Exadel      Skinning standard JSF tags      and HTML tags<context-param>   <param-name>      org.richfaces.enableControlSk...
Exadel      Where can I try the new          RichFaces 4?http://richfaces-showcase.appspot.com
Exadel        How can we help with RichFaces● Web development with RichFaces                                     Training ...
ExadelThats it for RichFaces, there is one more thing I want to           show you.
ExadelWeb Preview [desktop][gotiggr.com/preview/6669]Web Preview [mobile][gotiggr.com/preview/5673]
Exadel        max@exadel.comThank   @maxkatz you!        mkblog.exadel.com        gotiggr.com
Upcoming SlideShare
Loading in …5
×

Ajax Applications with JSF 2 and New RichFaces 4 - TSSJS

11,037 views

Published on

RichFaces 4 presentation at TheServerSide Java Symposium in Las Vegas, March 2011

Published in: Technology
  • You can ask here for a help. They helped me a lot an i`m highly satisfied with quality of work done. I can promise you 100% un-plagiarized text and good experts there. Use with pleasure! ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi there! I just wanted to share a list of sites that helped me a lot during my studies: .................................................................................................................................... www.EssayWrite.best - Write an essay .................................................................................................................................... www.LitReview.xyz - Summary of books .................................................................................................................................... www.Coursework.best - Online coursework .................................................................................................................................... www.Dissertations.me - proquest dissertations .................................................................................................................................... www.ReMovie.club - Movies reviews .................................................................................................................................... www.WebSlides.vip - Best powerpoint presentations .................................................................................................................................... www.WritePaper.info - Write a research paper .................................................................................................................................... www.EddyHelp.com - Homework help online .................................................................................................................................... www.MyResumeHelp.net - Professional resume writing service .................................................................................................................................. www.HelpWriting.net - Help with writing any papers ......................................................................................................................................... Save so as not to lose
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Ajax Applications with JSF 2 and New RichFaces 4 - TSSJS

  1. 1. Exadel#{Ajax Applications with JSF 2and New RichFaces 4}TheServerSide Java SymposiumMarch 18th, 2011Max KatzExadel
  2. 2. ExadelAbout Me● Senior Systems Engineer at Exadel ◦ JSF, RichFaces, Java EE ◦ exadel.org – open source projects and community ◦ Tiggr (http://gotiggr.com) – interactive Web and mobile HTML prototypes
  3. 3. Exadel 4 New! Author of Lead-author ofPractical RichFaces Practical RichFaces, 2/e (Apress) (Apress, June 2011)
  4. 4. ExadelNew!
  5. 5. Exadelexadel.org – open sourceprojects and community● Exadel Flamingo● Exadel Fiji● Exadel jsf4birt● Exadel JavaFX Plug-in for Eclipse
  6. 6. Exadel TiggrCreating interactive Web and mobile HTML prototypes [http://gotiggr.com]
  7. 7. Exadel
  8. 8. ExadelWeb Preview [desktop][gotiggr.com/preview/6669]Web Preview [mobile][gotiggr.com/preview/5673]
  9. 9. Exadel@maxkatzmkblog.exadel.com
  10. 10. ExadelExadel● Products and services company● Founded in1998, headquarters in San Francisco Bay Area (Concord)● 350+ employees
  11. 11. ExadelExadel Locations – Europe
  12. 12. ExadelProducts● Open Source with JBoss ◦ RichFaces ◦ JBoss Tools/JBoss Developer Studio● exadel.org ◦ Flamingo ◦ Fiji (JSF – JavaFX/Flex integration) ◦ jsf4birt (JSF – BIRT/Actuate integration) ◦ JavaFX Plug-in for Eclipse● Tiggr – interactive Web and mobile HTML prototypes
  13. 13. ExadelServices● Rich enterprise application development● Eclipse development● Custom rich component development● Mobile development● Training● Most projects are done in Eastern Europe
  14. 14. ExadelThe Plan● Ajax features in JSF 2● The new RichFaces 4
  15. 15. ExadelJavaServer Faces™ (JSF) is the standard component- based user interface (UI) framework for the Java EE (5 & 6) platform JSF 1.2 Java EE 6 JSF 2 Java EE 6
  16. 16. ExadelJSF 2● JSF 2 is a major upgrade over JSF 1.x● Many features, ideas taken from projects such as Seam and RichFaces, and others
  17. 17. ExadelJSF 2 new features● Facelets ● New scopes● Composite ◦ Flash, View, components custom● Implicit ● Configuration navigation via annotations● GET ● Bean Validation support support ◦ h:link, h:button ● Basic Ajax● Resource loading
  18. 18. ExadelJSF 2 <f:ajax>● Very basic Ajax functionality● Greatly inspired by RichFaces 3 <a4j:support> tag● Ajax in JSF in 3 easy steps: 1. Firing an Ajax request 2.Partial view processing 3.Partial view rendering
  19. 19. Exadel<h:form> <h:input value="#{bean.word}"/> <h:commandButton> <f:ajax event="click" 1 execute="@form" 2 listener="#{bean.ajaxListener}" render="out1 out2"/> 3 </h:commandButton> <h:input value="#{bean.text}" id="out1"/> <h:input value="#{bean.phrase}" id="out2"/></h:form>
  20. 20. Exadel<h:form> <h:input value="#{bean.word}"/> <h:selectOneMenu value="#{bean.selected}"> <f:selectItems value="#{bean.items}"/> <f:ajax event="change" 1 execute="@form" 2 listener="#{bean.ajaxListener}" render="@form"/> 3 </h:commandButton> <h:input value="#{bean.text}" id="out1"/> <h:input value="#{bean.phrase}" id="out2"/></h:form>
  21. 21. Exadel Attribute ValueImportant Event on which to fire the<f:ajax> event Ajax requestattributes @all @this (default) @form execute @none Ids EL @all @this @form render @none (default) Ids EL
  22. 22. Exadel Thats good, but where doyou get rich components and more?A rich component framework is still(?) needed to build real-world Ajax applications.
  23. 23. ExadelRichFaces 4 – rich JSF framework ● JSF 2 based ● Components ◦ a4j:* tag library (core) ◦ rich:* tag library (UI) ● Skins ● Client-side validation (Bean Validation/JSR 303 based) ● CDK – Component Development Kit
  24. 24. Exadel RichFaces versions Version JSF 1.1 JSF 1.2 JSF 2RichFaces 3.1.x •RichFaces 3.3.3* • •RichFaces 4 •* Note: RichFaces 3.3.3 has basic JSF 2 support
  25. 25. ExadelDeploy on any server which supports JSF 2 Any browser
  26. 26. ExadelRichFaces history2005: started by Alexander Smirnov2005-2007: Developed by Exadel Ajax4jsf - open source, free RichFaces - commercial2007: JBoss takes over Exadel team continues to develop the framework, project is known as RichFaces
  27. 27. ExadelJust tell me when RichFaces 4 is going to be released?
  28. 28. Exadel Good, now tell me whatsreally new and improved in RichFaces 4?
  29. 29. ExadelRichFaces 4 JavaScript in RichFaces is now entirely based on the popular jQuery library.
  30. 30. ExadelRichFaces 4● All components are reviewed for consistency, usability● Redesigned following semantic HTML principles● Server-side and client-side performance optimization● Strict code clean-up and review
  31. 31. ExadelRichFaces 4● Newclient-side validation based on Bean Validation (JSR 303)
  32. 32. ExadelRichFaces 4● Newand easy to use CDK (Component Development Kit)● Quickly build your own custom rich components
  33. 33. ExadelCloud deployment● Google App Engine (GAE)● Amazon EC2● Special Maven-based plug-in available
  34. 34. Exadel RichFaces <a4j:ajax> ● 100% based on standard <f:ajax> ● Just replace f: with a4j: and get exactly the same functionality ● But, you get extra features...<h:commandButton> <f:ajax execute="@form" render="output"/></h:commandButton><h:commandButton> <a4j:ajax execute="@form" render="output"/></h:commandButton>
  35. 35. Exadel <a4j:ajax> attributes Attribute Descriptiononbegin JavaScript to execute before Ajax request JavaScript to execute after responseonbeforedomupdate comes back but before DOM updateoncomplete JavaScript to execute after DOM update Skips Update Model and InvokebypassUpdates Application phases, useful for form validation Skips all a4j:outputPanellimitRender ajaxRender=”true” areas. Only renders what is set in current renderstatus Status to display during Ajax request
  36. 36. ExadelThats not all, there are more RichFaces goodies...
  37. 37. ExadelRichFaces 4 core – firing an Ajax request● a4j:ajax● a4j:commandButton● a4j:commandLink● a4j:jsFunction● a4j:poll● a4j:push
  38. 38. Exadel <a4j:commandButton> – Ajax button/* standard button with f:ajax */<h:commandButton value="Save" action="#{bean.action}"> <f:ajax execute="@form" render="output"/></h:commandButton>/* RichFaces button */<a4j:commandButton value="Save" execute="@form" render="output" action="#{bean.action}" />
  39. 39. Exadel <a4j:jsFunction> – fire Ajax request from any JavaScript function<table> ... <td onmouseover="update(yellow)"/> ...</table><h:form> <a4j:jsFunction name="update" action="#{bean.change}" reRender="panel"> <a4j:param value="param1" assignTo="#{bean.color}"/> </a4j:jsFunction><h:form>
  40. 40. Exadel <a4j:poll> – periodically send an Ajax request<a4j:poll interval="1000" action="#{bean.count}" render="output" enabled="#{bean.pollEnabled}" /><h:panelGrid id="output">...</h:panelGrid>
  41. 41. Exadel <a4j:push> ● Server-side events are pushed to client using Comet or WebSockets. ● Implemented using Atmosphere ● Providesexcellent integration with EE containers, and advanced messaging services<a4j:push address="topic@chat" ondataavailable="alert(event.rf.data)" />
  42. 42. ExadelRichFace 4 core – advancedfeatures and rendering● a4j:outputPanel● limitRender attribute● render=”{bean.renderList}”● a4j:param
  43. 43. Exadel <a4j:outputPanel> – auto rendered panel<h:selectOneMenu value="#{bean.fruit}"> <a4j:ajax listener="#{bean.change}"/></<h:selectOneMenu><a4j:outputPanel ajaxRendered="true"> <h:panelGrid> ... </h:panelGrid> Rendered on every <h:panelGrid> Ajax request ... </h:panelGrid></a4j:outputPanel>
  44. 44. Exadel Advanced rendering options: limitRender<a4j:commandButton render="output"/><a4j:commandButton render="output" limitRender="true"/><h:panelGrid id="output"> Turns off all auto rendered panels,... only renders what is set in current</h:panelGrid> render<a4j:outputPanel ajaxRendered="true">...</a4j:outputPanel>
  45. 45. Exadel render=”#{bean.renderList}”JSF RichFaces1) Ajax request sent 1) Ajax request sent2) Component ids to be 2) Component ids to rendered resolved be rendered3) Component ids are resolved rendered into the page 3) Component ids4) 2nd Ajax request is sent. are rendered In this request the components (resolved in step 2 are sent with request) will be rendered
  46. 46. Exadel <a4j:param> ● Similar to <f:param> but simpler as it also assigns the value to a bean property automatically<a4j:commandButton value="Save"> <a4j:param name="product" value="1009"/></a4j:commandButton>public class Bean { private String product; public void setProduct (String product) {...} public String getProduct () {...}}
  47. 47. ExadelRichFace 4 core – advancedprocessing● a4j:region● bypassUpdates attribute
  48. 48. Exadel<a4j:region> – declarativelydefine execute region<h:form> Execute options: @all● <a4j:region> @this (default) ● <h:inputText /> @form ● <h:inputText /> @none ● Ids● <a4j:commandButton execute="@region"/> EL ● <a4j:region> @region ●</h:form><h:form> <a4j:region> <h:inputText /> <h:inputText /> <a4j:commandButton /> <a4j:region></h:form>
  49. 49. ExadelSkippingphaseswhenvalidating1.Restore View2.Apply Request Values3.Process Validation4.Update Model5.Invoke Application6.Render Response <h:inputText id="name" value="#{bean.name}"/> <a4j:ajax event="blur" bypassUpdates="true"/> </h:inputText> <rich:message for="name"/>
  50. 50. ExadelRichFace 4 core – otheradvanced features● a4j:status● a4j:log● a4j:queue● JavaScript interactions
  51. 51. Exadel<a4j:status> – Ajax requeststatus<a4j:status name="ajaxStatus"> <f:facet name="start"> <h:graphicImage value="ajaxStatus.jpg"/> </f:facet></a4j:status><h:form> <inputText /> <inputText /> <a4j:commandButton status="ajaxStatus"/></h:form>
  52. 52. Exadel<a4j:log> – Ajax requestinformation● Levels: ◦ debug, info, warn, error
  53. 53. ExadelJSF 2 queue● JSF2 has very basic queue functionality● Events are queued and fired one at a time● Only one request is processed on the server at a time
  54. 54. ExadelRichFaces queue upgrades● Delay firing of a request● Combine requests from one or more controls● Cancel DOM updates if “similar” request was fired● Define queue as: ◦ Global (all views have queue) ◦ View-based ◦ Form-based ◦ Named (used by particular components only)
  55. 55. Exadel RichFaces <a4j:queue><a4j:queue requestDelay="2000"/>... Delay request by 2 seconds<a4j:commandButton value="Button1"/><a4j:commandButton value="Button2"/><a4j:queue requestDelay="2000"/>... Overwrite default<a4j:commandButton> delay request by 1 second <a4j:attachQueue requestDelay="1000"/></a4j:commmandButton><a4j:commandButton />
  56. 56. Exadel a4j:queue – “combining” events<a4j:queue requestDelay="2000"/>...<a4j:commandButton> <a4j:attachQueue requestGroupingId="mainGroup"/></a4j:commmandButton><a4j:commandButton> <a4j:attachQueue requestGroupingId="mainGroup"/></a4j:commmandButton>
  57. 57. Exadel a4j:queue – ignoring “stale” responses<a4j:queue requestDelay="2000 ingoreDupResponses="true"/><h:inputText value="#{bean.state}"> <a4j:ajax event="keyup" listener="#{bean.load}" render="states"/></h:inputText><rich:dataTable id="states"> <rich:column/></rich:dataTable>
  58. 58. Exadel JavaScript interactions<h:commandLink value="Link" <f:ajax onevent="ajaxEvent();"></h:commandLink> Called three times: 1) begin 2) success 3) complete<a4j:commandLink value="Link" onbegin="ajaxOnBegin()" onbeforedomupdate="ajaxOnBeforeDomUpdate()" oncomplete="ajaxOnComplete()"></a4j:commandLink> Events are separated for easier development
  59. 59. ExadelRichFaces UI components● Output, panels● Input● Menu● Data iteration● Tree● Drag and drop● Client side validation● Miscellaneous
  60. 60. Exadelrich:tabrich:accordionrich:progressBar
  61. 61. ExadelMore rich output, panels● rich:panel● rich:togglePanel● rich:popupPanel● rich:collapsiblePanel● rich:toolTip
  62. 62. Exadelrich:calendarrich:inplaceInputrich:inputNumberSliderrich:autocomplete
  63. 63. ExadelMore rich input● rich:inputNumberSpinner● rich:inplaceSelect● rich:select● rich:fileUpload
  64. 64. Exadelrich:panelMenurich:toolBarrich:dropDownMenu
  65. 65. Exadelrich:dataTablerich:dataTable withrich:collapsibleSubTablerich:dataScroller
  66. 66. Exadel Partial table update render="@column" render="@header"render="@row" render="@body" render="@footer" render="cellId" To render from outside the table: render="tableId@header" render="tableId@body" render="tableId@footer"
  67. 67. Exadel Partial table updaterender="tableId:#{bean.rowsSet}"render="tableId:#{bean.rowsSet}:cellId"
  68. 68. ExadelMore rich data iteration● a4j:repeat● rich:extendedDataTable● rich:list ◦ list | ordered | definition● rich:dataGrid● rich:column ◦ Column and row spanning ◦ Filtering, sorting
  69. 69. Exadelrich:tree
  70. 70. ExadelDrag and drop
  71. 71. ExadelClient-side validation based on Bean Validation (JSR 303) New in RichFaces 4
  72. 72. Exadel Bean Validation (JSR 303) ● JSF 2 has support for Bean Validation (server-side)public class Bean { @Email private String email;}<h:inputText id="email" value="#{bean.email}"> <a4j:ajax event="blur"/></h:inputText><rich:message for="email"/>
  73. 73. Exadel RichFaces client validation <rich:validator>public class Bean { @Email private String email;}<h:inputText id="email" value="#{bean.email}"> <rich:validator event="keyup"/></h:inputText><rich:message for="email"/>
  74. 74. Exadel RichFaces client validation <rich:graphValidator><rich:graphValidator value="#{bean}" id="gv"> ... <h:inputText value="#{bean.password1}"/> <h:inputText value="#{bean.password2}"/> <rich:message for="email" for="gv"/></rich:graphValidator>@Size(min=5,max=15,message="...")private String password1;@Size(min=5,max=15,message="...")private String password2;@AssertTrue(message="Password dont match")public boolean isPasswordsEquals() { return password1.equals(password1);}
  75. 75. Exadel RichFaces client functions Function Descriptionrich:client(id) Returns component client idrich:element(id) Returns DOM element Returns RichFaces client componentrich:component(id) instance to call JS API methodrich:isUserInRole(role) Returns if the user has specified role Returns component instance for givenrich:findComponent(id) short id
  76. 76. Exadel rich:component(id) function ● Allows to call JS API on a component<input type="button" onclick="#{rich:component(popup)}.show();" value="Open" /><rich:popupPanel id="popup"> <h:outputLink value="#" onclick="#{rich:component(popup)}.hide(); return false;"> <h:outputText value="Close"/> </h:outputLink></rich:popupPanel>
  77. 77. ExadelRich miscellaneous● rich:componentControl● rich:hashParam● rich:jQuery
  78. 78. Exadel <rich:componentControl> ● Allows to call JS API on a component in declarative fashion<h:outputLink id="openLink" value="#"> <h:outputText value="Open" /> <rich:componentControl event="click" operation="show" target="popup" /></h:outputLink><rich:popupPanel id="popup">...</rich:popupPanel>
  79. 79. Exadel <rich:hashParam> ● Group client side parameters into a hash map to be passed to component client API<h:commandButton value="Show popup"> <rich:componentControl target="pp" operation="show"> <rich:hashParam> <f:param name="width" value="500" /> <f:param name="height" value="300" /> <f:param name="minWidth" value="300" /> <f:param name="minHeight" value="150" /> </rich:hashParam> </rich:componentControl></h:commandButton
  80. 80. Exadel <rich:jQuery><input type="button" id="changeButton" value="Change title" /><rich:jQuery selector="#changeButton" query="click(function(){ $(#panel #panel_header).text(Capital of Russia);})"/><rich:panel header="Moscow" id="panel"> Moscow is the capital, the most populous ...</rich:panel>
  81. 81. ExadelSkins
  82. 82. ExadelSkins● Lightweight extension on top of CSS● Change look and feel of all rich component with a few minor changes● Can be applied to standard JSF and HTML tags as well
  83. 83. ExadelReady-to-use skins● classic <context-param> <param-name>org.richfaces.skin</param-name>● wine <param-value>ruby</param-value> </context-param>● blueSky● ruby● emeraldTown● deepMarine● plain● japanCherry
  84. 84. Exadel Skin file (just a property file)#ColorsheaderBackgroundColor=#900000headerGradientColor=#DF5858headerTextColor=#FFFFFFheaderWeightFont=boldgeneralBackgroundColor=#f1f1f1generalTextColor=#000000generalSizeFont=11pxgeneralFamilyFont=Arial, Verdana, sans-serifcontrolTextColor=#000000controlBackgroundColor=#ffffffadditionalBackgroundColor=#F9E4E4
  85. 85. ExadelSkins● Modify existing or create your own <context-param> <param-name>org.richfaces.skin</param-name> <param-value>myCoolSkin</param-value> </context-param>● Change skins in runtime <context-param> <param-name>org.richfaces.skin</param-name> <param-value>#{bean.skin}</param-value> </context-param>
  86. 86. Exadel Overwriting skins<style> .rf-p-hr { // your custom style, applied to all panels on // on page } .panelHeader { // custom header style }</style><rich:panel id="panel1">...</rich:panel id="panel2"><rich:panel headerClass="panelHeader">...</rich:panel>
  87. 87. Exadel Skinning standard JSF tags and HTML tagsApply to each control:<h:button style="background-color: #{richSkin.tableBackgroundColor}"/>Apply to all standard controls (JSF and HTML):<context-param> <param-name> org.richfaces.enableControlSkinning </param-name> <param-value>true</param-value></context-param>
  88. 88. Exadel Skinning standard JSF tags and HTML tags<context-param> <param-name> org.richfaces.enableControlSkinningClasses </param-name> <param-value>true</param-value></context-param><div class="rfs-ctn"> <h:panelGrid columns="1"> Can be applied to <h:outputText /> <h:panelGrid>, <rich:panel>, <div> <h:inputText /> Any standard controls inside the <h:commandButton /> container will be skinned using </h:panelGrid> standard controls skinning classes.</div>
  89. 89. Exadel Where can I try the new RichFaces 4?http://richfaces-showcase.appspot.com
  90. 90. Exadel How can we help with RichFaces● Web development with RichFaces Training Days● Version 3 to 4 migration JSF 1.2, 2 1-2● Performance tune-up RichFaces 3, 4 1-2 JSF and RichFaces 2-3● Custom component RichFaces 3 to 4 1-2 development● On-site training
  91. 91. ExadelThats it for RichFaces, there is one more thing I want to show you.
  92. 92. ExadelWeb Preview [desktop][gotiggr.com/preview/6669]Web Preview [mobile][gotiggr.com/preview/5673]
  93. 93. Exadel max@exadel.comThank @maxkatz you! mkblog.exadel.com gotiggr.com

×