JQuery Effects in a JSF Application
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 net to find a way to implement JQuery in a JSF application and 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,
<a4j:loadScript src="resource://jquery.js"/>
Note:
To implement Jquery, thefunctionjQuery()should be usedinstead of$().
And now let us learn how to write a JQuery to implement the Effects in a JSF application.
Basic Effects
For Basic Effects, Let us see an example to show and hide a div with the use of JQuery.
<%--
Document : JQueryEffects
Author : Giftsam
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery Effects</title>
<a4j:loadScript src="resource://jquery.js"/>
<script type="text/javascript">
<!-- JQuery to show/hide a div -->
function showHideDiv()
{
jQuery(document).ready(function() {
var $ = jQuery;
if ($("#panelDiv").is(":hidden"))
{
$("#panelDiv").show("slow");
}
else
{
$("#panelDiv").hide("slow");
}
});
}
</script>
</head>
<body>
<h:form id="formId">
<rich:panel header="Jquery Effects" style="position: relative; width: 350px;">
<a4j:commandLink id="showLinkId" value="Click Here" onclick="showHideDiv()" reRender="panelDiv"/>
<div id="panelDiv">
<rich:panel style="position: relative; top: 4px;">
<p> JQuery relishes our application in a fascinated manner.
jQuery is a lightweight JavaScript library that emphasizes
interaction between JavaScript and HTML. It was released in January 2006 at
BarCamp NYC by John Resig.</p>
</rich:panel>
</div>
</rich:panel>
</h:form>
</body>
</html>
</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 represented as (“slow”, “normal”, or “fast”) and also it can be represented in the Milliseconds(Eg: 500) to determine the predefined speed of the effects and Next we shall learn how to implement sliding effects in a JSF application with the use of JQuery.
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.
<pre><script type="text/javascript">
function slideUpAndDown()
{
jQuery(document).ready(function() {
var $ = jQuery;
if ($("#panelDiv").is(":hidden"))
{
$("#panelDiv").slideDown("slow");
}
else
{
$("#panelDiv").slideUp("slow");
}
});
}
</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.
Fading Effects
For Fading effects, let us again see the same example to implement FadeIn, FadeOut and FadeTo effects in a JSF application with the use of JQuery.
FadeIn
The Following JQuery should be wrapped inside the head tag of the JSP document to implement fadeIn effects for a JSF application.
<script type="text/javascript">
function fadeIn()
{
jQuery(document).ready(function() {
jQuery("#panelDiv").fadeIn("slow");
});
}
</script>
FadeOut
The Following JQuery should be wrapped inside the head tag of the JSP document to implement fadeIn effects for a JSF application.
<script type="text/javascript">
function fadeOut()
{
jQuery(document).ready(function() {
jQuery("#panelDiv").fadeOut("slow");
});
}
</script>
<em><strong>FadeTo</strong></em>
The Following JQuery should be wrapped inside the head tag of the JSP document to implement fadeTo effects for a JSF application.
[sourcecode language="css"]
<script type="text/javascript">
function fadeTo()
{
jQuery(document).ready(function() {
jQuery("#panelDiv").fadeTo("slow", 0.33);
});
}
</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.
What Java EE Server do you use?
Java EE servers are based on the Java™ 2 Platform, Enterprise Edition (J2EE™) and is used widely to provide code portability, reuse across tiers, platform support, scalability and for EJB strengths. Instead these supports are provided by the most of the java EE servers, this article is the place where you can share the Java EE servers used during your project development. I have assessed most of the Java EE servers used by the developers in the below. Kindly choose the Java EE server(Choose all that apply) which you use, also share the reason why you choose the particular Java EE server for your project development. Also if your option is others remark your Java EE server in the comments.
Live Charts in JSF using Primefaces
Introduction
Quite some time back I had wrote an article about “Charts in JSF using Primefaces”, where I had specified the ways to construct the commonly used charts for a web application. But in this article let us learn how to construct a chart that displays the live data. Primefaces charts has built in support for ajax-polling and provides a feature for diplaying live, dynamic, real-time data based on flash. This feature may be used in our real time application to indicate the changing temperatures or to show the profit/loss in a stock market. Before proceeding in to this article, you need to configure Primefaces along with JSF in your favourite IDE. I hope the article “Step by step tutorial to setup Primefaces in Netbeans” would be helpful to do so, and also we should have the prerequisites stated below,
Things You’ll Need
- Your Favourite IDE
- Tomcat 6.x/Glassfish/Jboss
- JDK 1.5 and above
I assume that you had configured the primefaces in your favourite IDE and now let us start constructing live charts for a JSF application using Primefaces. Read more…
Charts in JSF using Primefaces
Introduction
In the Previous days the charts can be created in the JSF application with the use of JSF Chart Creator, But now while surfing the net the peoples suggested to get rid of JSF Chart Creator and to focus on Primefaces charts. Definitely I am sure Primefaces provides the easiest ways to create charts components in a JSF application which is based on flash based YUI charts. In this article we are going to construct the most commonly used chart types in a JSF application with the use of Primefaces. Before proceeding to the construction of charts first we need to configure Primefaces for a JSF application. I hope the article “Step by step tutorial to setup Primefaces in Netbeans” would be helpful to do so, and also we should have the prerequisites stated below,
Things You’ll Need
- Your Favourite IDE
- Tomcat 6.x/Glassfish/Jboss
- JDK 1.5 and above
I assume that you had configured the primefaces in your favourite IDE and now let us start constructing some of the commonly used charts types. Read more…
What component library do you use with JSF?
JavaServerFaces (JSF) is a standardized specification for building User Interfaces for server-side applications and also the third party libraries can be easily incorporated in to the JSF applications. Instead there are many third party libraries and each relishes our web application in its own certain way. I am very keen to know what component libraries often used by the developers while constructing a web project. I have assessed most of the components libraries used by the developers in the below. Kindly choose the component library which you use with JSF(choose all that apply). If your option is others, kindly remark the component library in the comments.
Note: Poll closed on 24/11/2009
Step by step tutorial to setup Primefaces in Netbeans6.x
Introduction
This tutorial shows how to setup Primefaces component suite for a JSF or a Facelets project along with Richfaces in Netbeans6.x. Furthermore, you can learn how to make a hello world application using Primefaces in JSF. First let me give a small intro about Primefaces, which is an open source component suite for Java Server Faces and contains so many obliging features. At first Primefaces is a light weight component that contains more than seventy ajax powered JSF components with rich look and feel. In addition it has TouchFaces module features which is a UI kit used for developing mobile web applications. Also the most important thing is Primefaces is compatable with other components libraries like Richfaces, even the ajax integration part can be attained without any conflicts. Thats ok!! Now let us come to the point this article explains the configuration features of Primefaces with Netbeans6.x.
Prerequisites
- IDE – Netbeans 6.x
- Tomcat 6.x/Glassfish/Jboss
- JDK 1.5 and above
I assume you have all the prerequisites which I had mention above. Now let us move to the Read more…
Layouting and Dynamic Includes in Facelets
Introduction
A classified web applications necessitate the use of Cascading Style Sheets(CSS), JavaScript, together with a server-side framework, such as JavaServer Faces(JSF). This article is consecrated for the peoples who wants to use facelets as an alternative view technology for building JSF applications. This article is splitted in to two-part series, Here you will find out how to make a complete Layout in JSF using facelets. In addition, learn how to include the pages dynamically, so that you can make use of serveral JSF forms more dynamic. Before starting this tutorial, first you need to create and configure facelets for your a web application project, the following link Facelet installation would be helpful to configure the facelets for your project.
Part1 - How to make Layouts in Facelets
After creating and installing facelets prerequisite for your project. Lets move to the part1 where you will learn to make template in facelets. As you all know, you can create a web page template for facelets in xhtml documents. This demo application Read more…
JSF+Facelets+Richfaces Installation-Guide
Introduction
Installing facelets together with richfaces is very simple. I used to develope web applications with JSF and its libraries like richfaces, Icefaces and so on. But I felt, my application have achieved a greater landmark only after implementing facelets. The reason is, facelets contains obliging features like templating(Similarly like struts), Composition components(Reuse can be achieved), also resolves the mismatch between JSF and JSP technologies(Eg: <jsp:param> tag cannot be used in JSF while using <jsp:include> tag) and so on. This article explains the installation of Richfaces and facelets with JSF.
Prerequisites
- IDE – Netbeans 6.x or Eclipse(Now Netbeans 6.7 provides the feature for creating facelets projects)
- Tomcat 6.x or Glassfish
- JDK 1.5 and above
Installing facelets can be accomplished by four steps in a web application project. If you are the one who use Netbeans 6.7 IDE which provides the features for creating facelet projects kindly skip the below Read more…
Resolve IE8 Compatibility Issues with Richfaces
Introduction:
I have developed a web application in JSF along with richfaces. My application perfectly works in the various browsers like Firefox, Google Chrome also in IE6 and IE7. But in IE8, I found a compatability issue with Richfaces. I felt wrecked, because the web application designed in the older version browsers, doesnt have the support in the newer versions. But eventually I have a founded a solution to resolve this Richfaces compatability issues in IE8. The way is to implement “IE=7” X-UA-Compatible tag, which instructs IE8 to display content in IE7 Standards mode. I got this resource from the following link of IE blogs.
The Trick:
Resolving IE8 compatability issues with richfaces is accomplished by two tricks,
Trick1:
Add the <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /> header tag Read more…
Tricks to Add Scroll Bars for Rich ModalPanel
Introduction:
Rich faces contains so many benificial components which also includes rich:modalpanel. Implementing rich:modalpanel is quite easy by following the document of richfaces. But assume that if the page to be displayed in the modal panel is bigger that the monitor screen size, definitely the page will be extended over the screen with no scroll bars. The first question comes to the mind is “How could I invoke scroll bars to the modalpanel”. Dont worry it will be touched on soon.
The Trick:
Add the below style in the style class. Read more…
Author
Gift Sam
Recent Comments