Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to RichFaces

10,401 views

Published on

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

Published in: Technology
  • These are one of the best companies for review articles. High quality with cheap rates. ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ I highly recommend it :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❶❶❶ http://bit.ly/39sFWPG ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/39sFWPG ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

×