03 richfaces

8/3/2019 03 richfaces

http://slidepdf.com/reader/full/03-richfaces 1/21

1RichFacesCopyright © Lund&Bendsen A/S

RichFaces

2 RichFacesCopyright © Lund&Bendsen A/S

• What is RichFaces?

• Using RichFaces

• Architechture

• RichFaces components

RichFaces




What is RichFaces?

• A framework designed to add Ajax-functionality toexisting JSF solutions.

• JSF tags are augmented with additional RichFaces tagsto 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 Enterpriseversion.

• Today, both are part of the JBoss suite– Open source.

– Ajax4jsf included in Richfaces (september 2007).


An example

<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax"

prefix="a4j"%>

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<html>

<head>

<title>Repeater </title></head>

<body>

<f:view>

<h:form><h:inputText size="50" value="#{bean.text}" >

<a4j:support event="onkeyup" reRender="rep"/>

</h:inputText>

<h:outputText value="#{bean.text}" id="rep"/></h:form>

</f:view>

</body>

</html>

<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax"

prefix="a4j"%>

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%><html>

<head>

<title>Repeater </title>

</head><body>

<f:view><h:form>

<h:inputText size="50" value="#{bean.text}" ><a4j:support event="onkeyup" reRender="rep"/>

</h:inputText>

<h:outputText value="#{bean.text}" id="rep"/>

</h:form></f:view>

</body>

</html>

package demo;

public class Bean {

private String text;

public Bean() {}

public void setText(String text) {

this.text = text;

}

public String getText() {

return text;

}

}

package demo;

public class Bean {

private String text;

public Bean() {}

public void setText(String text) {

this.text = text;

}

public String getText() {

return text;

}

}





• Using RichFaces

• Architechture


RichFaces


Configuring RichFaces

• Three jar files must be present in the folder WEB-INF/lib – these can befound in the RichFaces distribution in the folder lib.

• Also, a filter must be registered in web.xml (the three dispatcher linesare only relevant for Servlet 2.5+):

• Finally, the relevant JSP pagesmust include the Ajax4jsf tag library(for core Ajax functionality) andRichFaces tag library (for widgets):

• Or xhtml pages/Facelets:

<filter>

<display-name>RichFaces Filter</display-name>

<filter-name>richfaces</filter-name>

<filter-class>org.ajax4jsf.Filter</filter-class>

</filter>

<filter-mapping><filter-name>richfaces</filter-name>

<servlet-name>Faces Servlet</servlet-name>

<dispatcher>REQUEST</dispatcher>

<dispatcher>FORWARD</dispatcher><dispatcher>INCLUDE</dispatcher>

</filter-mapping>

<filter>

<display-name>RichFaces Filter</display-name>

<filter-name>richfaces</filter-name>

<filter-class>org.ajax4jsf.Filter</filter-class>

</filter>

<filter-mapping><filter-name>richfaces</filter-name>

<servlet-name>Faces Servlet</servlet-name>

<dispatcher>REQUEST</dispatcher>

<dispatcher>FORWARD</dispatcher>

<dispatcher>INCLUDE</dispatcher>

</filter-mapping><%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%><%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>

<html xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"><html xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">

w e b. x m l w e b. x m l




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><h:outputText value="#{bean.text}" id="rep"/>



</h:inputText>



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 relevantcontents in <a4j:region> tags.

• Several <a4j:region> tags can be present in a

page – and they can be nested if required.




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>


<h:inputText size="50" value="#{bean.text}" ><a4j:support event="onkeyup" reRender="rep"/>

</h:inputText>




• Using RichFaces

• Architechture


RichFaces




RichFaces Request Processing Flow


Ajax4jsf Request Processing

• The upper sequencediagram shows anordinary JSF call, thelower an Ajax call.

• The Ajax filter interceptsthe request and passes it to

the JSF servlet– but makessure to tell it to use theRichFaces render kit.

• If resources (CSS,JavaScript etc.) arerequired, the render kitloads these through aResource Builder.




Resource requests• RichFaces has a

Resource Cache, usedfor saving resources.

• During a request for aresource theAjaxFilter will initiallysearch this cache. If itdoes not find anything,it will examine if theresource is registeredwith the ResourceBuilder, and if so ask itto fetch the resource.



• Using RichFaces

• Architechture


RichFaces




RichFaces components• RichFaces offer a wide array of components that

supplement – and in some cases replace – the existingHTML components in JSF.

• Just as in JSF, there are general UI componentsextending JSF’s UI components, and more specificHTML components – extending the RichFaces UIcomponents.


Action Components (1/3)

• The so called Action Components are used to send Ajaxrequests 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 existingelements (such as e.g. input fields).

– AjaxPoll: sends periodic Ajax requests to the server.

