What You Need for BuildingCool Enterprise Applicationswith JSFMax KatzExadelOct. 4, 2011
>max@exadel.comMax Katz                     >@maxkatz                             >mkblog.exadel.comSenior Systems Enginee...
Exadel is a global software        engineering companyFounded in 1998, headquarters in    San Francisco Bay Area7 Developm...
The Plan Is Simple1) Ajax features in JSF 22) The new RichFaces 4 – orwhat you need to build coolenterprise applications w...
JavaServer Faces™ (JSF) is the standard component- based user interface (UI)    framework for the Java EE (5 & 6) platform...
JSF 2 is a major upgrade       over JSF 1.x Many features, ideas takenfrom projects such as Seam,   RichFaces, and others
JSF 2 new features● Facelets             ● New   scopes● Composite              ◦ Flash, View, components                c...
JSF 2 <f:ajax>● Very   basic Ajax functionality● Greatly        inspired by RichFaces 3 <a4j:support> tag● Ajax in   JSF i...
<h:form> <h:form>   <h:input value="#{bean.word}"/>    <h:input value="#{bean.word}"/>   <h:commandButton>    <h:commandBu...
<h:form> <h:form>   <h:input value="#{bean.word}"/>    <h:input value="#{bean.word}"/>   <h:selectOneMenu value="#{bean.se...
Attribute   ValueImportant                         Event on which to fire the<f:ajax>     event                         Aj...
Thats good, but thats all you get.Where do you get rich components           and more? A rich component framework isstill(...
RichFaces 4 is a lightweight,open source framework for          JSF 2
RichFaces 4 – rich JSF frameworkUI components a4j:* tag library (core) rich:* tag library (UI)Components JavaScript APISki...
100% built on top of JSF2,just extends functionality in           JSF 2
JavaScript is now entirelybased on the popular jQuery          library
RichFaces 4 is a lot faster, consistent,and optimized  All components are reviewed for consistency,  usability  Redesigned...
New client-side validationbased on Bean Validation        (JSR 303)Quickly and easily validate   input on the client
New, and easy to use CDK   (Component Development Kit), allows quickly to build yourown custom rich components
Pick your server:Tomcat 6/7, Resin, JBoss AS 6/7,   GlassFish 3.x, WebLogic[any server where JSF 2 application can be depl...
Deploy and run in the cloud:Google App Engine AmazonEC2, CloudBees, OpenShift
Pick JSF implementations        you like:   Mojarra or MyFaces
Run in any browser
Pick your favorite tooling:  JBoss Tools, IntelliJ,        NetBeans
Easy to start. Zero-configuration,  just drop RichFaces into the           application
RichFaces versions       Version             JSF 1.1       JSF 1.2   JSF 2RichFaces 3.1.x              •RichFaces 3.3.3*  ...
RichFaces history2005: started by Alexander Smirnov2005-2007: Developed by Exadel           Ajax4jsf - open source, free  ...
Lets see what coolcomponents, and features you get with RichFaces...
RichFaces <a4j:ajax>       ● 100% based on     standard <f:ajax>       ● Just replace f: with a4j: and get         exactly...
<a4j:ajax> attributesFeature/Attribute                  Description                    JavaScript to execute before Ajaxon...
Components to send Ajaxrequest● <a4j:ajax>● <a4j:commandButton>● <a4j:commandLink>● <a4j:jsFunction>● <a4j:poll>● <a4j:push>
<a4j:commandButton/Link> –button and link with built-in Ajaxbehavior<a4j:commandButton value="Save" <a4j:commandButton val...
When using standard JSF button:<h:form> <h:form>   <h:inputText>    <h:inputText>   <h:selectOneMenu>                     ...
<a4j:jsFunction> – fire Ajax requestfrom any JavaScript function, HTMLevent<table> <table>   ...    ...   <td onmouseover=...
If you had to pick just one Ajaxcontrol, you would want<a4j:jsFunction><h:commandButton action="#{bean.change}"> <h:comman...
<a4j:poll> – periodically send anAjax request<a4j:poll interval="1000" <a4j:poll interval="1000"          action="#{bean.c...
<a4j:push>       ● Server-side  events are pushed to         client using Comet or WebSockets.       ● Implemented    usin...
Advanced rendering features● <a4j:outputPanel>● limitRender   attribute● render=”{bean.renderList}”
<a4j:outputPanel> – auto renderedpanel<a4j:commandButton value="Save" action="#{bean.save}"> <a4j:commandButton value="Sav...
Turning off auto rendered panels<a4j:commandButton value="Save" action="#{bean.save}"> <a4j:commandButton value="Save" act...
render=”#{bean.renderList}”JSF                            RichFaces1) Ajax request sent           1) Ajax request sent2) C...
Advanced execute features● <a4j:region>● bypassUpdates   attribute
<a4j:region> – defining executeregion declaratively<h:form> <h:form>   <a4j:region>    <a4j:region>      <h:inputText />  ...
Skippingphaseswhenvalidating1.Restore View2.Apply Request Values3.Process Validation4.Update Model5.Invoke Application6.Re...
Even more advanced featuresand tags● JavaScript   callbacks● Queue● <a4j:status>● <a4j:param>● <a4j:log>
Easily use JavaScript callbacksduring Ajax request<a4j:commandLink value="Link" <a4j:commandLink value="Link"   onbegin="a...
JSF 2 queue● JSF2 has very basic queue functionality● Events   are queued and fired one at a time● Only one request is pro...
<a4j:queue> – “combining” eventsfrom the same component  While a request is executing  on the server, all requests  from b...
<a4j:queue> – “combining” eventsfrom different components  While a request is executing  on the server, all requests  from...
<a4j:queue> – setting request delayallows “waiting” for requests fromsame component in order to mergeevents<a4j:queue requ...
<a4j:queue> – ignoring “stale”responses<a4j:queue requestDelay="2000 <a4j:queue requestDelay="2000           ingoreDupResp...
<a4j:status> – Ajax request      status<a4j:status name="ajaxStatus"> <a4j:status name="ajaxStatus">  <f:facet name="start...
<a4j:param> - like <f:param>, butsimpler as it also assigns the value toa bean property automatically<a4j:commandButton va...
Another great feature is that<a4j:param> value can contain anyJavaScript expression or JavaScriptfunction, when noEscape="...
<a4j:log> – Ajax request/responseinformation, logging
RichFaces UI components● Output, panels● Input● Menu● Data iteration● Tree● Drag   and drop● Client   side validation● Mis...
rich:tabrich:accordionrich:progressBar
More rich output, panels● rich:panel● rich:togglePanel● rich:popupPanel● rich:collapsiblePanel● rich:toolTip
<rich:popupPanel> can be modal andnon-modal<rich:popupPanel modal="false">  <f:facet name="header">      Edit User  </f:fa...
rich:calendarrich:inplaceInputrich:inputNumberSliderrich:autocomplete
More rich input● rich:inputNumberSpinner● rich:inplaceSelect● rich:select● rich:fileUpload
rich:panelMenurich:toolBarrich:dropDownMenu
rich:dataTablerich:dataTable withrich:collapsibleSubTablerich:dataScroller
RichFaces data iteration componentssupport partial updates                    render="@column"                            ...
Deciding what rows/cell to update in run-timerender="tableId:rows(bean.rowsSet)"render="tableId:rows(bean.rowsSet):cellId"
New collapsible sub table component
<rich:dataTable> supports columnand row spanning
<rich:extendedDataTable> provideslazy loading, column resizing, reorderand more
More rich data iteration● a4j:repeat● rich:extendedDataTable● rich:collapsibleSubTable● rich:list  ◦ list | ordered | defi...
rich:tree
Drag and drop
Many RichFaces componentsprovide client-side JavaScript API<rich:popupPanel> JavaScript APIMethod name            Descript...
Invoking component JavaScript APIusing #{rich:component(id)}function<input type="button" <input type="button"       onclic...
Invoking component JavaScript APIusing <rich:componentControl>component<h:outputLink value="#"> <h:outputLink value="#">  ...
<rich:accordion id="c"> <rich:accordion id="c"> <rich:accordionItem header="New York" name="nyc">  <rich:accordionItem hea...
<input type="button" value="New York City" <input type="button" value="New York City"  onclick="#{rich:component(c)}.switc...
RichFaces client functions         Function                        Descriptionrich:client(id)           Returns component ...
Standard Java EE security with#{rich:isUserInRole(role)} function<rich:panel header="Admin panel" <rich:panel header="Admi...
Client-side validation based    on Bean Validation         (JSR 303)    New in RichFaces 4
Bean Validation (JSR 303)JSF 2 has support for Bean Validation(validation done on server)Bean:public class Bean { public c...
Client-Validation Based on BeanValidationValidation is performed on the client. If no clientimplementation available, vali...
Object validation with<rich:graphValidator>@Size(min=5,max=15) @Size(min=5,max=15)private String password1; private String...
Rich miscellaneous● <rich:componentControl>● <rich:hashParam>● <rich:jQuery>
<rich:componentControl>       ● Allows  to call JS API on a component         in declarative fashion<h:outputLink id="open...
<rich:hashParam> - createsJavaScript hash, can be passed toanother client function.<h:commandButton value="Show popup"> <h...
Using jQuery with <rich:jQuery><input type="button" id=" value="Update panel"/> <input type="button" id=" value="Update pa...
Using jQuery when page rendered tocreate zebra-like styling for table
<style> <style>   .even-row {    .even-row {      background-color: #FCFFFE;       background-color: #FCFFFE;   }}   .odd-...
Invoking <rich:jQuery> as a regularJavaScript function             with mouse over<h:graphicImage width="100" value="/imag...
Skins
Skins● Lightweight   extension on top of CSS● Change       look and feel of all rich component with a few minor changes● C...
Ready-to-use skins● classic● wine● blueSky● ruby● emeraldTown● deepMarine                <context-param>● plain          <...
RichFaces Skin file#Colors #ColorsheaderBackgroundColor=#900000 headerBackgroundColor=#900000headerGradientColor=#DF5858 h...
Skins● Modify   existing or create your own  <context-param>   <context-param>    <param-name>org.richfaces.skin</param-na...
Overwriting Skin CSS<style> <style>.rf-p-hdr { .rf-p-hdr {   color: …    color: …   font-size: …    font-size: …   font-we...
Overwriting Skin CSS<style> <style>.rf-p-hdr { .rf-p-hdr {    // overwrite skin CSS properties     // overwrite skin CSS p...
Skinning standard JSF tags andHTML tagsApply to each control:<h:button style="background-color: <h:button style="backgroun...
Skinning standard JSF tags andHTML tags automaticallyApply to all standard controls (JSF and HTML):<context-param> <contex...
Skinning standard JSF tags andHTML tags only when special CSSclass is applied to parent container<context-param> <context-...
Where can I try the new       RichFaces 4?http://richfaces.org/showcase
RichFaces 4.1 (Late 2011)Mobile supportNew components: Pick list Ordering list Rich text editor
How can we help with RichFaces● Web development with RichFaces                                     Training      Days● Ver...
RichFacesRich, flexible, robust, andproven enterprise-levelframework to JSF 2
Tiggr is a Web-based mobile apps builder.Super fast, and easy to build mobile Web and                 native appsBuild you...
Export or build the app as mobile Web or generate native app (for Android, iOS)
Thank you!How to get in touch with me:>max@exadel.com>@maxkatz>mkblog.exadel.comBuild your mobile app in thecloud: http://...
Upcoming SlideShare
Loading in...5
×

What You Need To Build Cool Enterprise Applications With JSF

12,854

Published on

RichFaces presentation at JavaOne 2011 conference in San Francsico

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,854
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
130
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

What You Need To Build Cool Enterprise Applications With JSF

  1. 1. What You Need for BuildingCool Enterprise Applicationswith JSFMax KatzExadelOct. 4, 2011
  2. 2. >max@exadel.comMax Katz >@maxkatz >mkblog.exadel.comSenior Systems EngineerJSF, RichFaces, Java EE consulting,and trainingDeveloper Relations for Tiggr MobileApps Builder (http://gotiggr.com)
  3. 3. Exadel is a global software engineering companyFounded in 1998, headquarters in San Francisco Bay Area7 Development offices in Europe[Munich, Moscow, Ekaterinburg, Minsk, Homeyl, Kharkov, Donetsk] 400+ employees
  4. 4. The Plan Is Simple1) Ajax features in JSF 22) The new RichFaces 4 – orwhat you need to build coolenterprise applications withJSF
  5. 5. JavaServer 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
  6. 6. JSF 2 is a major upgrade over JSF 1.x Many features, ideas takenfrom projects such as Seam, RichFaces, and others
  7. 7. JSF 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
  8. 8. JSF 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
  9. 9. <h:form> <h:form> <h:input value="#{bean.word}"/> <h:input value="#{bean.word}"/> <h:commandButton> <h:commandButton> <f:ajax event="click" 1 <f:ajax event="click" execute="@form" 2 execute="@form" listener="#{bean.ajaxListener}" listener="#{bean.ajaxListener}" render="out1 out2"/> 3 render="out1 out2"/> </h:commandButton> </h:commandButton></h:form> </h:form>
  10. 10. <h:form> <h:form> <h:input value="#{bean.word}"/> <h:input value="#{bean.word}"/> <h:selectOneMenu value="#{bean.selected}"> <h:selectOneMenu value="#{bean.selected}"> <f:selectItems value="#{bean.items}"/> <f:selectItems value="#{bean.items}"/> <f:ajax event="change" 1 <f:ajax event="change" execute="@form" execute="@form" 2 listener="#{bean.ajaxListener}" listener="#{bean.ajaxListener}" render="@form"/> 3 render="@form"/> </h:commandButton> </h:commandButton></h:form> </h:form>
  11. 11. 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
  12. 12. Thats good, but thats all you get.Where do you get rich components and more? A rich component framework isstill(?) needed to build real-world Ajax applications.
  13. 13. RichFaces 4 is a lightweight,open source framework for JSF 2
  14. 14. RichFaces 4 – rich JSF frameworkUI components a4j:* tag library (core) rich:* tag library (UI)Components JavaScript APISkinsClient-side validation (Bean Validationbased)CDK – Component Development Kit
  15. 15. 100% built on top of JSF2,just extends functionality in JSF 2
  16. 16. JavaScript is now entirelybased on the popular jQuery library
  17. 17. RichFaces 4 is a lot faster, consistent,and optimized 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
  18. 18. New client-side validationbased on Bean Validation (JSR 303)Quickly and easily validate input on the client
  19. 19. New, and easy to use CDK (Component Development Kit), allows quickly to build yourown custom rich components
  20. 20. Pick your server:Tomcat 6/7, Resin, JBoss AS 6/7, GlassFish 3.x, WebLogic[any server where JSF 2 application can be deployed]
  21. 21. Deploy and run in the cloud:Google App Engine AmazonEC2, CloudBees, OpenShift
  22. 22. Pick JSF implementations you like: Mojarra or MyFaces
  23. 23. Run in any browser
  24. 24. Pick your favorite tooling: JBoss Tools, IntelliJ, NetBeans
  25. 25. Easy to start. Zero-configuration, just drop RichFaces into the application
  26. 26. 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
  27. 27. RichFaces 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
  28. 28. Lets see what coolcomponents, and features you get with RichFaces...
  29. 29. 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> <h:commandButton> <f:ajax execute="@form" render="output"/> <f:ajax execute="@form" render="output"/></h:commandButton> </h:commandButton><h:commandButton> <h:commandButton> <a4j:ajax execute="@form" render="output"/> <a4j:ajax execute="@form" render="output"/></h:commandButton> </h:commandButton>
  30. 30. <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
  31. 31. Components to send Ajaxrequest● <a4j:ajax>● <a4j:commandButton>● <a4j:commandLink>● <a4j:jsFunction>● <a4j:poll>● <a4j:push>
  32. 32. <a4j:commandButton/Link> –button and link with built-in Ajaxbehavior<a4j:commandButton value="Save" <a4j:commandButton value="Save" action="#{bean.action}" action="#{bean.action}" render="output" /> render="output" /><a4j:commandLink value="Save" <a4j:commandLink value="Save" action="#{bean.action}" action="#{bean.action}" render="output" /> render="output" />
  33. 33. When using standard JSF button:<h:form> <h:form> <h:inputText> <h:inputText> <h:selectOneMenu> Need to set <h:selectOneMenu> <h:commandButton> <h:commandButton> execute=”@form” <f:ajax execute="@form"/> <f:ajax execute="@form"/> (or execute=”id1 id2”) </h:commandButton> </h:commandButton><h:form> <h:form>When using RichFaces button:<h:form> <h:form> RichFaces default <h:inputText> <h:inputText> <h:selectOneMenu> value for <h:selectOneMenu> <a4j:commandButton/> <a4j:commandButton/> button/link<h:form> <h:form> execute=”@form”
  34. 34. <a4j:jsFunction> – fire Ajax requestfrom any JavaScript function, HTMLevent<table> <table> ... ... <td onmouseover="update(yellow)"/> <td onmouseover="update(yellow)"/> ... ...</table> </table><h:form> <h:form> <a4j:jsFunction name="update" <a4j:jsFunction name="update" action="#{bean.change}" render="..."> action="#{bean.change}" render="..."> <a4j:param value="param1" assignTo="#{bean.color}"/> <a4j:param value="param1" assignTo="#{bean.color}"/> </a4j:jsFunction> </a4j:jsFunction></h:form> </h:form>
  35. 35. If you had to pick just one Ajaxcontrol, you would want<a4j:jsFunction><h:commandButton action="#{bean.change}"> <h:commandButton action="#{bean.change}"> <a4j:ajax render="id"/> <a4j:ajax render="id"/></h:commandButton> </h:commandButton>Is the same as: <h:commandButton onclick="sendAjax();"/> <h:commandButton onclick="sendAjax();"/> <a4j:jsFunction name="sendAjax" <a4j:jsFunction name="sendAjax" action="#{bean.change}" render="id"/> action="#{bean.change}" render="id"/>
  36. 36. <a4j:poll> – periodically send anAjax request<a4j:poll interval="1000" <a4j:poll interval="1000" action="#{bean.count}" action="#{bean.count}" render="output" render="output" enabled="#{bean.pollEnabled}" /> enabled="#{bean.pollEnabled}" /><h:panelGrid id="output"> <h:panelGrid id="output">... ...</h:panelGrid> </h:panelGrid>
  37. 37. <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" <a4j:push address="topic@chat" ondataavailable="alert(event.rf.data)" /> ondataavailable="alert(event.rf.data)" />
  38. 38. Advanced rendering features● <a4j:outputPanel>● limitRender attribute● render=”{bean.renderList}”
  39. 39. <a4j:outputPanel> – auto renderedpanel<a4j:commandButton value="Save" action="#{bean.save}"> <a4j:commandButton value="Save" action="#{bean.save}"><a4j:commandButton value="Edit" action="#{bean.edit}"> <a4j:commandButton value="Edit" action="#{bean.edit}"><a4j:outputPanel ajaxRendered="true"> <a4j:outputPanel ajaxRendered="true"> <h:panelGrid> <h:panelGrid> ... ... </h:panelGrid> </h:panelGrid></a4j:outputPanel> </a4j:outputPanel><a4j:outputPanel ajaxRendered="true"> <a4j:outputPanel ajaxRendered="true"> <rich:dataTable> <rich:dataTable> ... ... </rich:dataTable> </rich:dataTable></a4j:outputPanel> </a4j:outputPanel>
  40. 40. Turning off auto rendered panels<a4j:commandButton value="Save" action="#{bean.save}"> <a4j:commandButton value="Save" action="#{bean.save}"><a4j:commandButton value="Edit" action="#{bean.edit}" <a4j:commandButton value="Edit" action="#{bean.edit}" render="edit" limitRender="true"> render="edit" limitRender="true"><a4j:outputPanel ajaxRendered="true"> <a4j:outputPanel ajaxRendered="true"> <h:panelGrid> <h:panelGrid> ... ... </h:panelGrid> </h:panelGrid></a4j:outputPanel> </a4j:outputPanel><h:panelGrid id="edit"> <h:panelGrid id="edit"> <rich:dataTable> <rich:dataTable> ... ... </rich:dataTable> </rich:dataTable></h:panelGrid> </h:panelGrid>
  41. 41. 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
  42. 42. Advanced execute features● <a4j:region>● bypassUpdates attribute
  43. 43. <a4j:region> – defining executeregion declaratively<h:form> <h:form> <a4j:region> <a4j:region> <h:inputText /> <h:inputText /> <h:inputText /> <h:inputText /> <h:selectOneMenu /> <h:selectOneMenu /> <a4j:commandButton /> <a4j:commandButton /> <a4j:region> <a4j:region></h:form> </h:form>
  44. 44. Skippingphaseswhenvalidating1.Restore View2.Apply Request Values3.Process Validation4.Update Model5.Invoke Application6.Render Response <h:inputText id="name" value="#{bean.name}"/> <h:inputText id="name" value="#{bean.name}"/> <a4j:ajax event="blur" bypassUpdates="true"/> <a4j:ajax event="blur" bypassUpdates="true"/> </h:inputText> </h:inputText> <rich:message for="name"/> <rich:message for="name"/>
  45. 45. Even more advanced featuresand tags● JavaScript callbacks● Queue● <a4j:status>● <a4j:param>● <a4j:log>
  46. 46. Easily use JavaScript callbacksduring Ajax request<a4j:commandLink value="Link" <a4j:commandLink value="Link" onbegin="ajaxOnBegin()" onbegin="ajaxOnBegin()" onbeforedomupdate="ajaxOnBeforeDomUpdate()" onbeforedomupdate="ajaxOnBeforeDomUpdate()" oncomplete="ajaxOnComplete()"> oncomplete="ajaxOnComplete()"></a4j:commandLink> </a4j:commandLink>
  47. 47. JSF 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
  48. 48. <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:queue />... ...<a4j:commandButton id="buttonA" value="Button A"/> <a4j:commandButton id="buttonA" value="Button A"/><a4j:commandButton id="buttonB" value="Button B"/> <a4j:commandButton id="buttonB" value="Button B"/>
  49. 49. <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:queue /><a4j:commandButton id="buttonA" value="Button A"> <a4j:commandButton id="buttonA" value="Button A"> <a4j:attachdQueue requestGroupingId="ajaxGroup"/> <a4j:attachdQueue requestGroupingId="ajaxGroup"/></a4j:commandButton> </a4j:commandButton><a4j:commandButton id="buttonB" value="Button B"> <a4j:commandButton id="buttonB" value="Button B"> <a4j:attachdQueue requestGroupingId="ajaxGroup"/> <a4j:attachdQueue requestGroupingId="ajaxGroup"/></a4j:commandButton> </a4j:commandButton>
  50. 50. <a4j:queue> – setting request delayallows “waiting” for requests fromsame component in order to mergeevents<a4j:queue requestDelay="1000"/> <a4j:queue requestDelay="1000"/><a4j:commandButton id="buttonA" value="Button A"> <a4j:commandButton id="buttonA" value="Button A"> <a4j:attachdQueue requestDelay="2000"/> <a4j:attachdQueue requestDelay="2000"/></a4j:commandButton> </a4j:commandButton><a4j:commandButton id="buttonB" value="Button B"/> <a4j:commandButton id="buttonB" value="Button B"/>
  51. 51. <a4j:queue> – ignoring “stale”responses<a4j:queue requestDelay="2000 <a4j:queue requestDelay="2000 ingoreDupResponses="true"/> ingoreDupResponses="true"/><h:inputText value="#{bean.state}"> <h:inputText value="#{bean.state}"> <a4j:ajax event="keyup" listener="#{bean.load}" <a4j:ajax event="keyup" listener="#{bean.load}" render="states"/> render="states"/></h:inputText> </h:inputText>
  52. 52. <a4j:status> – Ajax request status<a4j:status name="ajaxStatus"> <a4j:status name="ajaxStatus"> <f:facet name="start"> <f:facet name="start"> <h:graphicImage value="ajaxStatus.jpg"/> <h:graphicImage value="ajaxStatus.jpg"/> </f:facet> </f:facet></a4j:status> </a4j:status><h:form> <h:form> <a4j:commandButton status="ajaxStatus"/> <a4j:commandButton status="ajaxStatus"/></h:form> </h:form>
  53. 53. <a4j:param> - like <f:param>, butsimpler as it also assigns the value toa bean property automatically<a4j:commandButton value="Save"> <a4j:commandButton value="Save"> <a4j:param value="1009" assignTo="#{bean.product}"/> <a4j:param value="1009" assignTo="#{bean.product}"/></a4j:commandButton> </a4j:commandButton>public class Bean { public class Bean { private String product; private String product; public void setProduct (String product) {...} public void setProduct (String product) {...}}}
  54. 54. Another great feature is that<a4j:param> value can contain anyJavaScript expression or JavaScriptfunction, when noEscape="true"<a4j:param name="width" <a4j:param name="width" value="(jQuery(window).width()/2)" value="(jQuery(window).width()/2)" assignTo="#{bean.screenWidth}" assignTo="#{bean.screenWidth}" noEscape="true" /> noEscape="true" />
  55. 55. <a4j:log> – Ajax request/responseinformation, logging
  56. 56. RichFaces UI components● Output, panels● Input● Menu● Data iteration● Tree● Drag and drop● Client side validation● Miscellaneous
  57. 57. rich:tabrich:accordionrich:progressBar
  58. 58. More rich output, panels● rich:panel● rich:togglePanel● rich:popupPanel● rich:collapsiblePanel● rich:toolTip
  59. 59. <rich:popupPanel> can be modal andnon-modal<rich:popupPanel modal="false"> <f:facet name="header"> Edit User </f:facet> ... ...</rich:popupPanel>
  60. 60. rich:calendarrich:inplaceInputrich:inputNumberSliderrich:autocomplete
  61. 61. More rich input● rich:inputNumberSpinner● rich:inplaceSelect● rich:select● rich:fileUpload
  62. 62. rich:panelMenurich:toolBarrich:dropDownMenu
  63. 63. rich:dataTablerich:dataTable withrich:collapsibleSubTablerich:dataScroller
  64. 64. RichFaces 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"
  65. 65. Deciding what rows/cell to update in run-timerender="tableId:rows(bean.rowsSet)"render="tableId:rows(bean.rowsSet):cellId"
  66. 66. New collapsible sub table component
  67. 67. <rich:dataTable> supports columnand row spanning
  68. 68. <rich:extendedDataTable> provideslazy loading, column resizing, reorderand more
  69. 69. More rich data iteration● a4j:repeat● rich:extendedDataTable● rich:collapsibleSubTable● rich:list ◦ list | ordered | definition● rich:dataGrid● rich:column ◦ Column and row spanning ◦ Filtering, sorting
  70. 70. rich:tree
  71. 71. Drag and drop
  72. 72. Many 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.
  73. 73. Invoking component JavaScript APIusing #{rich:component(id)}function<input type="button" <input type="button" onclick="#{rich:component(popup)}.show();" onclick="#{rich:component(popup)}.show();" value="Open" /> value="Open" /><rich:popupPanel id="popup"> <rich:popupPanel id="popup"> <h:outputLink value="#" <h:outputLink value="#" onclick="#{rich:component(popup)}.hide(); onclick="#{rich:component(popup)}.hide(); return false;"> return false;"> <h:outputText value="Close"/> <h:outputText value="Close"/> </h:outputLink> </h:outputLink></rich:popupPanel> </rich:popupPanel>
  74. 74. Invoking component JavaScript APIusing <rich:componentControl>component<h:outputLink value="#"> <h:outputLink value="#"> <h:outputText value="Open" /> <h:outputText value="Open" /> <rich:componentControl event="click" <rich:componentControl event="click" target="popup" operation="show" /> target="popup" operation="show" /></h:outputLink> </h:outputLink><rich:popupPanel header="RichFaces" id="popup"> <rich:popupPanel header="RichFaces" id="popup"> <h:outputLink value="#"> <h:outputLink value="#"> <h:outputText value="Close" /> <h:outputText value="Close" /> <rich:componentControl event="click" <rich:componentControl event="click" target="popup" operation="hide" /> target="popup" operation="hide" /> </h:outputLink> </h:outputLink></rich:popupPanel> </rich:popupPanel>
  75. 75. <rich:accordion id="c"> <rich:accordion id="c"> <rich:accordionItem header="New York" name="nyc"> <rich:accordionItem header="New York" name="nyc"> <h:outputText value="You selected New York"/> <h:outputText value="You selected New York"/> </rich:accordionItem> </rich:accordionItem> <rich:accordionItem header="San Francisco" name="sf"> <rich:accordionItem header="San Francisco" name="sf"> <h:outputText value="You selected San Francisco"/> <h:outputText value="You selected San Francisco"/> </rich:accordionItem> </rich:accordionItem> ... ...</rich:accordion> </rich:accordion>
  76. 76. <input type="button" value="New York City" <input type="button" value="New York City" onclick="#{rich:component(c)}.switchToItem(nyc)"/> onclick="#{rich:component(c)}.switchToItem(nyc)"/><input type="button" value="San Francisco" <input type="button" value="San Francisco" onclick="#{rich:component(c)}.switchToItem(sf)"/> onclick="#{rich:component(c)}.switchToItem(sf)"/><input type="button" value="Los Angeles" <input type="button" value="Los Angeles" onclick="#{rich:component(c)}.switchToItem(la)"/> onclick="#{rich:component(c)}.switchToItem(la)"/><input type="button" value="First" <input type="button" value="First" onclick="#{rich:component(c)}.switchToItem(@first)"/> onclick="#{rich:component(c)}.switchToItem(@first)"/><input type="button" value="Next" <input type="button" value="Next" onclick="#{rich:component(c)}.switchToItem(@next)"/> onclick="#{rich:component(c)}.switchToItem(@next)"/><input type="button" value="Previous" <input type="button" value="Previous" onclick="#{rich:component(c)}.switchToItem(@prev)"/> onclick="#{rich:component(c)}.switchToItem(@prev)"/><input type="button" value="Last" <input type="button" value="Last" onclick="#{rich:component(c)}.switchToItem(@last)"/> onclick="#{rich:component(c)}.switchToItem(@last)"/>
  77. 77. 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
  78. 78. Standard Java EE security with#{rich:isUserInRole(role)} function<rich:panel header="Admin panel" <rich:panel header="Admin panel" rendered="#{rich:isUserInRole(admin)}"> rendered="#{rich:isUserInRole(admin)}"> Very sensitive information Very sensitive information</rich:panel> </rich:panel> <rich:panel header="User panel"> <rich:panel header="User panel"> General information General information</rich:panel> </rich:panel>● Calls facesContext.getExternalContext.getUserInRole(role)● Whats good is that security roles can be defined anywhere
  79. 79. Client-side validation based on Bean Validation (JSR 303) New in RichFaces 4
  80. 80. Bean Validation (JSR 303)JSF 2 has support for Bean Validation(validation done on server)Bean:public class Bean { public class Bean { @Pattern(regexp="...") @Pattern(regexp="...") private String email; private String email;}}JSF page:<h:inputText id="email" value="#{bean.email}"> <h:inputText id="email" value="#{bean.email}"> <a4j:ajax event="blur"/> <a4j:ajax event="blur"/></h:inputText> </h:inputText><rich:message for="email"/> <rich:message for="email"/>
  81. 81. Client-Validation Based on BeanValidationValidation is performed on the client. If no clientimplementation available, validation automatically fallsback to standard, server validationBean:public class Bean { public class Bean { @Pattern(regexp="...") @Pattern(regexp="...") private String email; private String email;}}JSF page:<h:inputText id="email" value="#{bean.email}"> <h:inputText id="email" value="#{bean.email}"> <rich:validator /> <rich:validator /></h:inputText> </h:inputText><rich:message for="email"/> <rich:message for="email"/>
  82. 82. Object validation with<rich:graphValidator>@Size(min=5,max=15) @Size(min=5,max=15)private String password1; private String password1;@Size(min=5,max=15) @Size(min=5,max=15)private String password2; private String password2;@AssertTrue(message="Passwords dont match") @AssertTrue(message="Passwords dont match")public boolean checkPassword() { public boolean checkPassword() { return password1.equals(password1); return password1.equals(password1);}}<rich:graphValidator value="#{bean}" id="crossField"> <rich:graphValidator value="#{bean}" id="crossField"> <h:inputText value="#{bean.password1}"/> <h:inputText value="#{bean.password1}"/> <h:inputText value="#{bean.password2}"/> <h:inputText value="#{bean.password2}"/> <rich:message for="email" for="crossField"/> <rich:message for="email" for="crossField"/></rich:graphValidator> </rich:graphValidator>
  83. 83. Rich miscellaneous● <rich:componentControl>● <rich:hashParam>● <rich:jQuery>
  84. 84. <rich:componentControl> ● Allows to call JS API on a component in declarative fashion<h:outputLink id="openLink" value="#"> <h:outputLink id="openLink" value="#"> <h:outputText value="Open" /> <h:outputText value="Open" /> <rich:componentControl event="click" <rich:componentControl event="click" operation="show" operation="show" target="popup" /> target="popup" /></h:outputLink> </h:outputLink><rich:popupPanel id="popup"> <rich:popupPanel id="popup">... ...</rich:popupPanel> </rich:popupPanel>
  85. 85. <rich:hashParam> - createsJavaScript hash, can be passed toanother client function.<h:commandButton value="Show popup"> <h:commandButton value="Show popup"> <rich:componentControl target="pp" operation="show"> <rich:componentControl target="pp" operation="show"> <rich:hashParam> <rich:hashParam> <f:param name="width" value="500" /> <f:param name="width" value="500" /> <f:param name="height" value="300" /> <f:param name="height" value="300" /> <f:param name="minWidth" value="300" /> <f:param name="minWidth" value="300" /> <f:param name="minHeight" value="150" /> <f:param name="minHeight" value="150" /> </rich:hashParam> </rich:hashParam> </rich:componentControl> </rich:componentControl></h:commandButton </h:commandButton
  86. 86. Using jQuery with <rich:jQuery><input type="button" id=" value="Update panel"/> <input type="button" id=" value="Update panel"/><rich:jQuery selector="#changeButton" event="click" <rich:jQuery selector="#changeButton" event="click" query="$(#nycInfo .rf-p-hdr).text(New York City); query="$(#nycInfo .rf-p-hdr).text(New York City); $(.rf-p-b).css(color, blue);" /> $(.rf-p-b).css(color, blue);" />
  87. 87. Using jQuery when page rendered tocreate zebra-like styling for table
  88. 88. <style> <style> .even-row { .even-row { background-color: #FCFFFE; background-color: #FCFFFE; }} .odd-row { .odd-row { background-color: #ECF3FE; background-color: #ECF3FE; }}</style> </style><rich:dataTable id="gamesTable"> <rich:dataTable id="gamesTable"> // columns // columns</rich:dataTable> </rich:dataTable><rich:jQuery selector="#gamesTable tr:odd" <rich:jQuery selector="#gamesTable tr:odd" query="addClass(odd-row)" /> query="addClass(odd-row)" /><rich:jQuery selector="#gamesTable tr:even" <rich:jQuery selector="#gamesTable tr:even" query="addClass(even-row)" /> query="addClass(even-row)" />
  89. 89. Invoking <rich:jQuery> as a regularJavaScript function with mouse over<h:graphicImage width="100" value="/images/venice.png" <h:graphicImage width="100" value="/images/venice.png" onmouseover="larger(this, {})" onmouseover="larger(this, {})" onmouseout="normal(this, {})" /> onmouseout="normal(this, {})" /><rich:jQuery name="larger" <rich:jQuery name="larger" query="animate({width:241px})" /> query="animate({width:241px})" /><rich:jQuery name="normal" <rich:jQuery name="normal" query="animate({width:100px})"/> query="animate({width:100px})"/>
  90. 90. Skins
  91. 91. Skins● 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
  92. 92. Ready-to-use skins● classic● wine● blueSky● ruby● emeraldTown● deepMarine <context-param>● plain <context-param> <param-name>org.richfaces.skin</param-name> <param-name>org.richfaces.skin</param-name> <param-value>ruby</param-value>● japanCherry <param-value>ruby</param-value> </context-param> </context-param>
  93. 93. RichFaces Skin file#Colors #ColorsheaderBackgroundColor=#900000 headerBackgroundColor=#900000headerGradientColor=#DF5858 headerGradientColor=#DF5858headerTextColor=#FFFFFF headerTextColor=#FFFFFFheaderWeightFont=bold headerWeightFont=boldgeneralBackgroundColor=#f1f1f1 generalBackgroundColor=#f1f1f1generalTextColor=#000000 generalTextColor=#000000generalSizeFont=11px generalSizeFont=11pxgeneralFamilyFont=Arial, Verdana, sans-serif generalFamilyFont=Arial, Verdana, sans-serifcontrolTextColor=#000000 controlTextColor=#000000controlBackgroundColor=#ffffff controlBackgroundColor=#ffffffadditionalBackgroundColor=#F9E4E4 additionalBackgroundColor=#F9E4E4
  94. 94. Skins● Modify existing or create your own <context-param> <context-param> <param-name>org.richfaces.skin</param-name> <param-name>org.richfaces.skin</param-name> <param-value>myCoolSkin</param-value> <param-value>myCoolSkin</param-value> </context-param> </context-param>● Change skins in runtime <context-param> <context-param> <param-name>org.richfaces.skin</param-name> <param-name>org.richfaces.skin</param-name> <param-value>#{bean.skin}</param-value> <param-value>#{bean.skin}</param-value> </context-param> </context-param>
  95. 95. Overwriting Skin CSS<style> <style>.rf-p-hdr { .rf-p-hdr { color: … color: … font-size: … font-size: … font-weight: … font-weight: … font-family: … font-family: …}}</style> </style><rich:panel>...</rich:panel> <rich:panel>...</rich:panel>
  96. 96. Overwriting Skin CSS<style> <style>.rf-p-hdr { .rf-p-hdr { // overwrite skin CSS properties // overwrite skin CSS properties}}.specialHeader { .specialHeader { // define custom CSS for specific panel // define custom CSS for specific panel}}</style> </style><rich:panel id="panel1"> <rich:panel id="panel1">... ...<rich:panel> <rich:panel><rich:panel id="panel2" headerClass="specialHeader"> <rich:panel id="panel2" headerClass="specialHeader">... ...<rich:panel> <rich:panel>
  97. 97. Skinning standard JSF tags andHTML tagsApply to each control:<h:button style="background-color: <h:button style="background-color: #{richSkin.tableBackgroundColor}"/> #{richSkin.tableBackgroundColor}"/>
  98. 98. Skinning standard JSF tags andHTML tags automaticallyApply to all standard controls (JSF and HTML):<context-param> <context-param> <param-name> <param-name> org.richfaces.enableControlSkinning org.richfaces.enableControlSkinning </param-name> </param-name> <param-value>true</param-value> <param-value>true</param-value></context-param> </context-param>
  99. 99. Skinning standard JSF tags andHTML tags only when special CSSclass is applied to parent container<context-param> <context-param> <param-name> <param-name> org.richfaces.enableControlSkinningClasses org.richfaces.enableControlSkinningClasses </param-name> </param-name> <param-value>true</param-value> <param-value>true</param-value></context-param> </context-param><div class="rfs-ctn"> <div class="rfs-ctn"> <h:outputText /> <h:outputText /> <h:inputText /> <h:inputText /> <h:commandButton /> <h:commandButton /></div> </div>
  100. 100. Where can I try the new RichFaces 4?http://richfaces.org/showcase
  101. 101. RichFaces 4.1 (Late 2011)Mobile supportNew components: Pick list Ordering list Rich text editor
  102. 102. 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
  103. 103. RichFacesRich, flexible, robust, andproven enterprise-levelframework to JSF 2
  104. 104. Tiggr is a Web-based mobile apps builder.Super fast, and easy to build mobile Web and native appsBuild your mobile app at http://gotiggr.com
  105. 105. Export or build the app as mobile Web or generate native app (for Android, iOS)
  106. 106. Thank you!How to get in touch with me:>max@exadel.com>@maxkatz>mkblog.exadel.comBuild your mobile app in thecloud: http://gotiggr.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×