Introduction
Nowadays whenever I surf the net, I am crossing an article about Jquery. The reason is JQuery relishes our application in a fascinated manner that tempts me to ponder the internet to find the ways to implement JQuery in a JSF application. Eventually I found that Richfaces component library provides an easiest way to implement JQuery in a JSF application. In this article let us learn how to invoke the JQuery effects in a JSF application with the use of Richfaces. Before proceeding in to the topic, Let us see what are the prerequisites for this article.
Things You’ll Need
- Your Favourite IDE
- Tomcat 6.x/Glassfish/Jboss
- JDK 1.5 and above
I assume that you have all the prerequisites needed for this article and now let us see how to implement the following JQuery effects in a JSF application with the use of Richfaces,
- Basic Effects
- Sliding Effects
- Fading Effects
First Thing to know
The following library should be included in the head tag of a JSP document(JSF Application) or a xhtml document(Facelet Application) to use the feature of the JQuery in a JSF application,
Note: To implement Jquery, the function jQuery()should be used instead of $().
1. Basic Effects
For Basic Effects, Let us see an example to show and hide a div with the use of JQuery.
02 |
Document : JQueryEffects |
06 |
<%@page contentType= "text/html" pageEncoding= "UTF-8" %> |
07 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
17 |
<meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" > |
18 |
<title>JQuery Effects</title> |
20 |
<script type= "text/javascript" > |
22 |
<!-- JQuery to show / hide a div --> |
23 |
function showHideDiv() |
25 |
jQuery(document).ready(function() { |
27 |
if ($( "#panelDiv" ).is( ":hidden" )) |
29 |
$( "#panelDiv" ). show ( "slow" ); |
33 |
$( "#panelDiv" ). hide ( "slow" ); |
41 |
<rich:panel header= "Jquery Effects" style= "position: relative; width: 350px;" > |
42 |
<a 4 j:commandLink id= "showLinkId" value= "Click Here" onclick= "showHideDiv()" reRender= "panelDiv" /> |
44 |
<rich:panel style= "position: relative; top: 4px;" > |
45 |
<p> JQuery relishes our application in a fascinated manner. |
46 |
jQuery is a lightweight JavaScript library that emphasizes |
47 |
interaction between JavaScript and HTML. It was released in January 2006 at |
48 |
BarCamp NYC by John Resig.</p> |
The preceding Jquery is used to apply the show/hide effects when the user clicks the “Click here” command link and the arguments can be either represented as (“slow”, “normal”, or “fast”) or in the Milliseconds(Eg: 500) to determine the predefined speed of the effects. Next we shall learn how to implement sliding effects in a JSF application with the use of JQuery.
2. Sliding Effects
For sliding effects, let us see the same example for implementing the SlideUp and SlideDown effects and the following Jquery should be added in the head tag of the JSP document.
01 |
<script type= "text/javascript" > |
02 |
function slideUpAndDown() |
04 |
jQuery(document).ready(function() { |
06 |
if ($( "#panelDiv" ).is( ":hidden" )) |
08 |
$( "#panelDiv" ).slideDown( "slow" ); |
12 |
$( "#panelDiv" ).slideUp( "slow" ); |
Arguments can be either represented as (“slow”, “normal”, or “fast”) or in the Milliseconds(Eg: 500) to determine the predefined speed of the effects. And finally let us learn how to implement fading effects in a JSF application with the use of JQuery.
3. Fading Effects
For Fading effects, let us again see the same example to implement FadeIn, FadeOut and FadeTo effects in a JSF application.
FadeIn
The Following JQuery should be wrapped inside the head tag of the JSP document to implement fadeIn effects for a JSF application.
1 |
<script type= "text/javascript" > |
4 |
jQuery(document).ready(function() { |
5 |
jQuery( "#panelDiv" ).fadeIn( "slow" ); |
FadeOut
The Following JQuery should be wrapped inside the head tag of the JSP document to implement fadeOut effects for a JSF application.
1 |
<script type= "text/javascript" > |
4 |
jQuery(document).ready(function() { |
5 |
jQuery( "#panelDiv" ).fadeOut( "slow" ); |
FadeTo
The Following JQuery should be wrapped inside the head tag of the JSP document to implement fadeTo effects for a JSF application.
1 |
<script type= "text/javascript" > |
4 |
jQuery(document).ready(function() { |
5 |
jQuery( "#panelDiv" ).fadeTo( "slow" , 0.33 ); |
Arguments can be either represented as (“slow”, “normal”, or “fast”) or in the Milliseconds(Eg: 500) to determine the predefined speed of the effects. The coding section to implement various effects is completed and the effects are applied when the user clicks the “Click Here” command link of our example page and now let us have a look at the snap of our example.
Snap Shot

I hope this article clearly explains how to implement various JQuery effects in a JSF application. If you find this article is useful to you dont forget to give your valuable comments. Have a joyous code day.