Más contenido relacionado
La actualidad más candente (20)
Similar a Introduction to RichFaces (20)
Introduction to RichFaces
- 3. About Me
Senior Systems Engineer
RIA strategy, development, training
http://mkblog.exadel.com
Practical RichFaces (Apress)
© Exadel
- 5. RichFaces is JSF Framework
JavaServer Faces is:
•
Standard technology in Java EE
•
Framework for building Web
applications out of UI components
© 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
- 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
- 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
- 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