RichFaces: more concepts and features


Published on

Four part webinar series on RichFaces from 2009. Webinar #4: RichFaces: more concepts and features

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

RichFaces: more concepts and features

  1. 1. JBoss RichFaces Webinar Series More Concepts and Features Webinar #2 Max Katz Charley Cowens © Exadel
  2. 2. Upcoming Webinars: May 19th, 2009 – Rich UI Components (rich:* tag library) June 16th, 2009 - Skins
  3. 3. Who Is This Guy? Senior Systems Engineer RIA strategy, development, training Author of Practical RichFaces (Apress)
  4. 4. The Plan Review and new stuff: 1.Sending an AJAX request 2.Partial view rendering 3.Partial view processing More tags and features: 1.a4j:jsFunction, a4j:poll, a4j:repeat, a4j:queue 2.JavaScript interactions Questions
  5. 5. RichFaces 1. JSF-AJAX components (100+) 2. Skins 3. CDK (Component Development Kit)
  6. 6. What You Should Know Runs in: • Any servlet container, application server • Portals: JBoss, WebLogic, Liferay Works with: • Any JSF implementation (1.1, 1.2, 2.0soon) Works with: • Seam, Spring Works with any 3rd party components: • Tomahawk, Trinidad, QuipuKit, etc.
  7. 7. JBoss Tools
  8. 8. Basic Concepts and More 1.Sending AJAX request 2.Partial view (page) rendering 3.Partial view processing
  9. 9. Sending AJAX Request • a4j:support – add AJAX support to any parent component • a4j:commandButton, a4j:commandLink • a4j:poll – periodically send AJAX request • a4j:jsFunction – AJAX request from any custom JavaScript function • a4j:push – a ping-like request
  10. 10. Sending AJAX Request Using a4j:support <h:selectOneMenu value="#{bean.fruit}"> <a4j:support event="onchange" action="#{bean.change}" reRender="info"/> </<h:selectOneMenu> <h:panelGrid id="info"> ... </h:panelGrid> Using a4j:commandButton <a4j:commandButton value="AJAX Submit" action="#{echoBean.count}" reRender="echo, count" /> <h:outputText id="echo" value="#{echoBean.text}"/>
  11. 11. Using a4j:support with rich components <rich:listShuttle sourceValue="#{toolBar.freeItems}" targetValue="#{toolBar.items}" var="items" converter="listShuttleconverter"> <rich:column width="18"> <h:graphicImage value="#{items.iconURI}"/> </rich:column> <rich:column> <h:outputText value="#{items.label}"/> </rich:column> <a4j:support event="onlistchanged" reRender="toolBar" /> <a4j:support event="onorderchanged" reRender="toolBar" /> </rich:listShuttle>
  12. 12. a4j:jsFunction – AJAX request from any custom JavaScript function <h:form> <table> <tr> <td onmouseover="setdrink('Espresso')" onmouseout="setdrink('')">Espresso</td> <td onmouseover="setdrink('Cappuccino')" onmouseout="setdrink('')">Cappuccino</td> <td onmouseover="setdrink('Tea')" onmouseout="setdrink('')">Tea</td> </tr> </table> <h:outputText id="drink" value="I like #{bean.drink}" /> <a4j:jsFunction name="setdrink" reRender="drink" > <a4j:actionparam name="param1" assignTo="#{bean.drink}"/> </a4j:jsFunction> </h:form>
  13. 13. a4j:poll – periodically sends AJAX request <a4j:poll id="poll" interval="100" enabled="#{clockBean.enabled}" reRender="clock" /> <h:panelGrid columns="3"> <a4j:commandButton value="Start Clock" action="#{clockBean.startClock}" reRender="poll" /> <a4j:commandButton value="Stop Clock" action="#{clockBean.stopClock}" reRender="poll" /> <h:outputText id="clock" value="#{}" /> </h:panelGrid>
  14. 14. Partial View Rendering Point reRender to component id's to be rendered Use a4j:outputPanel to include components always to be rendered
  15. 15. <a4j:commandLink reRender="id1,id2"/> ... Using <h:outputText id="id1"/> reRender <h:dataTable id="id2"> ... </h:dataTable> <a4j:commandLink reRender="panel"/> ... Using <h:panelGrid id="panel"> reRender to point <h:outputText /> to container <h:dataTable>..</h:dataTable> </h:panelGrid> <a4j:commandLink/> Using ... a4j:outputPanel <a4j:outputPanel ajaxRendered="true"> <h:outputText /> <h:dataTable>..</h:dataTable> <a4j:outputPanel>
  16. 16. Deciding what components to re-render in runtime: (bind to Set, Collection, Array, comma-delimited String) <a4j:commandLink reRender="#{bean.renderControls}"> <h:outputText id="id1"/> <h:dataTable id="id2"> ... </h:dataTable> Setting limitToList="true", limits rendering to components set only in current reRender list <a4j:commandLink reRender="id1" limitToList="true"> <h:panelGrid id="id1"> <h:outputText /> </h:panelGrid> <a4j:outputPanel ajaxRendered="true"> <h:dataTable>...</h:dataTable> <a4j:outputPanel>
  17. 17. Partial View Processing Use ajaxSingle attribute Use <a4j:region>...</a4j:region>
  18. 18. Partial View Processing Using ajaxSingle <h:selectOneMenu value="#{bean.fruit}"> <a4j:support event="onchange" ajaxSingle="true"> </<h:selectOneMenu> Using a4j:region <a4j:region> <h:inputText/> <a4j:commandButton /> </a4j:region> <h:inputText/> <h:inputText/>
  19. 19. a4j:region lets you define a concrete area in the tree to process renderRegionOnly limits re-rendering to this region only selfRendered – renders directly from JSF component tree, instead of synchronizing the tree with the Facelet bypassUpdates is useful when validating a form, it skips Update Model and Invoke Application phase <h:outputText value="Name:"/> <h:panelGroup> <a4j:region renderRegionOnly="true" selfRendered="true"> <h:inputText id="name" value="#{}" required="true" label="Name"> <f:validateLength minimum="4" /> <a4j:support event="onblur" bypassUpdates="true" /> </h:inputText> <rich:message for="name" /> </a4j:region> </h:panelGroup>
  20. 20. More Tags and Concepts 1.a4j:repeat 2.a4j:queue 3.JavaScript interactions
  21. 21. a4j:repeat works just like ui:repeat but also allows specific row update via AJAX <table> <a4j:repeat value="#{bean.numbers}" var="num" rowKeyVar="rowIndex"> <tr> <td width="20px"> <h:outputText id="num" value="#{num.number}" /> </td> <td> <a4j:commandLink value="-" reRender="num" action="#{bean.decrease}"> <a4j:actionparam name="rowIndex" value="#{rowIndex}" assignTo="#{repeatBean.updatedRow}" /> </a4j:commandLink> / <a4j:commandLink value="+" reRender="num" action="#{bean.increase}"> <a4j:actionparam name="rowIndex" value="#{rowIndex}" assignTo="#{bean.updatedRow}" /> </a4j:commandLink></td> </tr> </a4j:repeat> </table>
  22. 22. a4j:queue – controls traffic between client and server – Wait for request to return before sending new one – Set request delay – “Replaces” requests from the same logical components – Define queue size • Define queue behavior when size is exceeded (fire/drop new, fire/drop first) <a4j:queue name="ajaxQueue" requestDelay="1000"/> ... <a4j:commandButton value="Delete" similarityGroupingId="actionGroup" eventsQeueu="ajaxQueue"/> <a4j:commandButton value="Save" similarityGroupingId="actionGroup" eventsQeueu="ajaxQueue"/>
  23. 23. JavaScript interactions – call custom JavaScript function during different phases of the AJAX request <h:selectOneMenu value="#{bean.drink}"> <f:selectItem itemValue="Espresso"/> <a4j:support event="onchange" reRender="drink" onsubmit="alert('Getting new drink...')" onbeforedomupdate="alert('About to update browser DOM...')" oncomplete="alert('Browser DOM updated.')"/> </h:selectOneMenu>
  24. 24. What We Covered More tags and features in 1.Sending an AJAX request 2.Partial view rendering 3.Partial view processing New tags and features 1.a4j:repeat 2.a4j:queue 3.JavaScript interactions
  25. 25. Upcoming Webinars: May 19th, 2009 – Rich UI Components (rich:* tag library) June 16th, 2009 - Skins
  26. 26. JSF/RichFaces Training On-site 1-3 days More info:
  27. 27. RichFaces Demo
  28. 28. Thank You. Questions?