jQuery effects in JSF

PrimeFaces effect component encapsulates jquery effects using the effect component. Basically effect component is nested as a child inside a parent component;

For example;

<p:panel header="Explode">
    <h:outputText value="click" />
<p:effect type="explode" event="click" >
</p:panel>

Parent component above is the primefaces panel, when the panel is clicked it explodes, Boooooom!

Animation Configuration

Effect parameters are supplied via the f:param tags, any number of parameters can be supplied with this way.

<p:panel header="Scale">
	<h:outputText value="click" />
<p:effect type="scale" event="click">
	        <f:param name="percent" value="90" />
       </p:effect>
</p:panel>

Effect Target

By default, effects are applied to the parent component, there may be cases where parents are used to trigger animations on another component, suppose you click a link and image comes up with an animation. This can be implemented as;


<h:outputLink id="lnk" value="#">
    <h:outputText value="Show the Barca Temple" />
<p:effect type="puff" event="click" for="img" />
</h:outputLink>

<h:graphicImage id="img" value="/ui/barca/campnou.jpg" style="display:none"/>

When the “lnk” link is clicked, image is displayed with the appear effect.

Online Demo for examples

Examples I gave here can be seen in action at online demo of PrimeFaces.

Comments are closed.

%d bloggers like this: