Ajax Applications with JSF 2 and New RichFaces 4 - TSSJS


Published on

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

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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