Create new RichFaces Documentation Jira issue
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.
JBoss.orgCommunity Documentation
The <rich:effect> utilizes a set of effects provided by the Scriptaculous JavaScript library. It allows to attach effects to JSF components and HTML tags.
Represents Scriptaculous JavaScript library functionality
No JavaScript needed to the component
It is possible to use <rich:effect> in two modes:
attached to a JSF component or HTML tag and triggered by a particular event. Wiring effect with JSF components might occur on the server or client. Wiring with html tag is possible only on the client side.
invoking from the JavaScript code by an effect name. During the rendering, <rich:effect> generates the JavaScript function with defined name. When the function is called, the effect is applied
Those a the typical variants of using:
<!-- triggered by an event -->
<rich:panel>
<rich:effect event="onmouseout" type="Opacity" params="duration:0.8,from:1.0,to:0.3" />
...
</rich:panel>
<!-- invoking by JavaScript -->
<div id="contentDiv">...</div>
<input type="button" onclick="hideDiv({duration:0.7})" value="Hide" />
<input type="button" onclick="showDiv()" value="Show" />
<rich:effect name="hideDiv" for="contentDiv" type="Fade" />
<rich:effect name="showDiv" for="contentDiv" type="Appear" />
<!-- attached to a window onload event and applied to a particular page element -->
<rich:effect for="window" event="onload" type="Appear" params="targetId:'contentDiv',duration:0.8,from:0.3,to:1.0" />
The "name" attribute defines a name of the JavaScript function that will be generated on a page after the component is rendered. This function will activate the needed effect. The function accesses one parameter. It is a set of effect options in JSON format.
The "type" attribute defines the type of an effect that will be applied.
Possible values are Fade, Blind, Opacity.
The "for" attribute defines the ID of the component or HTML tag, the effect is attached to. RichFaces converts value of "for" attribute to a component client ID if such component is found. In case if such component is not found the value is left because of possible wirings with some DOM element id on the client side. By default, the target of the effect is the same element that effect is pointed to. Тarget element can be redefined with the "targetId" attribute; new parameters should be passed with the "params" attribute.
The "params" attribute allows to define a set of options (duration, delay, from, to) possible for a particurar effect.
Additionally to the options used by the effect itself, there are two option that might override the <rich:effect>attribute:
"targetId" allows to re-define the target of effect. The option is override the value of "for" attribute.
"type" defines the effect type. The option is override the value of "type" attribute.
Besides all you can load the Scriptaculous library to the page and use it directly without <rich:effect>:
<a4j:loadScript src="resource://scriptaculous/effect.js" />
But if you use the <rich:effect> there is no need to include this library because it's already there.
Table of <rich:effect> attributes.
Table 6.246. Component Identification Parameters
| Name | Value |
|---|---|
| component-type | org.richfaces.Effect |
| component-class | org.richfaces.component.html.HtmlEffect |
| component-family | org.richfaces.Effect |
| renderer-type | org.richfaces.EffectRenderer |
| tag-class | org.richfaces.taglib.EffectTag |
Visit the Effect page at RichFaces LiveDemo for examples of component usage and their sources.
Useful articels:
"Create a banner using effects and poll" and "Create a HTML banner using effects and poll" at RichFaces wiki contains sorces for creating an image and HTML banners;
"Slideshow" article at RichFaces Cookbook describes how to make a slideshow with help of the <rich:effect> and <a4j:poll> components;
Look at Scriptaculous documentation for set of available effect.
Find more information about the compinent at RichFaces Users Forum.
