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