JBoss RichFaces Webinar Series Rich UI Components (rich:* Tag Library) Webinar #3 Max Katz Charley Cowens © Exadel
May 22, 2015
JBoss RichFacesWebinar Series
Rich UI Components(rich:* Tag Library)
Webinar #3
Max KatzCharley Cowens
© Exadel
Upcoming Webinars:June 16th, 2009 - Skins
Who Is This Guy?Senior Systems EngineerRIA strategy, development, training http://mkblog.exadel.com http://twitter.com/maxkatz
Author ofPractical RichFaces(Apress)
Co-author ofRichFacesDzoneRefCard
The PlanReview what we have done so farComponents from rich:* tag libraryWhat's new in version 3.3.1Future plansQuestions
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 requests2.Partial view (page) rendering3.Partial view processing4.Controlling traffic
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
Partial View RenderingPoint reRender to component IDs to be rendered
• Bind to EL to decide in runtimeUse a4j:outputPanel to mark areas on a view 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>
reRender withEL
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
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"/>
Rich UI Componentsrich:* tag librarySelf-contained, ready-to-use rich UI controlsOver 80 components
Types of ComponentsOutputInputData iteration (incl. scrolling, spanning)Drag-and-dropMenuSelectsTreesMiscellaneous
RichFaces 3.3.1Released May 18th, 2009rich:colorPickerrich:pagerich:layout, rich:layoutPanelthemes - predefined and packaged layouts
Header
header
footer
sid
eb
ar
rich:page
subheader
top
center
top
bottom
left right
rich:layout, rich:layoutPanel
RichFaces Demo http://livedemo.exadel.com/richfaces-demo
RichFaces 4.0Full integration with JSF 2.0Updated for redesigned for consistency, performanceRelease schedule (2009): Alpha June
Beta August
CR September
GA October
http://www.jboss.org/community/wiki/RichFaces40Planning
What We CoveredReviewed basic conceptsRich UI componentsWhat's new in RichFaces 3.3.1RichFaces 4.0 plans
Upcoming Webinars:June 16th, 2009 - Skins
JSF/RichFaces TrainingOn-site 1-3 daysMore info: http://mkblog.exadel.com
Thank You. [email protected]://mkblog.exadel.com