Introduction to RichFaces

© Exadel

JBoss RichFacesWebinar Series

Introduction to RichFacesWebinar #1

Max KatzCharley Cowens

© Exadel

Future Webinars:April 21st, 2009 – More Concepts and

FeaturesMay 19st, 2009 – Rich UI ComponentsJune 16th, 2009 - Skins

© Exadel

About MeSenior Systems EngineerRIA strategy, development, traininghttp://mkblog.exadel.comPractical RichFaces (Apress)

© Exadel

The PlanIntroduce RichFacesExampleHow To InstallBasic Concepts:

1.Sending an AJAX request2.Partial view rendering3.Partial view processing

Questions

© Exadel

RichFaces is JSF FrameworkJavaServer Faces is:• Standard technology in Java EE• Framework for building Web

applications out of UI components

© Exadel

RichFaces1. JSF-AJAX components (100+)2. Skins3. CDK (Component Development Kit)

© Exadel

JSF-AJAX ComponentsOver 100 ready-to-use JSF AJAX

componentsTwo tag libraries• a4j – page-level AJAX support• rich – component-level AJAX support

© Exadel

Skins (Themes)Change the look-and-feel of pages on the flyCreate custom skins

© Exadel

CDKFacility for creating, generating and

testing your own rich JSF components

© Exadel

JBoss Tools

© Exadel

Let's build something.

© Exadel

InstallingDrop RichFaces JAR filesrichfaces-api-X.X.X.jar, richfaces-impl-X.X.X.jar, richfaces-ui-

X.X.X.jar

Filter registration<filter> <display-name>Ajax4jsf Filter</display-name> <filter-name>ajax4jsf</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping> <filter-name>ajax4jsf</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher></filter-mapping>

© Exadel

What You Should KnowRuns in: • Any servlet container, application serverWorks with:• Any JSF implementation (1.1, 1.2, 2.0soon) Works with:• Seam, SpringWorks with any 3rd party components:• Tomahawk, Trinidad etc.

© Exadel

Basic Concepts1.Sending AJAX request2.Partial view (page) rendering3.Partial view processing

© Exadel

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

© Exadel

Sending AJAX Request

<h:selectOneMenu value="#{bean.fruit}"> <a4j:support event="onchange" ajaxSingle="true"></<h:selectOneMenu>

<a4j:commandButton value="AJAX Submit" action="#{echoBean.count}" reRender="echo, count" />

Using a4j:commandButton

Using a4j:support

<h:inputText value="#{bean.fruit}"> <a4j:support event="onblur" action="#{action.save}"></<h:inputText>

© Exadel

<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

© Exadel

Partial View RenderingPoint reRender to component id's to be

renderedUse a4j:outputPanel to include

components always to be rendered

© Exadel

<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:outputPane>

Using reRender

Using reRender to pointto container

Usinga4j:outputPanel

© Exadel

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

Using a4j:region

Using ajaxSingle

© Exadel

What We CoveredInstallingBasic Concepts:

1.Sending an AJAX request2.Partial view rendering3.Partial view processing

© Exadel

Future Webinars:April 21st, 2009 – More Concepts and

FeaturesMay 19st, 2009 – Rich UI ComponentsJune 16th, 2009 - Skins

Introduction to RichFaces

Technology

Transcript of Introduction to RichFaces