RichFaces: more concepts and features
-
Upload
max-katz -
Category
Technology
-
view
3.716 -
download
4
description
Transcript of RichFaces: more concepts and features
![Page 1: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/1.jpg)
JBoss RichFacesWebinar Series
More Concepts and FeaturesWebinar #2
Max KatzCharley Cowens
© Exadel
![Page 2: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/2.jpg)
Upcoming Webinars:May 19th, 2009 – Rich UI Components
(rich:* tag library)June 16th, 2009 - Skins
![Page 3: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/3.jpg)
Who Is This Guy?Senior Systems EngineerRIA strategy, development, training http://mkblog.exadel.com http://twitter.com/maxkatzAuthor of Practical RichFaces (Apress)
![Page 4: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/4.jpg)
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
![Page 5: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/5.jpg)
RichFaces1. JSF-AJAX components (100+)2. Skins3. CDK (Component Development Kit)
![Page 6: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/6.jpg)
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.
![Page 7: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/7.jpg)
JBoss Tools
![Page 8: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/8.jpg)
Basic Concepts and More1.Sending AJAX request2.Partial view (page) rendering3.Partial view processing
![Page 9: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/9.jpg)
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
![Page 10: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/10.jpg)
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
![Page 11: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/11.jpg)
<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
![Page 12: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/12.jpg)
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>
![Page 13: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/13.jpg)
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>
![Page 14: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/14.jpg)
Partial View RenderingPoint reRender to component id's to be
renderedUse a4j:outputPanel to include
components always to be rendered
![Page 15: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/15.jpg)
<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
![Page 16: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/16.jpg)
<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
![Page 17: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/17.jpg)
Partial View ProcessingUse ajaxSingle attributeUse <a4j:region>...</a4j:region>
![Page 18: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/18.jpg)
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
![Page 19: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/19.jpg)
<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
![Page 20: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/20.jpg)
More Tags and Concepts1.a4j:repeat2.a4j:queue3.JavaScript interactions
![Page 21: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/21.jpg)
<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
![Page 22: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/22.jpg)
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"/>
![Page 23: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/23.jpg)
<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
![Page 24: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/24.jpg)
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
![Page 25: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/25.jpg)
Upcoming Webinars:May 19th, 2009 – Rich UI Components
(rich:* tag library)June 16th, 2009 - Skins
![Page 26: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/26.jpg)
JSF/RichFaces TrainingOn-site 1-3 daysMore info: http://mkblog.exadel.com
![Page 27: RichFaces: more concepts and features](https://reader033.fdocuments.in/reader033/viewer/2022052505/555e2899d8b42a6a4c8b5065/html5/thumbnails/27.jpg)
RichFaces Demo http://livedemo.exadel.com/richfaces-demo