Introduction to RichFaces
Upcoming SlideShare
Loading in...5
×
 

Introduction to RichFaces

on

  • 10,571 views

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

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

Statistics

Views

Total Views
10,571
Views on SlideShare
3,215
Embed Views
7,356

Actions

Likes
0
Downloads
104
Comments
0

11 Embeds 7,356

http://mkblog.exadel.com 7323
http://planet.jboss.org 11
http://translate.googleusercontent.com 10
http://webcache.googleusercontent.com 3
http://maxkatz.sys-con.com 2
http://www.springone2gx.com 2
https://websphere.sys-con.com 1
http://www.nfjsone.com 1
http://www.jsfsummit.com 1
http://projectautomationexperience.com 1
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to RichFaces Introduction to RichFaces Presentation Transcript

  • JBoss RichFaces Webinar Series Introduction to RichFaces Webinar #1 Max Katz Charley Cowens © Exadel
  • Future Webinars: April 21st, 2009 – More Concepts and Features May 19st, 2009 – Rich UI Components June 16th, 2009 - Skins © Exadel
  • About Me Senior Systems Engineer RIA strategy, development, training http://mkblog.exadel.com Practical RichFaces (Apress) © Exadel
  • 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
  • RichFaces is JSF Framework JavaServer Faces is: • Standard technology in Java EE • Framework for building Web applications out of UI components © Exadel
  • © 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 – component-level AJAX support © Exadel
  • 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 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
  • 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
  • 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 • a4j:poll – periodically send AJAX request • a4j:jsFunction – AJAX request from any custom JavaScript function • a4j:push – a ping-like request © Exadel
  • 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
  • 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
  • Partial View Rendering Point reRender to component id's to be rendered Use a4j:outputPanel to include components always to be rendered © Exadel
  • <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
  • 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" ajaxSingle="true"> </<h:selectOneMenu> Using a4j:region <a4j:region> <h:inputText /> <a4j:commandButton /> </a4j:region> <h:inputText © Exadel
  • What We Covered Installing Basic Concepts: 1.Sending an AJAX request 2.Partial view rendering 3.Partial view processing © Exadel
  • 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 - Skins © Exadel
  • Thank You. Questions? mkatz@exadel.com http://mkblog.exadel.com © Exadel