Introduction to RichFaces

10,287 views

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
10,287
On SlideShare
0
From Embeds
0
Number of Embeds
7,363
Actions
Shares
0
Downloads
108
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

×