Successfully reported this slideshow.

Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011

4,082 views

Published on

RichFaces 4 presentation at CONFESS 2011, Vienna, Austria

Published in: Technology
  • Be the first to comment

Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011

  1. 1. Exadel#{Ajax Applications with JSF 2and New RichFaces 4}CONFESS, ViennaApril 12, 2011Max KatzExadel
  2. 2. I confess...
  3. 3. ExadelSenior Systems Engineer at Exadel JSF, RichFaces, Java EEexadel.org – open source projects and communityhttp://gotiggr.com – create, share, and preview web and mobile interactive HTML prototypes
  4. 4. Exadel 4 Summer 2011 Author of Lead-author ofPractical RichFaces Practical RichFaces, 2/e (Apress) (Apress, June 2011)
  5. 5. Exadel PublishedApril 11, 2011
  6. 6. Exadelexadel.org – open sourceprojects and community● Exadel Flamingo● Exadel Fiji● Exadel jsf4birt● Exadel JavaFX Plug-in for Eclipse
  7. 7. Exadel TiggrLets you easily create, share,and preview interactive web and mobile HTML prototypes [http://gotiggr.com]
  8. 8. Exadel
  9. 9. ExadelWeb Preview [desktop][gotiggr.com/preview/6669]Web Preview [mobile][gotiggr.com/preview/5673]
  10. 10. Exadel@maxkatzmkblog.exadel.com
  11. 11. ExadelExadel is products and servicescompanyFounded in 1998, headquartersin San Francisco Bay Area(Concord, CA)350+ employees
  12. 12. Exadel Exadel Offices Ekaterinburg Moscow Minsk Homyel 5 KharkovMunich Donetsk
  13. 13. ExadelProducts● Open Source with JBoss ◦ RichFaces ◦ JBoss Tools/JBoss Developer Studio● exadel.org ◦ Flamingo ◦ Fiji ◦ jsf4birt ◦ JavaFX Plug-in for Eclipse● gotiggr.com– create, share, and preview interactive Web and mobile HTML prototypes
  14. 14. ExadelServices● Rich enterprise application development, integration● Eclipse development● Custom rich component development● Mobile development● Training● Most projects are done in Eastern Europe
  15. 15. ExadelThe Plan Is Simple1) Ajax features in JSF 22) The new RichFaces 4
  16. 16. ExadelRichFaces 4 workshops atCONFESS, April 1408:00-10:00RichFaces: Foundation (a4j)10:30-12:30RichFaces: Rich UI components13:30-15:30RichFaces: Client-side validation16:00-18:00RichFaces: Skins
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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>
  22. 22. 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>
  23. 23. 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
  24. 24. Exadel Thats good, but where doyou get rich components and more?A rich component framework is still(?) needed to build real-world Ajax applications.
  25. 25. ExadelRichFaces 4 – rich JSF framework ● JSF 2 based ● Components ◦ a4j:* tag library (core) ◦ rich:* tag library (UI) ◦ Components JavaScript API ● Skins ● Client-side validation (Bean Validation based) ● CDK – Component Development Kit
  26. 26. 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
  27. 27. 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
  28. 28. ExadelJust tell me when RichFaces 4 is going to be released? RichFaces was released on March 29, 2011 (Yes, finally!)
  29. 29. Exadel Good, now tell me whatsreally new and improved in RichFaces 4?
  30. 30. ExadelRichFaces 4 JavaScript in RichFaces is now entirely based on the popular jQuery library
  31. 31. 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
  32. 32. ExadelRichFaces 4 New client-side validation based on Bean Validation (JSR 303)
  33. 33. ExadelRichFaces 4 New, and easy to use CDK (Component Development Kit), allows quickly to build yourown custom rich components
  34. 34. 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)
  35. 35. ExadelRichFaces 4 Run on: Google App Engine (GAE), Amazon EC2, CloudBees
  36. 36. ExadelRichFaces 4 JSF implementations: Mojarra or Myfaces
  37. 37. ExadelRichFaces 4 Any browser
  38. 38. ExadelRichFaces 4 Tooling support through JBoss Tools, IntelliJ, NetBeans
  39. 39. 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>
  40. 40. 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”> panels. Only renders what is set in current renderstatus Status to display during Ajax request
  41. 41. Exadel Thats not all, you get a lot more upgrades, advancedfeatures and customization options from RichFaces...
  42. 42. ExadelRichFaces 4 core – sending an Ajax request● a4j:ajax● a4j:commandButton● a4j:commandLink● a4j:jsFunction● a4j:poll● a4j:push
  43. 43. Exadel <a4j:commandButton/Link> – Ajax button/link/* 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" render="output" action="#{bean.action}" />
  44. 44. Exadel<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><h:form> RichFaces default <h:inputText> <h:selectOneMenu> value for <a4j:commandButton/> button/link<h:form> execute=”@form”
  45. 45. Exadel <a4j:jsFunction> – fire Ajax request from any JavaScript function, HTML event<table> ... <td onmouseover="update(yellow)"/> ...</table><h:form> <a4j:jsFunction name="update" action="#{bean.change}" reRender="..."> <a4j:param value="param1" assignTo="#{bean.color}"/> </a4j:jsFunction></h:form>
  46. 46. 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>
  47. 47. 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)" />
  48. 48. ExadelRichFace 4 core – advancedrendering features● <a4j:outputPanel>● limitRender attribute● render=”{bean.renderList}”
  49. 49. 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</a4j:outputPanel> Ajax request
  50. 50. 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>
  51. 51. 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
  52. 52. ExadelRichFace 4 core – advancedexecute features● <a4j:region>● bypassUpdates attribute
  53. 53. Exadel<a4j:region> – declarativelydefine execute region<h:form> Execute <a4j:region> options: <h:inputText /> ● @all <h:inputText /> ● @this <a4j:commandButton execute="@region"/> ● @form <a4j:region></h:form> ● @none ● ids<h:form> ● EL <a4j:region> ● @region <h:inputText /> <h:inputText /> <a4j:commandButton /> <a4j:region></h:form>
  54. 54. 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"/>
  55. 55. 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
  56. 56. ExadelRichFaces queue upgrades● Combine requests from one or more components● Delay firing Ajax request● 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)
  57. 57. Exadel <a4j:queue> – “combining” events from the same component<a4j:queue requestDelay="2000"/>…<a4j:commandButton value="Button A1"/><a4j:commandButton value="Button AB"/>Events (clicks) from the same componentare “combined” which results in just one requestfrom a component being sent. Prevents sending multiplerequest from the same component.
  58. 58. Exadel <a4j:queue> – “combining” events from different components<a4j:queue requestDelay="2000"/>...<a4j:commandButton> <a4j:attachQueue requestGroupingId="ajaxGroup"/></a4j:commmandButton><a4j:commandButton> <a4j:attachQueue requestGroupingId="ajaxGroup"/></a4j:commmandButton>
  59. 59. Exadel <a4j:queue> delay<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 />Delay is a “wait” to combine similar events (events from thesame components) together.
  60. 60. 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>
  61. 61. ExadelRichFace 4 core – moreadvanced features● <a4j:status>● <a4j:param>● <a4j:log>● JavaScript interactions
  62. 62. 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>
  63. 63. 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 () {...}}
  64. 64. Exadel<a4j:log> – Ajax requestinformation● Levels: ◦ debug, info, warn, error
  65. 65. 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
  66. 66. ExadelRichFaces UI components● Output, panels● Input● Menu● Data iteration● Tree● Drag and drop● Client side validation● Miscellaneous
  67. 67. Exadelrich:tabrich:accordionrich:progressBar
  68. 68. ExadelMore rich output, panels● rich:panel● rich:togglePanel● rich:popupPanel● rich:collapsiblePanel● rich:toolTip
  69. 69. Exadelrich:calendarrich:inplaceInputrich:inputNumberSliderrich:autocomplete
  70. 70. ExadelMore rich input● rich:inputNumberSpinner● rich:inplaceSelect● rich:select● rich:fileUpload
  71. 71. Exadelrich:panelMenurich:toolBarrich:dropDownMenu
  72. 72. Exadelrich:dataTablerich:dataTable withrich:collapsibleSubTablerich:dataScroller
  73. 73. 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"
  74. 74. Exadel Partial table updaterender="tableId:#{bean.rowsSet}"render="tableId:#{bean.rowsSet}:cellId"
  75. 75. ExadelMore rich data iteration● a4j:repeat● rich:extendedDataTable● rich:list ◦ list | ordered | definition● rich:dataGrid● rich:column ◦ Column and row spanning ◦ Filtering, sorting
  76. 76. Exadelrich:tree
  77. 77. ExadelDrag and drop
  78. 78. ExadelClient-side validation based on Bean Validation (JSR 303) New in RichFaces 4
  79. 79. Exadel Bean Validation (JSR 303) ● JSF 2 has support for Bean Validation (server-side)public class Bean { @Pattern(regexp="...") private String email;}<h:inputText id="email" value="#{bean.email}"> <a4j:ajax event="blur"/></h:inputText><rich:message for="email"/>
  80. 80. Exadel RichFaces client validation <rich:validator>public class Bean { @Pattern(regexp="...") private String email;}<h:inputText id="email" value="#{bean.email}"> <rich:validator/></h:inputText><rich:message for="email"/>
  81. 81. 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="Passwords dont match")public boolean isPasswordsEquals() { return password1.equals(password1);}
  82. 82. 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
  83. 83. 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.
  84. 84. Exadel Using <rich:component(id)><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>
  85. 85. ExadelRich miscellaneous● <rich:componentControl>● <rich:hashParam>● <rich:jQuery>
  86. 86. 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>
  87. 87. 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
  88. 88. 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>
  89. 89. ExadelSkins
  90. 90. 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
  91. 91. 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
  92. 92. Exadel Skin file (just a property file)#ColorsheaderBackgroundColor=#900000headerGradientColor=#DF5858headerTextColor=#FFFFFFheaderWeightFont=boldgeneralBackgroundColor=#f1f1f1generalTextColor=#000000generalSizeFont=11pxgeneralFamilyFont=Arial, Verdana, sans-serifcontrolTextColor=#000000controlBackgroundColor=#ffffffadditionalBackgroundColor=#F9E4E4
  93. 93. 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>
  94. 94. 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>
  95. 95. 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>
  96. 96. 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>
  97. 97. Exadel Where can I try the new RichFaces 4?http://richfaces.org/showcase
  98. 98. 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
  99. 99. ExadelThats it for RichFaces, there is one more thing I want to show you.
  100. 100. Exadel Looking for beta testers for newgotiggr.com/preview/6669 Tiggr version where you can build mobile apps and access remote services and APIsgotiggr.com/preview/5673
  101. 101. ExadelRichFaces 4 workshops atCONFESS, April 1408:00-10:00RichFaces: Foundation (a4j)10:30-12:30RichFaces: Rich UI components13:30-15:30RichFaces: Client-side validation16:00-18:00RichFaces: Skins
  102. 102. Exadel max@exadel.comThank @maxkatz you! mkblog.exadel.com gotiggr.com

×