Download - RichFaces: more concepts and features
JBoss RichFacesWebinar Series
More Concepts and FeaturesWebinar #2
Max KatzCharley Cowens
© Exadel
Upcoming Webinars:May 19th, 2009 – Rich UI Components
(rich:* tag library)June 16th, 2009 - Skins
Who Is This Guy?Senior Systems EngineerRIA strategy, development, training http://mkblog.exadel.com http://twitter.com/maxkatzAuthor of Practical RichFaces (Apress)
The PlanReview and new stuff:
1.Sending an AJAX request2.Partial view rendering3.Partial view processing
More tags and features:1.a4j:jsFunction, a4j:poll, a4j:repeat,
a4j:queue2.JavaScript interactions
Questions
RichFaces1. JSF-AJAX components (100+)2. Skins3. CDK (Component Development Kit)
What You Should KnowRuns in:
• Any servlet container, application server
• Portals: JBoss, WebLogic, LiferayWorks with:
• Any JSF implementation (1.1, 1.2, 2.0soon) Works with:
• Seam, SpringWorks with any 3rd party components:
• Tomahawk, Trinidad, QuipuKit, etc.
JBoss Tools
Basic Concepts and More1.Sending AJAX request2.Partial view (page) rendering3.Partial view processing
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
Sending AJAX Request
<h:selectOneMenu value="#{bean.fruit}"> <a4j:support event="onchange" action="#{bean.change}" reRender="info"/></<h:selectOneMenu><h:panelGrid id="info"> ...</h:panelGrid>
<a4j:commandButton value="AJAX Submit" action="#{echoBean.count}" reRender="echo, count" /><h:outputText id="echo" value="#{echoBean.text}"/>
Using a4j:commandButton
Using a4j:support
<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>
Using a4j:supportwith rich components
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>
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>
Partial View RenderingPoint reRender to component id's to be
renderedUse a4j:outputPanel to include
components always to be rendered
<a4j:commandLink reRender="panel"/>...<h:panelGrid id="panel"> <h:outputText /> <h:dataTable>..</h:dataTable></h:panelGrid>
<a4j:commandLink reRender="id1,id2"/>...<h:outputText id="id1"/><h:dataTable id="id2">...</h:dataTable>
<a4j:commandLink/>...<a4j:outputPanel ajaxRendered="true"> <h:outputText /> <h:dataTable>..</h:dataTable><a4j:outputPanel>
Using reRender
Using reRender to pointto container
Usinga4j:outputPanel
<a4j:commandLink reRender="#{bean.renderControls}">
<h:outputText id="id1"/><h:dataTable id="id2"> ...</h:dataTable>
Deciding what components to re-render in runtime:(bind to Set, Collection, Array, comma-delimited String)
<a4j:commandLink reRender="id1" limitToList="true"><h:panelGrid id="id1"> <h:outputText /></h:panelGrid><a4j:outputPanel ajaxRendered="true"> <h:dataTable>...</h:dataTable><a4j:outputPanel>
Setting limitToList="true", limits rendering to components set only in current reRender list
Partial View ProcessingUse ajaxSingle attributeUse <a4j:region>...</a4j:region>
Partial View Processing
<h:selectOneMenu value="#{bean.fruit}"> <a4j:support event="onchange" ajaxSingle="true"></<h:selectOneMenu>
<a4j:region> <h:inputText/> <a4j:commandButton /></a4j:region><h:inputText/><h:inputText/>
Using a4j:region
Using ajaxSingle
<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>
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
More Tags and Concepts1.a4j:repeat2.a4j:queue3.JavaScript interactions
<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>
a4j:repeat works just like ui:repeat but also allowsspecific row update via AJAX
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"/>
<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>
JavaScript interactions – call custom JavaScript function during differentphases of the AJAX request
What We CoveredMore tags and features in
1.Sending an AJAX request2.Partial view rendering3.Partial view processing
New tags and features1.a4j:repeat2.a4j:queue3.JavaScript interactions
Upcoming Webinars:May 19th, 2009 – Rich UI Components
(rich:* tag library)June 16th, 2009 - Skins
JSF/RichFaces TrainingOn-site 1-3 daysMore info: http://mkblog.exadel.com
RichFaces Demo http://livedemo.exadel.com/richfaces-demo
Thank You. [email protected]://mkblog.exadel.com