JSF RichFaces Hello World using eclipse IDE


JSF RichFaces Hello World using eclipse IDE

In this tutorial, we are going to develop very first jsf richfaces application using eclipse IDE.

Pre-requisite

1. Eclipse IDE

2. Tomcat Server

Step-by-Step Guide.

1. Start eclipse IDE.

2. Click on File --> New Java Project

3. Add the details as follows.

Project Name --> jsfautheinticationdemo (You can put anything you want).

The location for the project I have created is under the tomcat webapps directory.

Location --> F:\app\apache-tomcat\webapps\jsfautheinticationdemo.

4. Select the rest of the information as shown in the figure below.

Then click Next.

5. Click Finish on the next screen as we will complete the rest of the configuration later.

6. Right Click on the project name, then click on create the folders as shown below.

jsfautheinticationdemo

    |

    |

      /web

      /WEB-INF

        |

          /classes

          /lib

7. After creating and expanding the folders the project will look like this:

8. Download the following jars from the following link.

Download JSF Libraries

Once downloaded, unzip all the files under jsfautheinticationdemo/WEB-INF/lib directory.

9. The next step is to add the jars to java build path of the project.

Right Click on the project --> properties --> Java build path --> Libraries.

Click Add Jars and select all the jars which you downloaded from the above link. Once downloaded, the project will look as shown in the image below.

10. The next step is to create the faces-config.xml file.

To create the faces-config.xml, Click WEB-INF --> New --> File and create the file with the name faces-config.xml and copy the below content to the faces-config.xml file and save the file.

<?xml version="1.0"?>
<faces-config>
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd" version="1.2">
	<navigation-rule>
		<from-view-id>/web/index.jsp</from-view-id>
	</navigation-rule>
</faces-config>
                

11. The next step is to create the web.xml file.

To create the web.xml, Click WEB-INF --> New --> File and create the file with the name web.xml and copy the below content to the web.xml file and save the file.

<web-app>
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
	</servlet>
       <!-- Plugging the "Blue Sky" skin into the project -->
	<context-param>
            <param-name>org.richfaces.SKIN</param-name>
   		<param-value>ruby</param-value>
	</context-param>
	<!-- Making the RichFaces skin spread to standard HTML controls -->
	<context-param>
	      <param-name>org.richfaces.CONTROL_SKINNING</param-name>
	      <param-value>enable</param-value>
	</context-param>
	<!-- Defining and mapping the RichFaces filter -->
	<filter> 
	   <display-name>RichFaces Filter</display-name> 
	   <filter-name>richfaces</filter-name> 
	   <filter-class>org.ajax4jsf.Filter</filter-class> 
	</filter> 
	<filter-mapping> 
	   <filter-name>richfaces</filter-name> 
	   <servlet-name>Faces Servlet</servlet-name>
	   <dispatcher>REQUEST</dispatcher>
	   <dispatcher>FORWARD</dispatcher>
	   <dispatcher>INCLUDE</dispatcher>
	</filter-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.faces</url-pattern>
	</servlet-mapping>
</web-app>
                

12. The next step is to create the index.jsp file.

To create the index.jsp, Click web --> New --> File and create the file with the name index.jsp and copy the below content to the index.jsp file and save the file.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@taglib uri="http://mojarra.dev.java.net/mojarra_ext" prefix="mj" %>
<%@taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<%@taglib uri="http://richfaces.org/rich" prefix="rich" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Login Page</title>
</head>
<f:view>
	<center>
        <h:panelGrid width="40%" columns="2" columnClasses="col1,col2">
        <rich:panel>
	Hello World
        </f:facet>
	    </rich:panel>
	    </h:panelGrid>
	</center>
</f:view>
</html>
                

13. The next step is to build the project. On eclipse workspace, Click Project --> build project.

As we have created the project under the tomcat webapps directory (deployment home for tomcat), just start the tomcat server and access the application via browser.

JSF RichFaces Hello World using eclipse IDE : Completed