Four part webinar series on RichFaces from 2009. Webinar #1: Introduction to RichFaces

1. JBoss RichFaces
Webinar Series
Introduction to RichFaces
Webinar #1
Max Katz
Charley Cowens
© Exadel

2. Future Webinars:
April 21st, 2009 – More Concepts and
Features
May 19st, 2009 – Rich UI Components
June 16th, 2009 - Skins
© Exadel

3. About Me
Senior Systems Engineer
RIA strategy, development, training
http://mkblog.exadel.com
Practical RichFaces (Apress)
© Exadel

4. The Plan
Introduce RichFaces
Example
How To Install
Basic Concepts:
1.Sending an AJAX request
2.Partial view rendering
3.Partial view processing
Questions
© Exadel

5. RichFaces is JSF Framework
JavaServer Faces is:
•
Standard technology in Java EE
•
Framework for building Web
applications out of UI components
© Exadel

6. © Exadel

7. RichFaces
1. JSF-AJAX components (100+)
2. Skins
3. CDK (Component Development Kit)
© Exadel

8. JSF-AJAX Components
Over 100 ready-to-use JSF AJAX
components
Two tag libraries
• a4j – page-level AJAX support
• rich – component-level AJAX support
© Exadel

9. Skins (Themes)
Change the look-and-feel
of pages on the fly
Create custom skins
© Exadel

10. CDK
Facility for creating, generating and
testing your own rich JSF components
© Exadel

11. JBoss Tools
© Exadel

12. Let's build something.
© Exadel

13. Installing
Drop RichFaces JAR files
richfaces-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

14. What You Should Know
Runs in:
• Any servlet container, application server
Works with:
• Any JSF implementation (1.1, 1.2, 2.0soon)
Works with:
• Seam, Spring
Works with any 3rd party components:
• Tomahawk, Trinidad etc.
© Exadel

15. Basic Concepts
1.Sending AJAX request
2.Partial view (page) rendering
3.Partial view processing
© Exadel

16. 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

17. Sending AJAX Request
Using a4j:support
<h:inputText value="#{bean.fruit}">
<a4j:support event="onblur"
action="#{action.save}">
</<h:inputText>
<h:selectOneMenu value="#{bean.fruit}">
<a4j:support event="onchange"
ajaxSingle="true">
</<h:selectOneMenu>
Using a4j:commandButton
<a4j:commandButton value="AJAX Submit"
action="#{echoBean.count}"
reRender="echo, count" />
© Exadel

18. Using a4j:support
with rich components
<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>
© Exadel

19. Partial View Rendering
Point reRender to component id's to be
rendered
Use a4j:outputPanel to include
components always to be rendered
© Exadel

20. <a4j:commandLink reRender="id1,id2">
...
Using
<h:outputText id="id1"/>
reRender
<h:dataTable id="id2">
...
</h:dataTable>
<a4j:commandLink reRender="panel">
... Using
<h:panelGrid id="panel"> reRender to
point
<h:outputText /> to container
<h:dataTable>..</h:dataTable>
</h:panelGrid>
<a4j:commandLink>
Using
...
a4j:outputPanel
<a4j:outputPanel ajaxRendered="true">
<h:outputText />
<h:dataTable>..</h:dataTable>
<a4j:outputPane>
© Exadel

21. Partial View Processing
Use ajaxSingle attribute
Use <a4j:region>...</a4j:region>
© Exadel

22. Partial View Processing
Using ajaxSingle
<h:selectOneMenu value="#{bean.fruit}">
<a4j:support event="onchange"
ajaxSingle="true">
</<h:selectOneMenu>
Using a4j:region
<a4j:region>
<h:inputText />
<a4j:commandButton />
</a4j:region>
<h:inputText
© Exadel

23. What We Covered
Installing
Basic Concepts:
1.Sending an AJAX request
2.Partial view rendering
3.Partial view processing
© Exadel

24. RichFaces Demo
http://livedemo.exadel.com/richfaces-demo
© Exadel

25. JSF/RichFaces Training
On-site 1-3 days
More info: http://mkblog.exadel.com
© Exadel

26. Future Webinars:
April 21st, 2009 – More Concepts and
Features
May 19st, 2009 – Rich UI Components
June 16th, 2009 - Skins
© Exadel

27. Thank You.
Questions?
mkatz@exadel.com
http://mkblog.exadel.com
© Exadel