• All four extend the classorg.ajax4jsf.framework.ajax.AjaxActionComponent(which in turn extends

javax.faces.component.UICommand).




Action Components (2/3)• By using attributes on the Action

Components, it is possible tocontrol how much is sent withthe request – and what is updatedby the response:– ajaxSingle: this attribute defines

that only that specificcomponent is sent with therequest.

– reRender: a comma separatedlist of components to berendered from the response.

– limitToList: this means that onlycomponents from the above listwill be re-rendered – and note.g. regions with the attributeajaxRendered set to true (wewill get to this later).

<h:form>

<h:inputText value="#{person.name}" >

<a4j:support event="onkeyup" reRender="test"

ajaxSingle="true"/>

</h:inputText>

<h:inputText value="#{person.middleName}"/>

</h:form>

<h:form>

<h:inputText value="#{person.name}" >


ajaxSingle="true"/>

</h:inputText>

<h:inputText value="#{person.middleName}"/>

</h:form>

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

<h:form>

<a4j:outputPanel ajaxRendered="true">

<h:messages/></a4j:outputPanel>

<h:inputText value="#{person.name}">


limitToList="true"/>

</h:inputText>

<h:outputText value="#{person.name}" id="test"/>

</h:form>

<h:form>

<a4j:outputPanel ajaxRendered="true">

<h:messages/></a4j:outputPanel>

<h:inputText value="#{person.name}"><a4j:support event="onkeyup" reRender="test"

limitToList="true"/>

</h:inputText>

<h:outputText value="#{person.name}" id="test"/>

</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.


Action Components (3/3)

• It is possible to integrate custom JavaScript with these componentsusing these two attributes:

– onsubmit: JavaScript code to execute before the form is sent (e.g. forchecking request parameters client side).

– oncomplete: JavaScript code to execute after the Ajax response hasreturned (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>




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 ordinaryrequests.

• 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 hiddenfields that command links need to work properly.


Decoration with AjaxCommandSupport

• The tag <a4j:support> delivers Ajax support for existing JSF tags.

• The attribute event tells RichFaces during what circumstances the callshould be executed.

• The developer simply ”nests” <a4j:support> in an existing tag:

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

<h:inputText value="#{bean.text}">

<a4j:support event="onkeyup" reRender="repeater"/>

</h:inputText>

<h:outputText id="repeater" value="#{bean.text}"/>

org.ajax4jsf.ajax.html.HtmlAjaxSupport mySupport =

new org.ajax4jsf.ajax.html.HtmlAjaxSupport();

mySupport.setParent(inputElement); // The UI-element to be ”ajaxified”

<input onkeyup="A4J.AJAX.Submit( Nogle requestparametre )” value=”Værdi fra bønnen” />

becomes...




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 regularintervals. Using polling it is possible to create e.g. a counter which isupdated 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();


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;

}

}

<script type="text/javascript">

//<![CDATA[A4J.AJAX.Poll(

'_viewRoot','_id1',

{'pollId':'_id1:picker','parameters':

{'_id1:picker':'_id1:picker'},'timeout':

1000,'pollinterval':1000});

//]]>

</script>

becomes:




Polling ( 3/3 )

• The element <a4j:poll> includes the followingattributes (among others): – action: the method to execute between each interval.

– reRender : list of id’s of components to be re-renderedafter the action method has been called.

– interval: number of milli seconds before the actionmethod is called again (default: 1000).

– enabled: whether the component should supportpolling or not. Can be set using Expression Language,and thus switched programmatically.


Limiting requests

• Since Ajax is asynchronous, a situation might occur during a long transaction wheremultiple 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/reponsesbeing 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, thecomponent 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 beenprocessed, 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>




Ajax Containers

• Ajax Containers represent areas decoded inthe JSF life cycle during an Ajax request.

• RichFaces deal with two primary types of Ajax Containers – namely AjaxViewRoot,representing the whole JSF view (extendingthe JSF UIViewRoot), and AjaxRegions,

representing parts of the view.


Regions

• In general, data being sent in a RichFaces request will bedelimited by a form tag (<a4j:form> or <h:form>).

• When the server receives the request, the contents of itwill be decoded by the Faces servlet, which leads the JSFcomponent 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 reasonableamount of resources. The tag <a4j:region> is useful fordelimiting the number of components to decode,reducing the performance hit.

• Note that the entire contents of the form is still sent inthe request (and received in the response) – but only theregion is processed.

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 theoutput to be sent to the client directly from the JSF component tree withoutchecking 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) willnot be part of the response.

– This is fixed by encapsulating these contents in <a4j:outputPanel>, making themeffectively a part of the component tree.

• The attribute renderRegionOnly can be used to control whether componentsthat are part of the form – but outside of the region – can be updated.

