Professional Documents
Culture Documents
RichFaces
Copyright Lund&Bendsen A/S
RichFaces
What is RichFaces? Using RichFaces Architechture RichFaces components
RichFaces
Copyright Lund&Bendsen A/S
What is RichFaces?
A framework designed to add Ajax-functionality to existing JSF solutions. JSF tags are augmented with additional RichFaces tags to provide this special functionality. Developed by Exadel
Used to be split into Ajax4jsf (free version) and RichFaces (paid version). Ajax4JSF was the basic suite, while Richfaces was the Enterprise version.
RichFaces
Copyright Lund&Bendsen A/S
An example
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%> prefix="a4j"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <html> <html> <head> <head> <title>Repeater </title> <title>Repeater </title> </head> </head> <body> <body> <f:view> <f:view> <h:form> <h:form> <h:inputText size="50" value="#{bean.text}" >> <h:inputText size="50" value="#{bean.text}" <a4j:support event="onkeyup" reRender="rep"/> <a4j:support event="onkeyup" reRender="rep"/> </h:inputText> </h:inputText> <h:outputText value="#{bean.text}" id="rep"/> <h:outputText value="#{bean.text}" id="rep"/> </h:form> </h:form> </f:view> </f:view> </body> </body> </html> </html>
RichFaces
Copyright Lund&Bendsen A/S
package demo; package demo; public class Bean { { public class Bean private String text; private String text; public Bean() {}{} public Bean() public void setText(String text) { { public void setText(String text) this.text ==text; this.text text; }} public String getText() { { public String getText() return text; return text; }}
}}
RichFaces
What is RichFaces? Using RichFaces Architechture RichFaces components
RichFaces
Copyright Lund&Bendsen A/S
Configuring RichFaces
Three jar files must be present in the folder WEB-INF/lib these can be found in the RichFaces distribution in the folder lib. Also, a filter must be registered in web.xml (the three dispatcher lines are only relevant for Servlet 2.5+): <filter>
Finally, the relevant JSP pages must include the Ajax4jsf tag library (for core Ajax functionality) and RichFaces tag library (for widgets):
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%> <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<filter> <display-name>RichFaces Filter</display-name> <display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> </filter> <filter-mapping> <filter-mapping> <filter-name>richfaces</filter-name> <filter-name>richfaces</filter-name> <servlet-name>Faces Servlet</servlet-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> <dispatcher>INCLUDE</dispatcher> </filter-mapping> </filter-mapping> ml
Or xhtml pages/Facelets:
<html xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"> <html xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
RichFaces
Copyright Lund&Bendsen A/S
b.x weeb.xml w
The two first are used to render a button and a link, respectively, with Ajax-functionality. The support tag is used to add functionality to an existing component.
<h:inputText size="50" value="#{bean.text}" >> <h:inputText size="50" value="#{bean.text}" <a4j:support event="onkeyup" reRender="rep"/> <a4j:support event="onkeyup" reRender="rep"/> </h:inputText> </h:inputText> <h:outputText value="#{bean.text}" id="rep"/> <h:outputText value="#{bean.text}" id="rep"/>
RichFaces
Copyright Lund&Bendsen A/S
What is sent?
In general, everything within the <f:form> or <a4j:form>-tag is sent to the server. However, you can work with a higher granularity by encapsulating the relevant contents in <a4j:region> tags. Several <a4j:region> tags can be present in a page and they can be nested if required.
RichFaces
Copyright Lund&Bendsen A/S
What is changed?
The attribute reRender on the RichFaces tags decides what should be altered. The attribute is set to the id of the element that should be changed.
<h:inputText size="50" value="#{bean.text}" >> <h:inputText size="50" value="#{bean.text}" <a4j:support event="onkeyup" reRender="rep"/> <a4j:support event="onkeyup" reRender="rep"/> </h:inputText> </h:inputText> <h:outputText value="#{bean.text}" id="rep"/> <h:outputText value="#{bean.text}" id="rep"/>
RichFaces
Copyright Lund&Bendsen A/S
RichFaces
What is RichFaces? Using RichFaces Architechture RichFaces components
RichFaces
Copyright Lund&Bendsen A/S
10
RichFaces
Copyright Lund&Bendsen A/S
11
RichFaces
Copyright Lund&Bendsen A/S
12
Resource requests
RichFaces has a Resource Cache, used for saving resources. During a request for a resource the AjaxFilter will initially search this cache. If it does not find anything, it will examine if the resource is registered with the Resource Builder, and if so ask it to fetch the resource.
RichFaces
Copyright Lund&Bendsen A/S
13
RichFaces
What is RichFaces? Using RichFaces Architechture RichFaces components
RichFaces
Copyright Lund&Bendsen A/S
14
RichFaces components
RichFaces offer a wide array of components that supplement and in some cases replace the existing HTML components in JSF. Just as in JSF, there are general UI components extending JSFs UI components, and more specific HTML components extending the RichFaces UI components.
RichFaces
Copyright Lund&Bendsen A/S
15
All four extend the class org.ajax4jsf.framework.ajax.AjaxActionComponent (which in turn extends javax.faces.component.UICommand).
RichFaces
Copyright Lund&Bendsen A/S
16
By using attributes on the Action Components, it is possible to control how much is sent with the request and what is updated by the response:
ajaxSingle: this attribute defines that only that specific component is sent with the request. reRender: a comma separated list of components to be rendered from the response. limitToList: this means that only components from the above list will be re-rendered and not e.g. regions with the attribute ajaxRendered set to true (we will get to this later).
<h:form> <h:form> <h:inputText value="#{person.name}" > <h:inputText value="#{person.name}" > <a4j:support event="onkeyup" reRender="test" <a4j:support event="onkeyup" reRender="test" ajaxSingle="true"/> ajaxSingle="true"/> </h:inputText> </h:inputText> <h:inputText value="#{person.middleName}"/> <h:inputText value="#{person.middleName}"/> </h:form> </h:form> The tag <h:messages> would usually be re-renderet, since the attribute ajaxRendered is set to true. However, the attribute limitToList cancels this behavior. <h:form> <h:form> <a4j:outputPanel ajaxRendered="true"> <a4j:outputPanel ajaxRendered="true"> <h:messages/> <h:messages/> </a4j:outputPanel> </a4j:outputPanel> <h:inputText value="#{person.name}"> <h:inputText value="#{person.name}"> <a4j:support event="onkeyup" reRender="test" <a4j:support event="onkeyup" reRender="test" limitToList="true"/> limitToList="true"/> </h:inputText> </h:inputText> <h:outputText value="#{person.name}" id="test"/> <h:outputText value="#{person.name}" id="test"/> </h:form> </h:form>
RichFaces
Copyright Lund&Bendsen A/S
17
18
RichFaces
Copyright Lund&Bendsen A/S
19
becomes...
<input onkeyup="A4J.AJAX.Submit( Nogle requestparametre ) value=Vrdi fra bnnen />
20
Polling (1/3)
Ajax4jsf supports so-called polling periodical dispatchs of requests to the server. This functionality is often used for updating a page with regular intervals. Using polling it is possible to create e.g. a counter which is updated every second with new data from the server. In RichFaces, support for polling is facilitated by the tag <a4j:poll>. Polling can also be implemented programmatically:
org.ajax4jsf.ajax.html.AjaxPoll myPoll ==new org.ajax4jsf.ajax.html.AjaxPoll(); org.ajax4jsf.ajax.html.AjaxPoll myPoll new org.ajax4jsf.ajax.html.AjaxPoll();
RichFaces
Copyright Lund&Bendsen A/S
21
Polling (2/3)
<f:view> <h:outputText value="Auto Counter:" /> <h:outputText id="cnt" value="#{myBean.counter}" /> <h:form> <a4j:poll id="picker" enabled="#{myBean.counter != 5} action="#{myBean.incCounter}" reRender="cnt, reset" interval="1000"/> <h:panelGroup id="reset" > <a4j:commandButton image="/images/counter.gif" reRender="picker, cnt, reset action="#{myBean.resetCounter}" rendered="#{myBean.counter == 5}"/> </h:panelGroup> </h:form> </f:view> public class MyBean { private Integer counter; ... public String incCounter() { counter++; return null; } public String resetCounter() { counter = 0; return null; } }
becomes:
<script type="text/javascript"> //<![CDATA[A4J.AJAX.Poll( '_viewRoot','_id1', {'pollId':'_id1:picker','parameters': {'_id1:picker':'_id1:picker'},'timeout': 1000,'pollinterval':1000}); //]]> </script>
RichFaces
Copyright Lund&Bendsen A/S
22
Polling (3/3)
The element <a4j:poll> includes the following attributes (among others):
action: the method to execute between each interval. reRender: list of ids of components to be re-rendered after the action method has been called. interval: number of milli seconds before the action method is called again (default: 1000). enabled: whether the component should support polling or not. Can be set using Expression Language, and thus switched programmatically.
RichFaces
Copyright Lund&Bendsen A/S
23
Limiting requests
Since Ajax is asynchronous, a situation might occur during a long transaction where multiple requests are sent before a response has been received from the initial request. This is especially the case with code reacting to e.g. events such as keypress. The following attributes are useful to control the amount of Ajax requests/reponses being processed by the page.
requestDelay: minimum amount of milli seconds to pass between requests. timeout: the maximum amount of milli seconds the client will wait for a response. ignoreDupResponses: if an Ajax request has already been sent and awaits a response, the component will not be updated by responses from requests sent in the meanwhile. eventQueue: the name of a queue on which to place requests for a given event (keypress, click etc.). If a request is sent to the queue before a previous request for the same event has been processed, the previous request is cancelled and the new one takes its place in the queue.
<h:form> <h:inputText value="#{person.name}"> <a4j:support event="onkeyup" reRender="test" requestDelay="1000" ignoreDupResponses="true" eventsQueue="myQueue"/> </h:inputText> <h:outputText value="#{person.name}" id="test"/> </form>
RichFaces
Copyright Lund&Bendsen A/S
24
Ajax Containers
Ajax Containers represent areas decoded in the JSF life cycle during an Ajax request. RichFaces deal with two primary types of Ajax Containers namely AjaxViewRoot, representing the whole JSF view (extending the JSF UIViewRoot), and AjaxRegions, representing parts of the view.
RichFaces
Copyright Lund&Bendsen A/S
26
Regions
In general, data being sent in a RichFaces request will be delimited by a form tag (<a4j:form> or <h:form>). When the server receives the request, the contents of it will be decoded by the Faces servlet, which leads the JSF component tree to be updated. Then the response is sent back to the client through the RichFaces renderkit. The decode process, however, does take up a reasonable amount of resources. The tag <a4j:region> is useful for delimiting the number of components to decode, reducing the performance hit. Note that the entire contents of the form is still sent in the request (and received in the response) but only the region is processed.
RichFaces
Copyright Lund&Bendsen A/S
27
The attribute renderRegionOnly can be used to control whether components that are part of the form but outside of the region can be updated.
The default is false, which will make RichFaces examine the request for components outside the region that are referenced by components inside it which would be ignored by the JSF life cycle and decode these with the region. If the attribute is set to true, components outside of the region will not be updated by an Ajax request sent from a component within the region. This behavior is slightly faster.
RichFaces
Copyright Lund&Bendsen A/S
28
Nested regions
Regions can be nested within each other. However, only the region containing the component sending the Ajax request will be decoded. In the below example a click on Link 1 will lead to the inner region being decoded as expected. Clicking Link 2, however, will only decode the outer region og not the inner!
<a4j:region> <a4j:commandLink reRender="someID" value="Link 2" id="link2"/> <a4j:region> <a4j:commandLink reRender="someID" value="Link 1" id="link1"/> <!--.. Some content that will be decoded server-side after the Ajax request.--> </a4j:region > <!--.. Some content that will be decoded server-side after the Ajax request.--> </a4j:region >
RichFaces
Copyright Lund&Bendsen A/S
29
Output Components
RichFaces offers certain components to render output. These components are output panels and includes, both implementing the interface AjaxOutput.
RichFaces
Copyright Lund&Bendsen A/S
30
Output panels
Output panels ajaxify a part of the page and makes this part sensitive to changes in the surrounding Ajax Container (region or view root). Transient contents (raw HTML or the JSF <verbatim> tag), which usually is not saved in the component tree, will be added to the tree anyway for quick access. The tag <a4j:outputPanel> is used for this or the class HtmlAjaxOutputPanel. The tag generated a <span> or <div> tag in the client depending on the value of the attribute layout. Two attributes are especially important in regards to output panels (and output components in general):
ajaxRendered: this indicates that the contents of the panel must be re-rendered when the container is sent in an Ajax request, even if no component has asked it to be re-rendered. This flag is typically used when an area can be updated for a slew of reasons. Default is false. keepTransient: this tag indicates that transient contents should not be saved anyway, resulting in the contents being re-rendered every time.
RichFaces
Copyright Lund&Bendsen A/S
31
Includes (1/2)
The tag <a4j:include> performs an Ajax include i.e., a view (a JSP page or equivalent) is included in the existing page using Ajax. It is a pretty simple task to create e.g. Wizard functionality using includes and keepalive (keepalive will be covered later). Note that navigation rules for the included view will not affect the view being included from, i.e. its view id will not change, and navigation will only occur in the included area. This very behavior makes the tag such a good choice for wizards, since only a part of the whole page is altered.
RichFaces
Copyright Lund&Bendsen A/S
32
Includes (2/2)
Example using include:
Including page:
<h:panelGroup id="wizard"> <a4j:include viewId="/pages/include/first.jsp" /> </h:panelGroup>
faces-config.xml
RichFaces
Copyright Lund&Bendsen A/S
33
Repeater
An easy way to iterate over a collection is to use the tag <a4j:repeat>, which does exactly that and can update rows selectively using Ajax if necessary. The attribute ajaxKeys receives a java.util.Set, containing the ids of the rows to be updated. Once the repeater is re-rendered, the corresponding rows will be updated exclusively. Example:
<a4j:poll interval="1000" action="#{repeater.action}" reRender="list"> ... <table> <a4j:repeat value="#{bean.props}" var="detail binding="#{repeater.myRepeat} id="list" ajaxKeys="#{repeater.ajaxedRowsSet}"> </tr> <td> <h:outputText value=#{detail.someProperty}"> </td> </tr> </a4j:repeat> <table>
RichFaces
Copyright Lund&Bendsen A/S
34
35
Example:
RichFaces
Copyright Lund&Bendsen A/S
36
The element has attributes representing text and style to be shown at start (Ajax transfer in progress) and stop (no Ajax request being processed currently), respectively these are named startText and stopText. Alternatively, JSF facets provide the same effect:
<a4j:status startText="Progress" stopText="Done" for="stat1"> <a4j:status for="stat2"> <f:facet name="start"> <h:graphicImage value="ajax_process.gif" /> </f:facet> <f:facet name="stop"> <h:graphicImage value="ajax_stoped.gif" /> </f:facet> </a4j:status>
RichFaces
Copyright Lund&Bendsen A/S
37
Before request:
<span id="j_id20:status.start style="display: none"> Started </span> <span id="j_id20:status.stop"> Stopped </span>
During request:
<span id="j_id20:status.start> Started </span> <span id="j_id20:status.stop" style="display: none"> Stopped </span>
RichFaces
Copyright Lund&Bendsen A/S
38
39
40
41
42