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.
Max Katz | Exadel      Senior Systems EngineerAjax Applications with JSF 2 and       New RichFaces 4     JAX/JSF Summit, S...
ExadelMax Katz● Senior   Systems Engineer at Exadel● JSF,RichFaces, Java EE consulting, and training● Manages exadel.org –...
Exadel                                          4    Author of             Lead-author ofPractical RichFaces   Practical R...
Exadel
ExadelExadel is a global softwareengineering company.● Founded in 1998,  headquarters in San Francisco  Bay Area● 7 develo...
Exadel                               Exadel Offices                                      Ekaterinburg                     ...
ExadelOpen Source with JBoss
ExadelExadel Productsexadel.org                 gotiggr.com  ◦   Flamingo  ◦   Fiji  ◦   jsf4birt  ◦   JavaFX Plug-in for ...
ExadelExadel Services● Professional services● Rich enterprise application development● Eclipse development● Custom rich   ...
ExadelThe Plan Is Simple1) Ajax features in JSF 22) The new RichFaces 4
ExadelJavaServer Faces™ (JSF) is the standard component- based user interface (UI)    framework for the Java EE (5 & 6) pl...
Exadel JSF 2 is a major upgrade       over JSF 1.x Many features, ideas takenfrom projects such as Seam,   RichFaces, and ...
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 ...
Exadel                 Official RichFaces logoRichFaces 4 is a lightweight,open source framework for          JSF 2
ExadelRichFaces 4 – rich JSF framework   ● UI components     ◦ a4j:* tag library (core)     ◦ rich:* tag library (UI)     ...
ExadelRichFaces 4  100% built on top of JSF2, just extends functionality in            JSF 2
ExadelRichFaces 4 JavaScript is now entirelybased on the popular jQuery          library
ExadelRichFaces 4● All components are reviewed for consistency, usability● Redesigned following    semantic HTML principle...
ExadelRichFaces 4 New client-side validation based on Bean Validation         (JSR 303)
ExadelRichFaces 4  New, and easy to use CDK   (Component Development Kit), allows quickly to build yourown custom rich com...
ExadelRichFaces 4Run on: Tomcat 6/7, Resin,JBoss AS 6/7, GlassFish 3.x,             WebLogic(run on any server when JSF 2 ...
ExadelRichFaces 4 Run on: Google App Engine   (GAE), Amazon EC2,         CloudBees
ExadelRichFaces 4   JSF implementations:    Mojarra or MyFaces
ExadelRichFaces 4        Any browser
ExadelRichFaces 4  Tooling support through   JBoss Tools, IntelliJ,         NetBeans
ExadelRichFaces 4Zero-configuration, just dropRichFaces into the application
Exadel RichFaces versions       Version             JSF 1.1       JSF 1.2   JSF 2RichFaces 3.1.x              •RichFaces 3...
ExadelRichFaces history2005: started by Alexander Smirnov2005-2007: Developed by Exadel           Ajax4jsf - open source, ...
ExadelRichFaces 4   Lets look at RichFaces  features in more detail...
ExadelRichFaces 4 core – sendingan Ajax request● <a4j:ajax>● <a4j:commandButton>● <a4j:commandLink>● <a4j:jsFunction>● <a4...
ExadelRichFaces 4Its important to say it again, RichFaces only extends and       upgrades JSF 2...
Exadel      RichFaces <a4j:ajax>       ● 100% based on     standard <f:ajax>       ● Just replace f: with a4j: and get    ...
Exadel    <a4j:ajax> attributesFeature/Attribute                  Description                    JavaScript to execute bef...
Exadel<a4j:commandButton/Link> –button and link with built-in Ajaxbehavior<a4j:commandButton value="Save"   action="#{bean...
ExadelWhen using standard JSF button:<h:form>   <h:inputText>   <h:selectOneMenu>                                  Need to...
Exadel<a4j:jsFunction> – fire Ajax requestfrom any JavaScript function, HTMLevent<table>   ...   <td onmouseover="update(y...
ExadelIf you had to pick just one Ajaxcontrol, you would want<a4j:jsFunction><h:commandButton action="#{bean.change}">   <...
Exadel<a4j:poll> – periodically send anAjax request<a4j:poll interval="1000"          action="#{bean.count}"          rend...
Exadel      <a4j:push>       ● Server-side  events are pushed to         client using Comet or WebSockets.       ● Impleme...
ExadelRichFace 4 core – advancedrendering features● <a4j:outputPanel>● limitRender   attribute● render=”{bean.renderList}”
Exadel<a4j:outputPanel> – auto renderedpanel<a4j:commandButton value="Save" action="#{bean.save}"><a4j:commandButton value...
ExadelTurning off auto rendered panels<a4j:commandButton value="Save" action="#{bean.save}"><a4j:commandButton value="Edit...
Exadelrender=”#{bean.renderList}”JSF                            RichFaces1) Ajax request sent           1) Ajax request se...
ExadelRichFace 4 core – advancedexecute features● <a4j:region>● bypassUpdates   attribute
Exadel<a4j:region> – defining executeregion declaratively<h:form>   <a4j:region>      <h:inputText />      <h:inputText />...
ExadelSkippingphaseswhenvalidating1.Restore View2.Apply Request Values3.Process Validation4.Update Model5.Invoke Applicati...
ExadelJavaScript callbacks during Ajaxrequest<a4j:commandLink value="Link"   onbegin="ajaxOnBegin()"   onbeforedomupdate="...
ExadelJSF 2 queue● JSF2 has very basic queue functionality● Events   are queued and fired one at a time● Only one request ...
Exadel<a4j:queue> – “combining” eventsfrom the same component  While a request is executing  on the server, all requests  ...
Exadel<a4j:queue> – “combining” eventsfrom different components  While a request is executing  on the server, all requests...
Exadel<a4j:queue> – setting request delayallows “waiting” for requests fromsame component in order to mergeevents<a4j:queu...
Exadel<a4j:queue> – ignoring “stale”responses<a4j:queue requestDelay="2000           ingoreDupResponses="true"/><h:inputTe...
ExadelRichFace 4 core – moreadvanced features● <a4j:status>● <a4j:param>● <a4j:log>● JavaScript   interactions
Exadel      <a4j:status> – Ajax request      status<a4j:status name="ajaxStatus">  <f:facet name="start">    <h:graphicIma...
Exadel<a4j:param> - like <f:param>, butsimpler as it also assigns the value toa bean property automatically<a4j:commandBut...
ExadelAnother great feature is that<a4j:param> value can contain anyJavaScript expression or JavaScriptfunction, when noEs...
Exadel<a4j:log> – Ajax request/responseinformation, logging
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
Exadel<rich:popupPanel> can be modal andnon-modal<rich:popupPanel modal="false">  <f:facet name="header">      Edit User  ...
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
ExadelRichFaces data iteration componentssupport partial updates                    render="@column"                      ...
Exadel Deciding what rows/cell to update in run-timerender="tableId:rows(bean.rowsSet)"render="tableId:rows(bean.rowsSet):...
ExadelNew collapsible sub table component
Exadel<rich:dataTable> supports columnand row spanning
Exadel<rich:extendedDataTable> provideslazy loading, column resizing, reorderand more
ExadelMore rich data iteration● a4j:repeat● rich:extendedDataTable● rich:collapsibleSubTable● rich:list  ◦ list | ordered ...
Exadelrich:tree
ExadelDrag and drop
ExadelMany RichFaces componentsprovide client-side JavaScript API<rich:popupPanel> JavaScript APIMethod name            De...
ExadelInvoking component JavaScript APIusing #{rich:component(id)}function<input type="button"       onclick="#{rich:compo...
ExadelInvoking component JavaScript APIusing <rich:componentControl>component<h:outputLink value="#">   <h:outputText valu...
Exadel<rich:accordion id="c"> <rich:accordionItem header="New York" name="nyc">   <h:outputText value="You selected New Yo...
Exadel<input type="button" value="New York City"  onclick="#{rich:component(c)}.switchToItem(nyc)"/><input type="button" v...
ExadelRichFaces client functions         Function                        Descriptionrich:client(id)           Returns comp...
ExadelStandard Java EE security with#{rich:isUserInRole(role)} function<rich:panel header="Admin panel"   rendered="#{rich...
ExadelClient-side validation based    on Bean Validation         (JSR 303)    New in RichFaces 4
ExadelBean Validation (JSR 303)JSF 2 has support for Bean Validation(validation done on server)Bean:public class Bean {   ...
ExadelClient-Validation Based on BeanValidationValidation is performed on the client. If no clientimplementation available...
ExadelCross field validation with<rich:graphValidator>@Size(min=5,max=15)private String password1;@Size(min=5,max=15)priva...
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> - createsJavaScript hash, can be passed toanother client function.<h:commandButton value="Show popu...
ExadelUsing jQuery with <rich:jQuery><input type="button" id=" value="Update panel"/><rich:jQuery selector="#changeButton"...
ExadelUsing jQuery when page rendered tocreate zebra-like styling for table
Exadel<style>   .even-row {      background-color: #FCFFFE;   }   .odd-row {      background-color: #ECF3FE;   }</style><r...
ExadelInvoking <rich:jQuery> as a regularJavaScript function             with mouse over<h:graphicImage width="100" value=...
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● wine● blueSky● ruby● emeraldTown● deepMarine                <context-param>● plain     ...
ExadelRichFaces Skin file#ColorsheaderBackgroundColor=#900000headerGradientColor=#DF5858headerTextColor=#FFFFFFheaderWeigh...
ExadelSkins● Modify   existing or create your own  <context-param>    <param-name>org.richfaces.skin</param-name>    <para...
ExadelOverwriting Skin CSS<style>.rf-p-hdr {   color: …   font-size: …   font-weight: …   font-family: …}</style><rich:pan...
ExadelOverwriting Skin CSS<style>.rf-p-hdr {   // overwrite skin CSS properties}.specialHeader {  // define custom CSS for...
ExadelSkinning standard JSF tags andHTML tagsApply to each control:<h:button style="background-color:               #{rich...
ExadelSkinning standard JSF tags andHTML tags automaticallyApply to all standard controls (JSF and HTML):<context-param>  ...
ExadelSkinning standard JSF tags andHTML tags only when special CSSclass is applied to parent container<context-param>   <...
Exadel   Where can I try the new       RichFaces 4?http://richfaces.org/showcase
Exadel        How can we help with RichFaces● Web development with RichFaces                                     Training ...
ExadelRichFacesRich, flexible, robust, andproven enterprise-levelextension to JSF 2
ExadelThere is just one more        thing...
ExadelTry it at: http://gotiggr.com
ExadelTry it at: http://gotiggr.com
Exadelmax@exadel.com@maxkatzmkblog.exadel.comgotiggr.com
Upcoming SlideShare
Loading in …5
×

Ajax Applications with JSF 2 and New RichFaces 4 - JAX/JSF Summit

5,807 views

Published on

Ajax Applications with JSF 2 and New RichFaces 4 at JAX/JSF Summit, San Jose, CA June 21, 2011

  • Be the first to comment

Ajax Applications with JSF 2 and New RichFaces 4 - JAX/JSF Summit

  1. 1. Max Katz | Exadel Senior Systems EngineerAjax Applications with JSF 2 and New RichFaces 4 JAX/JSF Summit, San Jose, CA
  2. 2. ExadelMax Katz● Senior Systems Engineer at Exadel● JSF,RichFaces, Java EE consulting, and training● Manages exadel.org – Exadels open source projects and community● Community manager for gotiggr.com prototypes and mobile apps builder
  3. 3. Exadel 4 Author of Lead-author ofPractical RichFaces Practical RichFaces, 2/e (Apress) (Apress, Summer 2011)
  4. 4. Exadel
  5. 5. ExadelExadel is a global softwareengineering company.● Founded in 1998, headquarters in San Francisco Bay Area● 7 development offices in Europe● 350+ employees
  6. 6. Exadel Exadel Offices Ekaterinburg Moscow Minsk Homyel 5 KharkovMunich Donetsk
  7. 7. ExadelOpen Source with JBoss
  8. 8. ExadelExadel Productsexadel.org gotiggr.com ◦ Flamingo ◦ Fiji ◦ jsf4birt ◦ JavaFX Plug-in for Eclipse
  9. 9. ExadelExadel Services● Professional services● Rich enterprise application development● Eclipse development● Custom rich component development● Mobile development● Training
  10. 10. ExadelThe Plan Is Simple1) Ajax features in JSF 22) The new RichFaces 4
  11. 11. ExadelJavaServer Faces™ (JSF) is the standard component- based user interface (UI) framework for the Java EE (5 & 6) platform JSF 1.2 Java EE 5 JSF 2 Java EE 6
  12. 12. Exadel JSF 2 is a major upgrade over JSF 1.x Many features, ideas takenfrom projects such as Seam, RichFaces, and others
  13. 13. 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
  14. 14. ExadelJSF 2 <f:ajax>● Very basic Ajax functionality● Greatly inspired by RichFaces 3 <a4j:support> tag● Ajax in JSF in 3 easy steps: 1. Sending an Ajax request 2.Partial view processing 3.Partial view rendering
  15. 15. 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>
  16. 16. 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>
  17. 17. 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
  18. 18. Exadel Thats good, but where doyou get rich components and more?A rich component framework is still(?) needed to build real-world Ajax applications.
  19. 19. Exadel Official RichFaces logoRichFaces 4 is a lightweight,open source framework for JSF 2
  20. 20. ExadelRichFaces 4 – rich JSF framework ● UI components ◦ a4j:* tag library (core) ◦ rich:* tag library (UI) ◦ Components JavaScript API ● Skins ● Client-side validation (Bean Validation based) ● CDK – Component Development Kit
  21. 21. ExadelRichFaces 4 100% built on top of JSF2, just extends functionality in JSF 2
  22. 22. ExadelRichFaces 4 JavaScript is now entirelybased on the popular jQuery library
  23. 23. 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
  24. 24. ExadelRichFaces 4 New client-side validation based on Bean Validation (JSR 303)
  25. 25. ExadelRichFaces 4 New, and easy to use CDK (Component Development Kit), allows quickly to build yourown custom rich components
  26. 26. ExadelRichFaces 4Run on: Tomcat 6/7, Resin,JBoss AS 6/7, GlassFish 3.x, WebLogic(run on any server when JSF 2 application can be deployed)
  27. 27. ExadelRichFaces 4 Run on: Google App Engine (GAE), Amazon EC2, CloudBees
  28. 28. ExadelRichFaces 4 JSF implementations: Mojarra or MyFaces
  29. 29. ExadelRichFaces 4 Any browser
  30. 30. ExadelRichFaces 4 Tooling support through JBoss Tools, IntelliJ, NetBeans
  31. 31. ExadelRichFaces 4Zero-configuration, just dropRichFaces into the application
  32. 32. 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
  33. 33. 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
  34. 34. ExadelRichFaces 4 Lets look at RichFaces features in more detail...
  35. 35. ExadelRichFaces 4 core – sendingan Ajax request● <a4j:ajax>● <a4j:commandButton>● <a4j:commandLink>● <a4j:jsFunction>● <a4j:poll>● <a4j:push>
  36. 36. ExadelRichFaces 4Its important to say it again, RichFaces only extends and upgrades JSF 2...
  37. 37. 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>
  38. 38. Exadel <a4j:ajax> attributesFeature/Attribute Description JavaScript to execute before Ajaxonbegin request JavaScript to execute after responseonbeforedomupdate comes back but before DOM updateoncomplete JavaScript to execute after DOM update Allows to skip JSF phases whenbypassUpdates validatinglimitRender Turns off all auto-rendered panelsstatus Status to display during Ajax requestAjax queue Advanced RichFaces client queue
  39. 39. Exadel<a4j:commandButton/Link> –button and link with built-in Ajaxbehavior<a4j:commandButton value="Save" action="#{bean.action}" render="output" /><a4j:commandLink value="Save" action="#{bean.action}" render="output" />
  40. 40. ExadelWhen using standard JSF button:<h:form> <h:inputText> <h:selectOneMenu> Need to set <h:commandButton> execute=”@form” <f:ajax execute="@form"/> (or execute=”id1 id2”) </h:commandButton><h:form>When using RichFaces button:<h:form> RichFaces default <h:inputText> <h:selectOneMenu> value for <a4j:commandButton/> button/link<h:form> execute=”@form”
  41. 41. Exadel<a4j:jsFunction> – fire Ajax requestfrom any JavaScript function, HTMLevent<table> ... <td onmouseover="update(yellow)"/> ...</table><h:form> <a4j:jsFunction name="update" action="#{bean.change}" render="..."> <a4j:param value="param1" assignTo="#{bean.color}"/> </a4j:jsFunction></h:form>
  42. 42. ExadelIf you had to pick just one Ajaxcontrol, you would want<a4j:jsFunction><h:commandButton action="#{bean.change}"> <a4j:ajax render="id"/></h:commandButton>Is the same as: <h:commandButton onclick="sendAjax();"/> <a4j:jsFunction name="sendAjax" action="#{bean.change}" render="id"/>
  43. 43. Exadel<a4j:poll> – periodically send anAjax request<a4j:poll interval="1000" action="#{bean.count}" render="output" enabled="#{bean.pollEnabled}" /><h:panelGrid id="output">...</h:panelGrid>
  44. 44. 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)" />
  45. 45. ExadelRichFace 4 core – advancedrendering features● <a4j:outputPanel>● limitRender attribute● render=”{bean.renderList}”
  46. 46. Exadel<a4j:outputPanel> – auto renderedpanel<a4j:commandButton value="Save" action="#{bean.save}"><a4j:commandButton value="Edit" action="#{bean.edit}"><a4j:outputPanel ajaxRendered="true"> <h:panelGrid> ... </h:panelGrid></a4j:outputPanel><a4j:outputPanel ajaxRendered="true"> <rich:dataTable> ... </rich:dataTable></a4j:outputPanel>
  47. 47. ExadelTurning off auto rendered panels<a4j:commandButton value="Save" action="#{bean.save}"><a4j:commandButton value="Edit" action="#{bean.edit}" render="edit" limitRender="true"><a4j:outputPanel ajaxRendered="true"> <h:panelGrid> ... </h:panelGrid></a4j:outputPanel><h:panelGrid id="edit"> <rich:dataTable> ... </rich:dataTable></h:panelGrid>
  48. 48. Exadelrender=”#{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
  49. 49. ExadelRichFace 4 core – advancedexecute features● <a4j:region>● bypassUpdates attribute
  50. 50. Exadel<a4j:region> – defining executeregion declaratively<h:form> <a4j:region> <h:inputText /> <h:inputText /> <h:selectOneMenu /> <a4j:commandButton /> <a4j:region></h:form>
  51. 51. 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"/>
  52. 52. ExadelJavaScript callbacks during Ajaxrequest<a4j:commandLink value="Link" onbegin="ajaxOnBegin()" onbeforedomupdate="ajaxOnBeforeDomUpdate()" oncomplete="ajaxOnComplete()"></a4j:commandLink>
  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. Exadel<a4j:queue> – “combining” eventsfrom the same component While a request is executing on the server, all requests from button A or button B will be combined (merged) if the last event in the queue is of the same type.<a4j:queue />...<a4j:commandButton id="buttonA" value="Button A"/><a4j:commandButton id="buttonB" value="Button B"/>
  55. 55. Exadel<a4j:queue> – “combining” eventsfrom different components While a request is executing on the server, all requests from button A or button B will be combined (merged).<a4j:queue /><a4j:commandButton id="buttonA" value="Button A"> <a4j:attachdQueue requestGroupingId="ajaxGroup"/></a4j:commandButton><a4j:commandButton id="buttonB" value="Button B"> <a4j:attachdQueue requestGroupingId="ajaxGroup"/></a4j:commandButton>
  56. 56. Exadel<a4j:queue> – setting request delayallows “waiting” for requests fromsame component in order to mergeevents<a4j:queue requestDelay="1000"/><a4j:commandButton id="buttonA" value="Button A"> <a4j:attachdQueue requestDelay="2000"/></a4j:commandButton><a4j:commandButton id="buttonB" value="Button B"/>
  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>
  58. 58. ExadelRichFace 4 core – moreadvanced features● <a4j:status>● <a4j:param>● <a4j:log>● JavaScript interactions
  59. 59. Exadel <a4j:status> – Ajax request status<a4j:status name="ajaxStatus"> <f:facet name="start"> <h:graphicImage value="ajaxStatus.jpg"/> </f:facet></a4j:status><h:form> <a4j:commandButton status="ajaxStatus"/></h:form>
  60. 60. Exadel<a4j:param> - like <f:param>, butsimpler as it also assigns the value toa bean property automatically<a4j:commandButton value="Save"> <a4j:param value="1009" assignTo="#{bean.product}"/></a4j:commandButton>public class Bean { private String product; public void setProduct (String product) {...}}
  61. 61. ExadelAnother great feature is that<a4j:param> value can contain anyJavaScript expression or JavaScriptfunction, when noEscape="true"<a4j:param name="width" value="(jQuery(window).width()/2)" assignTo="#{bean.screenWidth}" noEscape="true" />
  62. 62. Exadel<a4j:log> – Ajax request/responseinformation, logging
  63. 63. ExadelRichFaces UI components● Output, panels● Input● Menu● Data iteration● Tree● Drag and drop● Client side validation● Miscellaneous
  64. 64. Exadelrich:tabrich:accordionrich:progressBar
  65. 65. ExadelMore rich output, panels● rich:panel● rich:togglePanel● rich:popupPanel● rich:collapsiblePanel● rich:toolTip
  66. 66. Exadel<rich:popupPanel> can be modal andnon-modal<rich:popupPanel modal="false"> <f:facet name="header"> Edit User </f:facet> ... ...</rich:popupPanel>
  67. 67. Exadelrich:calendarrich:inplaceInputrich:inputNumberSliderrich:autocomplete
  68. 68. ExadelMore rich input● rich:inputNumberSpinner● rich:inplaceSelect● rich:select● rich:fileUpload
  69. 69. Exadelrich:panelMenurich:toolBarrich:dropDownMenu
  70. 70. Exadelrich:dataTablerich:dataTable withrich:collapsibleSubTablerich:dataScroller
  71. 71. ExadelRichFaces data iteration componentssupport partial updates render="@column" render="@header" render="@body" render="@footer" render="cellId"To render from outside the table:render="tableId@header"render="tableId@body"render="tableId@footer"
  72. 72. Exadel Deciding what rows/cell to update in run-timerender="tableId:rows(bean.rowsSet)"render="tableId:rows(bean.rowsSet):cellId"
  73. 73. ExadelNew collapsible sub table component
  74. 74. Exadel<rich:dataTable> supports columnand row spanning
  75. 75. Exadel<rich:extendedDataTable> provideslazy loading, column resizing, reorderand more
  76. 76. ExadelMore rich data iteration● a4j:repeat● rich:extendedDataTable● rich:collapsibleSubTable● rich:list ◦ list | ordered | definition● rich:dataGrid● rich:column ◦ Column and row spanning ◦ Filtering, sorting
  77. 77. Exadelrich:tree
  78. 78. ExadelDrag and drop
  79. 79. ExadelMany RichFaces componentsprovide client-side JavaScript API<rich:popupPanel> JavaScript APIMethod name Description Return the top co-ordinate for the position ofgetTop() the pop-up panel. Return the left co-ordinate for the position ofgetLeft() the pop-up panel. Move the pop-up panel to the co-ordinatesmoveTo(top,left) specified with the top and left parameters. Resize the pop-up panel to the size specifiedresize(width,height) with the width and height parameters.show() Show the pop-up panel.hide() Hide the pop-up panel.
  80. 80. ExadelInvoking component JavaScript APIusing #{rich:component(id)}function<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>
  81. 81. ExadelInvoking component JavaScript APIusing <rich:componentControl>component<h:outputLink value="#"> <h:outputText value="Open" /> <rich:componentControl event="click" target="popup" operation="show" /></h:outputLink><rich:popupPanel header="RichFaces" id="popup"> <h:outputLink value="#"> <h:outputText value="Close" /> <rich:componentControl event="click" target="popup" operation="hide" /> </h:outputLink></rich:popupPanel>
  82. 82. Exadel<rich:accordion id="c"> <rich:accordionItem header="New York" name="nyc"> <h:outputText value="You selected New York"/> </rich:accordionItem> <rich:accordionItem header="San Francisco" name="sf"> <h:outputText value="You selected San Francisco"/> </rich:accordionItem> ...</rich:accordion>
  83. 83. Exadel<input type="button" value="New York City" onclick="#{rich:component(c)}.switchToItem(nyc)"/><input type="button" value="San Francisco" onclick="#{rich:component(c)}.switchToItem(sf)"/><input type="button" value="Los Angeles" onclick="#{rich:component(c)}.switchToItem(la)"/><input type="button" value="First" onclick="#{rich:component(c)}.switchToItem(@first)"/><input type="button" value="Next" onclick="#{rich:component(c)}.switchToItem(@next)"/><input type="button" value="Previous" onclick="#{rich:component(c)}.switchToItem(@prev)"/><input type="button" value="Last" onclick="#{rich:component(c)}.switchToItem(@last)"/>
  84. 84. ExadelRichFaces 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
  85. 85. ExadelStandard Java EE security with#{rich:isUserInRole(role)} function<rich:panel header="Admin panel" rendered="#{rich:isUserInRole(admin)}"> Very sensitive information</rich:panel> <rich:panel header="User panel"> General information</rich:panel>● Calls facesContext.getExternalContext.getUserInRole(role)● Whats good is that security roles can be defined anywhere
  86. 86. ExadelClient-side validation based on Bean Validation (JSR 303) New in RichFaces 4
  87. 87. ExadelBean Validation (JSR 303)JSF 2 has support for Bean Validation(validation done on server)Bean:public class Bean { @Pattern(regexp="...") private String email;}JSF page:<h:inputText id="email" value="#{bean.email}"> <a4j:ajax event="blur"/></h:inputText><rich:message for="email"/>
  88. 88. ExadelClient-Validation Based on BeanValidationValidation is performed on the client. If no clientimplementation available, validation automatically fallsback to standard, server validationBean:public class Bean { @Pattern(regexp="...") private String email;}JSF page:<h:inputText id="email" value="#{bean.email}"> <rich:validator /></h:inputText><rich:message for="email"/>
  89. 89. ExadelCross field validation with<rich:graphValidator>@Size(min=5,max=15)private String password1;@Size(min=5,max=15)private String password2;@AssertTrue(message="Passwords dont match")public boolean checkPassword() { return password1.equals(password1);}<rich:graphValidator value="#{bean}" id="crossField"> <h:inputText value="#{bean.password1}"/> <h:inputText value="#{bean.password2}"/> <rich:message for="email" for="crossField"/></rich:graphValidator>
  90. 90. ExadelRich miscellaneous● <rich:componentControl>● <rich:hashParam>● <rich:jQuery>
  91. 91. 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>
  92. 92. Exadel<rich:hashParam> - createsJavaScript hash, can be passed toanother client function.<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
  93. 93. ExadelUsing jQuery with <rich:jQuery><input type="button" id=" value="Update panel"/><rich:jQuery selector="#changeButton" event="click" query="$(#nycInfo .rf-p-hdr).text(New York City); $(.rf-p-b).css(color, blue);" />
  94. 94. ExadelUsing jQuery when page rendered tocreate zebra-like styling for table
  95. 95. Exadel<style> .even-row { background-color: #FCFFFE; } .odd-row { background-color: #ECF3FE; }</style><rich:dataTable id="gamesTable"> // columns</rich:dataTable><rich:jQuery selector="#gamesTable tr:odd" query="addClass(odd-row)" /><rich:jQuery selector="#gamesTable tr:even" query="addClass(even-row)" />
  96. 96. ExadelInvoking <rich:jQuery> as a regularJavaScript function with mouse over<h:graphicImage width="100" value="/images/venice.png" onmouseover="larger(this, {})" onmouseout="normal(this, {})" /><rich:jQuery name="larger" query="animate({width:241px})" /><rich:jQuery name="normal" query="animate({width:100px})"/>
  97. 97. ExadelSkins
  98. 98. 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
  99. 99. ExadelReady-to-use skins● classic● wine● blueSky● ruby● emeraldTown● deepMarine <context-param>● plain <param-name>org.richfaces.skin</param-name> <param-value>ruby</param-value>● japanCherry </context-param>
  100. 100. ExadelRichFaces Skin file#ColorsheaderBackgroundColor=#900000headerGradientColor=#DF5858headerTextColor=#FFFFFFheaderWeightFont=boldgeneralBackgroundColor=#f1f1f1generalTextColor=#000000generalSizeFont=11pxgeneralFamilyFont=Arial, Verdana, sans-serifcontrolTextColor=#000000controlBackgroundColor=#ffffffadditionalBackgroundColor=#F9E4E4
  101. 101. 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>
  102. 102. ExadelOverwriting Skin CSS<style>.rf-p-hdr { color: … font-size: … font-weight: … font-family: …}</style><rich:panel>...</rich:panel>
  103. 103. ExadelOverwriting Skin CSS<style>.rf-p-hdr { // overwrite skin CSS properties}.specialHeader { // define custom CSS for specific panel}</style><rich:panel id="panel1">...<rich:panel><rich:panel id="panel2" headerClass="specialHeader">...<rich:panel>
  104. 104. ExadelSkinning standard JSF tags andHTML tagsApply to each control:<h:button style="background-color: #{richSkin.tableBackgroundColor}"/>
  105. 105. ExadelSkinning standard JSF tags andHTML tags automaticallyApply to all standard controls (JSF and HTML):<context-param> <param-name> org.richfaces.enableControlSkinning </param-name> <param-value>true</param-value></context-param>
  106. 106. ExadelSkinning standard JSF tags andHTML tags only when special CSSclass is applied to parent container<context-param> <param-name> org.richfaces.enableControlSkinningClasses </param-name> <param-value>true</param-value></context-param><div class="rfs-ctn"> <h:outputText /> <h:inputText /> <h:commandButton /></div>
  107. 107. Exadel Where can I try the new RichFaces 4?http://richfaces.org/showcase
  108. 108. 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
  109. 109. ExadelRichFacesRich, flexible, robust, andproven enterprise-levelextension to JSF 2
  110. 110. ExadelThere is just one more thing...
  111. 111. ExadelTry it at: http://gotiggr.com
  112. 112. ExadelTry it at: http://gotiggr.com
  113. 113. Exadelmax@exadel.com@maxkatzmkblog.exadel.comgotiggr.com

×