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. Questions?mkatz@exadel.comhttp://mkblog.exadel.com