Your SlideShare is downloading. ×
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
RichFaces: more concepts and features
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

RichFaces: more concepts and features

3,700

Published on

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

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

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

  • Be the first to like this

No Downloads
Views
Total Views
3,700
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
64
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JBoss RichFaces Webinar Series More Concepts and Features Webinar #2 Max Katz Charley Cowens © Exadel
  • 2. Upcoming Webinars: May 19th, 2009 – Rich UI Components (rich:* tag library) June 16th, 2009 - Skins
  • 3. Who Is This Guy? Senior Systems Engineer RIA strategy, development, training http://mkblog.exadel.com http://twitter.com/maxkatz Author of Practical RichFaces (Apress)
  • 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. RichFaces 1. JSF-AJAX components (100+) 2. Skins 3. CDK (Component Development Kit)
  • 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. JBoss Tools
  • 8. Basic Concepts and More 1.Sending AJAX request 2.Partial view (page) rendering 3.Partial view processing
  • 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. 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. 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. 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. 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="#{clockBean.now}" /> </h:panelGrid>
  • 14. Partial View Rendering Point reRender to component id's to be rendered Use a4j:outputPanel to include components always to be rendered
  • 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. 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. Partial View Processing Use ajaxSingle attribute Use <a4j:region>...</a4j:region>
  • 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. 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="#{validationBean.name}" 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. More Tags and Concepts 1.a4j:repeat 2.a4j:queue 3.JavaScript interactions
  • 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. 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. 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. 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. Upcoming Webinars: May 19th, 2009 – Rich UI Components (rich:* tag library) June 16th, 2009 - Skins
  • 26. JSF/RichFaces Training On-site 1-3 days More info: http://mkblog.exadel.com
  • 27. RichFaces Demo http://livedemo.exadel.com/richfaces-demo
  • 28. Thank You. Questions? mkatz@exadel.com http://mkblog.exadel.com

×