JBoss RichFaces
 Webinar Series
Introduction to RichFaces
       Webinar #1

       Max Katz
    Charley Cowens


       ©...
Future Webinars:
April 21st, 2009 – More Concepts and
  Features
May 19st, 2009 – Rich UI Components
June 16th, 2009 - Ski...
About Me
Senior Systems Engineer
RIA strategy, development, training
http://mkblog.exadel.com
Practical RichFaces (Apress)...
The Plan
Introduce RichFaces
Example
How To Install
Basic Concepts:
  1.Sending an AJAX request
  2.Partial view rendering...
RichFaces is JSF Framework
JavaServer Faces is:
•
  Standard technology in Java EE
•
  Framework for building Web
  applic...
© Exadel
RichFaces
1. JSF-AJAX components (100+)
2. Skins
3. CDK (Component Development Kit)




              © Exadel
JSF-AJAX Components
Over 100 ready-to-use JSF AJAX
  components
Two tag libraries
• a4j – page-level AJAX support
• rich –...
Skins (Themes)
Change the look-and-feel
 of pages on the fly
Create custom skins




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




              © Exadel
JBoss Tools




© Exadel
Let's build something.




       © Exadel
Installing
Drop RichFaces JAR files
richfaces-api-X.X.X.jar, richfaces-impl-X.X.X.jar, richfaces-ui-
   X.X.X.jar

Filter ...
What You Should Know
Runs in:
• Any servlet container, application server
Works with:
• Any JSF implementation (1.1, 1.2, ...
Basic Concepts
1.Sending AJAX request
2.Partial view (page) rendering
3.Partial view processing




               © Exadel
Sending AJAX Request
• a4j:support – add AJAX support to
  any parent component
• a4j:commandButton,
  a4j:commandLink
• a...
Sending AJAX Request
Using a4j:support
<h:inputText value="#{bean.fruit}">
   <a4j:support event="onblur"
                ...
Using a4j:support
                                           with rich components




<rich:listShuttle sourceValue="#{too...
Partial View Rendering
Point reRender to component id's to be
 rendered
Use a4j:outputPanel to include
 components always ...
<a4j:commandLink reRender="id1,id2">
...
                                        Using
<h:outputText id="id1"/>
          ...
Partial View Processing
Use ajaxSingle attribute
Use <a4j:region>...</a4j:region>




              © Exadel
Partial View Processing
Using ajaxSingle
<h:selectOneMenu value="#{bean.fruit}">
   <a4j:support event="onchange"
        ...
What We Covered
Installing
Basic Concepts:
  1.Sending an AJAX request
  2.Partial view rendering
  3.Partial view process...
RichFaces Demo
http://livedemo.exadel.com/richfaces-demo




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




                 © Exadel
Future Webinars:
April 21st, 2009 – More Concepts and
  Features
May 19st, 2009 – Rich UI Components
June 16th, 2009 - Ski...
Thank You.
Questions?
mkatz@exadel.com
http://mkblog.exadel.com




              © Exadel
Upcoming SlideShare
Loading in...5
×

Introduction to RichFaces

9,930

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
9,930
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
106
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to RichFaces

  1. 1. JBoss RichFaces Webinar Series Introduction to RichFaces Webinar #1 Max Katz Charley Cowens © Exadel
  2. 2. Future Webinars: April 21st, 2009 – More Concepts and Features May 19st, 2009 – Rich UI Components June 16th, 2009 - Skins © Exadel
  3. 3. About Me Senior Systems Engineer RIA strategy, development, training http://mkblog.exadel.com Practical RichFaces (Apress) © Exadel
  4. 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. 5. RichFaces is JSF Framework JavaServer Faces is: • Standard technology in Java EE • Framework for building Web applications out of UI components © Exadel
  6. 6. © Exadel
  7. 7. RichFaces 1. JSF-AJAX components (100+) 2. Skins 3. CDK (Component Development Kit) © Exadel
  8. 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. 9. Skins (Themes) Change the look-and-feel of pages on the fly Create custom skins © Exadel
  10. 10. CDK Facility for creating, generating and testing your own rich JSF components © Exadel
  11. 11. JBoss Tools © Exadel
  12. 12. Let's build something. © Exadel
  13. 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. 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. 15. Basic Concepts 1.Sending AJAX request 2.Partial view (page) rendering 3.Partial view processing © Exadel
  16. 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. 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. 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. 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. 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. 21. Partial View Processing Use ajaxSingle attribute Use <a4j:region>...</a4j:region> © Exadel
  22. 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. 23. What We Covered Installing Basic Concepts: 1.Sending an AJAX request 2.Partial view rendering 3.Partial view processing © Exadel
  24. 24. RichFaces Demo http://livedemo.exadel.com/richfaces-demo © Exadel
  25. 25. JSF/RichFaces Training On-site 1-3 days More info: http://mkblog.exadel.com © Exadel
  26. 26. Future Webinars: April 21st, 2009 – More Concepts and Features May 19st, 2009 – Rich UI Components June 16th, 2009 - Skins © Exadel
  27. 27. Thank You. Questions? mkatz@exadel.com http://mkblog.exadel.com © Exadel
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×