Post on 22-May-2015
description
© 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
© 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 ProcessingUse ajaxSingle attributeUse <a4j:region>...</a4j:region>
© 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
RichFaces Demohttp://livedemo.exadel.com/richfaces-demo
© Exadel
JSF/RichFaces TrainingOn-site 1-3 daysMore info: http://mkblog.exadel.com
© Exadel
Future Webinars:April 21st, 2009 – More Concepts and
FeaturesMay 19st, 2009 – Rich UI ComponentsJune 16th, 2009 - Skins