– The default is false, which will make RichFaces examine the request forcomponents outside the region that are referenced by components inside it – whichwould 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 willnot be updatedby an Ajax request sent from a component within the region. This behavior isslightly faster.


Nested regions

• Regions can be nested within each other.

• However, only the region containing the componentsending the Ajax request will be decoded.

• In the below example a click on Link 1 will lead to theinner region being decoded – as expected. Clicking Link 2, however, will only decode the outer region og not theinner!

<a4j:region>

<a4j:commandLink reRender="someID" value="Link 2" id="link2"/>

<a4j:region>

<a4j:commandLink reRender="someID" value="Link 1" id="link1"/>



</a4j:region >



</a4j:region >




Output Components

• RichFaces offers certain components to

render output.

• These components are output panels and

includes, both implementing the interface

AjaxOutput.


Output panels

• Output panels ”ajaxify” a part of the page and makes this part sensitive tochanges in the surrounding Ajax Container (region or view root).

• Transient contents (raw HTML or the JSF <verbatim> tag), which usually isnot 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 classHtmlAjaxOutputPanel.

• The tag generated a <span> or <div> tag in the client – depending on the valueof the attribute layout .

• Two attributes are especially important in regards to output panels (and outputcomponents in general):

– ajaxRendered: this indicates that the contents of the panelmust be re-renderedwhen the container is sent in an Ajax request, even if no component has asked it tobe re-rendered. This flag is typically used when an area can be updated for a slewof reasons. Default is false.

– keepTransient: this tag indicates that transient contents should not be savedanyway, resulting in the contents being re-rendered every time.




Includes ( 1/2 )

• The tag <a4j:include> performs an Ajax include – i.e., aview (a JSP page or equivalent) is included in theexisting page using Ajax.

• It is a pretty simple task to create e.g. Wizardfunctionality using includes and keepalive (keepalivewill 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 theincluded area. This very behavior makes the tag such agood choice for wizards, since only a part of the wholepage is altered.


Includes ( 2/2 )

• Example using include:

<h:panelGroup id="wizard">

<a4j:include viewId="/pages/include/first.jsp" />

</h:panelGroup>

Including page:

...

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

...

Included page (first.jsp):

<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>

faces-config.xml

2. Go to next page in thewizard

3. Re-render theincluded to showthe current page

1. Include the first page




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 Ajaxif necessary.

• The attribute ajaxKeys receives a java.util.Set, containing the id’s of the rows to be updated. Once the repeater is re-rendered, thecorresponding 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>


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 keepalive: ” extended request ”

• If there is a need to save a bean beyond the scope of therequest (but not in session), the tag <a4j:keepAlive>provides this functionality.

• If this tag is present in a page, the bean instance is savedin the JSF component tree’s view state and can then beaccessed 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 Ajaxrequests (and not ordinary requests).

• Example: <a4j:keepAlive beanName="person" />

<h:outputText value="Name:"/>

<h:outputText value="#{person.name}"/>


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:

• The element has attributes representing text and style to be shown at start (Ajax transferin progress) and stop (no Ajax request being processed currently), respectively – theseare 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>

org.ajax4jsf.ajax.html. HtmlAjaxStatus myStatus = new

org.ajax4jsf.ajax.html.HtmlAjaxStatus();




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.

• Furthermore, the following attributes can be used on <a4j:status>:– 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”.

• Example of rendering the status component:

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

<span id="j_id20:status.start”

style="display: none">

Started

</span>

<span id="j_id20:status.stop">

Stopped

</span>

<span id="j_id20:status.start”>

Started

</span>

<span id="j_id20:status.stop"

style="display: none">

Stopped

</span>

Before request: During request:


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 theuser can activate with Ctrl + Shift + L. This opens a popup window withdebug information about the JavaScript objects.

• The log can be added to a page programmatically in this way:

• 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 thepage(default:true).

– name: name of the popup window.

org.ajax4jsf.ajax.html. AjaxLog myLog = new org.ajax4jsf.ajax.html.AjaxLog();




Advanced components (1/3)

• Due to RichFaces’ legacy (i.e. being a merge of twoproducts, the basic Ajax4jsf and the expansionRichFaces), there are basically two sets of components.

• We have been focusing on the basic (Ajax4jsf)components in these slides, since these are adequate foreveryday usage and describe the features of thearchitecture very well. However, there is another suite of more advanced components available for specializeddemands.

• These components are usually prefixed with rich insteadof the usual a4j.


Advanced components (2/3)

• A few of the advanced components available inRichFaces:– 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 suggestionalgorithm (think Google Suggest).

– Gmaps: direct Google Maps usage in the application.

– jQuery: support for the popular jQuery JavaScript library.




Advanced components (3/3)<rich:gmap ... /><rich:gmap ... />

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

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

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

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

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

03 richfaces

Documents

Transcript of 03 richfaces