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

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