Introduction to RichFaces
-
Upload
max-katz -
Category
Technology
-
view
9.926 -
download
0
description
Transcript of Introduction to RichFaces
![Page 1: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/1.jpg)
© Exadel
JBoss RichFacesWebinar Series
Introduction to RichFacesWebinar #1
Max KatzCharley Cowens
![Page 2: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/2.jpg)
© Exadel
Future Webinars:April 21st, 2009 – More Concepts and
FeaturesMay 19st, 2009 – Rich UI ComponentsJune 16th, 2009 - Skins
![Page 3: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/3.jpg)
© Exadel
About MeSenior Systems EngineerRIA strategy, development, traininghttp://mkblog.exadel.comPractical RichFaces (Apress)
![Page 4: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/4.jpg)
© Exadel
The PlanIntroduce RichFacesExampleHow To InstallBasic Concepts:
1.Sending an AJAX request2.Partial view rendering3.Partial view processing
Questions
![Page 5: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/5.jpg)
© Exadel
RichFaces is JSF FrameworkJavaServer Faces is:• Standard technology in Java EE• Framework for building Web
applications out of UI components
![Page 6: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/6.jpg)
© Exadel
![Page 7: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/7.jpg)
© Exadel
RichFaces1. JSF-AJAX components (100+)2. Skins3. CDK (Component Development Kit)
![Page 8: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/8.jpg)
© Exadel
JSF-AJAX ComponentsOver 100 ready-to-use JSF AJAX
componentsTwo tag libraries• a4j – page-level AJAX support• rich – component-level AJAX support
![Page 9: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/9.jpg)
© Exadel
Skins (Themes)Change the look-and-feel of pages on the flyCreate custom skins
![Page 10: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/10.jpg)
© Exadel
CDKFacility for creating, generating and
testing your own rich JSF components
![Page 11: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/11.jpg)
© Exadel
JBoss Tools
![Page 12: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/12.jpg)
© Exadel
Let's build something.
![Page 13: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/13.jpg)
© 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>
![Page 14: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/14.jpg)
© 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.
![Page 15: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/15.jpg)
© Exadel
Basic Concepts1.Sending AJAX request2.Partial view (page) rendering3.Partial view processing
![Page 16: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/16.jpg)
© 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
![Page 17: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/17.jpg)
© 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>
![Page 18: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/18.jpg)
© 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
![Page 19: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/19.jpg)
© Exadel
Partial View RenderingPoint reRender to component id's to be
renderedUse a4j:outputPanel to include
components always to be rendered
![Page 20: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/20.jpg)
© 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
![Page 21: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/21.jpg)
© Exadel
Partial View ProcessingUse ajaxSingle attributeUse <a4j:region>...</a4j:region>
![Page 22: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/22.jpg)
© 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
![Page 23: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/23.jpg)
© Exadel
What We CoveredInstallingBasic Concepts:
1.Sending an AJAX request2.Partial view rendering3.Partial view processing
![Page 24: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/24.jpg)
© Exadel
RichFaces Demohttp://livedemo.exadel.com/richfaces-demo
![Page 25: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/25.jpg)
© Exadel
JSF/RichFaces TrainingOn-site 1-3 daysMore info: http://mkblog.exadel.com
![Page 26: Introduction to RichFaces](https://reader034.fdocuments.in/reader034/viewer/2022052301/555e581dd8b42ad74a8b5237/html5/thumbnails/26.jpg)
© Exadel
Future Webinars:April 21st, 2009 – More Concepts and
FeaturesMay 19st, 2009 – Rich UI ComponentsJune 16th, 2009 - Skins