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
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.
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>
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