JQuery Effects in a JSF Application

December 10, 2009 · Leave a Comment
Filed under: Featured, JAVA, JavaScript, JQuery 

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,

  1. Basic Effects
  2. Sliding Effects
  3. 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,

1 <a4j:loadScript src="resource://jquery.js"/>

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.

01 <%--
02 Document   : JQueryEffects
03 Author     : Giftsam
04 --%>
05
06 <%@page contentType="text/html" pageEncoding="UTF-8"%>
07 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
09 <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
10 <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
11 <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
12 <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
13
14 <f:view>
15 <html>
16 <head>
17 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
18 <title>JQuery Effects</title>
19 <a4j:loadScript src="resource://jquery.js"/>
20 <script type="text/javascript">
21
22 <!-- JQuery to show/hide a div -->
23 function showHideDiv()
24 {
25 jQuery(document).ready(function() {
26 var $ = jQuery;
27 if ($("#panelDiv").is(":hidden"))
28 {
29 $("#panelDiv").show("slow");
30 }
31 else
32 {
33 $("#panelDiv").hide("slow");
34 }
35 });
36 }
37 </script>
38 </head>
39 <body>
40 <h:form id="formId">
41 <rich:panel header="Jquery Effects" style="position: relative; width: 350px;">
42 <a4j:commandLink id="showLinkId" value="Click Here" onclick="showHideDiv()" reRender="panelDiv"/>
43 <div id="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>
49 </rich:panel>
50 </div>
51 </rich:panel>
52 </h:form>
53 </body>
54 </html>
55 </f:view>

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.

view source




print?

01 <script type="text/javascript">
02 function slideUpAndDown()
03 {
04 jQuery(document).ready(function() {
05 var $ = jQuery;
06 if ($("#panelDiv").is(":hidden"))
07 {
08 $("#panelDiv").slideDown("slow");
09 }
10 else
11 {
12 $("#panelDiv").slideUp("slow");
13 }
14 });
15 }
16 </script></pre>

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">
2 function fadeIn()
3 {
4 jQuery(document).ready(function() {
5 jQuery("#panelDiv").fadeIn("slow");
6 });
7 }
8 </script>

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">
2 function fadeOut()
3 {
4 jQuery(document).ready(function() {
5 jQuery("#panelDiv").fadeOut("slow");
6 });
7 }
8 </script>

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">
2 function fadeTo()
3 {
4 jQuery(document).ready(function() {
5 jQuery("#panelDiv").fadeTo("slow", 0.33);
6 });
7 }
8 </script>

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.

Tags: , , ,