You are on page 1of 21

RichFaces

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.

Today, both are part of the JBoss suite


Open source. Ajax4jsf included in Richfaces (september 2007).

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

How to send a request?


RichFaces has three tags used to fire an Ajax request.
<a4j:commandButton> <a4j:commandLink> <a4j:support>

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 Request Processing Flow

RichFaces
Copyright Lund&Bendsen A/S

11

Ajax4jsf Request Processing


The upper sequence diagram shows an ordinary JSF call, the lower an Ajax call. The Ajax filter intercepts the request and passes it to the JSF servlet but makes sure to tell it to use the RichFaces render kit. If resources (CSS, JavaScript etc.) are required, the render kit loads these through a Resource Builder.

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

Action Components (1/3)


The so called Action Components are used to send Ajax requests from the client side. There are four of these:
AjaxCommandButton: renders a button for submitting a form. AjaxCommandLink: renders a link for submitting a form. AjaxCommandSupport: delivers Ajax support for existing elements (such as e.g. input fields). AjaxPoll: sends periodic Ajax requests to the server.

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

Action Components (2/3)


Only the top <h:inputText> Will be sent with the request:

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

Action Components (3/3)


It is possible to integrate custom JavaScript with these components using these two attributes:
onsubmit: JavaScript code to execute before the form is sent (e.g. for checking request parameters client side). oncomplete: JavaScript code to execute after the Ajax response has returned (e.g. for post-processing the response).
<a4j:outputPanel id="panel"> <h:form> <h:selectOneMenu value="#{bean.text}"> <f:selectItem itemValue="Danmark" itemLabel="Danmark"/> <f:selectItem itemValue="Norge" itemLabel="Norge"/> <f:selectItem itemValue="Sverige" itemLabel="Sverige"/> <a4j:support event="onchange" reRender="panel" onsubmit="if(!confirm(Are you sure that you want to switch country?')) {form.reset(); return false;}" oncomplete="alert(The value was saved server-side!')"/> </h:selectOneMenu> <br/> <h:outputText value="#{bean.text}"/> </h:form>
RichFaces
Copyright Lund&Bendsen A/S

18

AjaxCommandButton and AjaxCommandLink


The two JSF tags <h:commandButton> and <h:commandLink> have RichFaces counterparts called <a4j:commandButton> and <a4j:commandLink>. The new components work like (and extend) the existing except that they send Ajax requests instead of ordinary requests. Note that command links should be used inside the tag <a4j:form> instead of the traditional JSF tag <h:form>. The reason for this is that <a4j:form> contains hidden fields that command links need to work properly.

RichFaces
Copyright Lund&Bendsen A/S

19

Decoration with AjaxCommandSupport


The tag <a4j:support> delivers Ajax support for existing JSF tags. The attribute event tells RichFaces during what circumstances the call should be executed. The developer simply nests <a4j:support> in an existing tag:
<h:inputText value="#{bean.text}"> <a4j:support event="onkeyup" reRender="repeater"/> </h:inputText> <h:outputText id="repeater" value="#{bean.text}"/>

becomes...
<input onkeyup="A4J.AJAX.Submit( Nogle requestparametre ) value=Vrdi fra bnnen />

It is also possible to create and use the element programmatically:


org.ajax4jsf.ajax.html.HtmlAjaxSupport mySupport = new org.ajax4jsf.ajax.html.HtmlAjaxSupport(); mySupport.setParent(inputElement); // The UI-element to be ajaxified
RichFaces
Copyright Lund&Bendsen A/S

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

Optimizing performance using regions


Using regions, certain tricks are useful to speed things up a little. If the attribute selfRendered=true is set on the region, RichFaces renders the output to be sent to the client directly from the JSF component tree without checking the JSP page (or XHTML for Facelets).
This gives a substantial performance boost. The drawback of this approach is that contents of the region which is not part of the component tree (HTML tags, JSF tags marked as transient) will not be part of the response. This is fixed by encapsulating these contents in <a4j:outputPanel>, making them effectively a part of the component tree.

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>

3. Re-render the included to show the current page

1. Include the first page Included page (first.jsp):


... <a4j:commandButton action="next" reRender="wizard"/> ...

faces-config.xml

<navigation-rule> <from-view-id>/pages/include/first.jsp</from-view-id> <navigation-case> <from-outcome>next</from-outcome> <to-view-id>/pages/include/second.jsp</to-view-id> </navigation-case> </navigation-rule>

2. Go to next page in the wizard

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

External CSS, JS and bundles


RichFaces includes functionality for loading external styles, JavaScript and resource bundles using Ajax. By using the tags <a4j:loadStyle>, <a4j:loadScript> and <a4j:loadBundle> it is possible to fetch these resources during page load and use them once they are loaded. Programmatically, the classes HtmlLoadStyle, HtmlLoadScript og AjaxLoadBundle provide this functionality.
RichFaces
Copyright Lund&Bendsen A/S

35

RichFaces keepalive: extended request


If there is a need to save a bean beyond the scope of the request (but not in session), the tag <a4j:keepAlive> provides this functionality. If this tag is present in a page, the bean instance is saved in the JSF component trees view state and can then be accessed from several pages (as long as they all include <a4j:keepAlive>). The tag has two attributes:
beanName: the name of the bean. ajaxOnly: if this is set to true, the bean will only be loaded in Ajax requests (and not ordinary requests).

Example:

<a4j:keepAlive beanName="person" /> <h:outputText value="Name:"/> <h:outputText value="#{person.name}"/>

RichFaces
Copyright Lund&Bendsen A/S

36

Status indicator for Ajax requests (1/2)


With the tag <a4j:status> the user can be notified of the state of a current Ajax request. Programmatically, the class HTMLAjaxStatus is used:
org.ajax4jsf.ajax.html.HtmlAjaxStatus myStatus = new org.ajax4jsf.ajax.html.HtmlAjaxStatus();

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

Status indicator for Ajax requests (2/2)


There are three ways to link <a4j:status> to the components whose requests the status component should observe:
by placing <a4j:status> within an Ajax Container the status component will then observe the container. by using the attribute for on the status component to indicate which component should be observed. by setting the attribute status on an Action Component to the id of the status component. startText/stopText: the text to be shown at activity and no activity respectively (see the previous slide). startStyle/stopStyle: the CSS style the above text should use. startStyleClass/stopStyleClass: the CSS class the above text should use. layout: how the status text should be rendered either block or inline.

Furthermore, the following attributes can be used on <a4j:status>:


Example of rendering the status component:


<a4j:status startText="Started" stopText="stopped" layout="block"/>

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

The RichFaces log


To receive debug information about the state of the client, use the tag <a4j:log>. The tag is simply inserted in the page and then generates JavaScript which the user can activate with Ctrl + Shift + L. This opens a popup window with debug information about the JavaScript objects. The log can be added to a page programmatically in this way:
org.ajax4jsf.ajax.html.AjaxLog myLog = new org.ajax4jsf.ajax.html.AjaxLog();

There are a number of attributes to use with the log element:


level: the log level (FATAL, ERROR, WARN, INFO, DEBUG, ALL default: ALL). width/height: dimensions of the popup window. hotkey: the key to use with Ctrl + Shift (default: L). popup: whether the log should be rendered as a popup or div on the page(default:true). name: name of the popup window.
RichFaces
Copyright Lund&Bendsen A/S

39

Advanced components (1/3)


Due to RichFaces legacy (i.e. being a merge of two products, the basic Ajax4jsf and the expansion RichFaces), there are basically two sets of components. We have been focusing on the basic (Ajax4jsf) components in these slides, since these are adequate for everyday usage and describe the features of the architecture very well. However, there is another suite of more advanced components available for specialized demands. These components are usually prefixed with rich instead of the usual a4j.
RichFaces
Copyright Lund&Bendsen A/S

40

Advanced components (2/3)


A few of the advanced components available in RichFaces:
Drag n drop components: drag n drop support through the JavaScript library script.aculo.us. DataTables: avanced expansions upon the basic repeat components. Panels: data layout in an easy manner. Tree structures: menu functionality with a great overview. Context menus: custom right-click menus on pages. Suggestion boxes: text boxes with a built-in suggestion algorithm (think Google Suggest). Gmaps: direct Google Maps usage in the application. jQuery: support for the popular jQuery JavaScript library.
RichFaces
Copyright Lund&Bendsen A/S

41

Advanced components (3/3)


<rich:gmap ... /> <rich:gmap ... /> <rich:listShuttle ... /> <rich:listShuttle ... />

<rich:dataTable ... /> <rich:dataTable ... />

<rich:editor ... /> <rich:editor ... />

<rich:toolTip ... /> <rich:toolTip ... />


RichFaces
Copyright Lund&Bendsen A/S

<rich:tree ... /> <rich:tree ... />

42

You might also like