Creating JavaServer Faces Application In Eclipse

February 26, 2014 by Mukesh Kumar at 3:47 pm

This article describes how to develop JavaServer Faces web applications with Eclipse. It demonstrates managed beans, validators, external resource bundles files and the JSF navigation concept.

Tools Used

JDK 1.6
Eclipse Indigo
Tomcat 6

JAR files required for this application

jsf-impl.jar
jsf-api.jar
jstl.jar
common-logging.jar
common-beanutils.jar
common-collections.jar
common-chain.jar
common-digester.jar

Click here to download the jar files.

This article describes how to develop JavaServer Faces web applications with Eclipse. It demonstrates managed beans, validators, external resource bundles files and the JSF navigation concept.

Tools Used

JDK 1.6
Eclipse Indigo
Tomcat 6

JAR files required for this application

jsf-impl.jar
jsf-api.jar
jstl.jar
common-logging.jar
common-beanutils.jar
common-collections.jar
common-chain.jar
common-digester.jar

Click here to download the jar files.

Let us start with our first JSF based web application.

Directory Structure Of Project

JSF Example

Step 1: Create Dynamic Web project

Open Eclipse and goto File -> New -> Project and select Dynamic Web Project in the New Project wizard screen.Select Dynamic Web Project and click Next.

JSF Example

Provide the name of the project as UserLoginJSF. Once this is done, select the target runtime environment (e.g. Apache Tomcat v6.0). This is to run the project inside Eclipse environment. In configuration select JavaServer Faces v1.2 Project and press Next -> Next -> Next.

JSF Example

In next screen select Disable Library Configuration from drop down and click Finish.

JSF Example

Step 2: Add jar files to build path of the project

Copy all the required jar files to the lib folder of the project directory and add all jar files to the build path of the project.

JSF Example

Step 3: Create JSP files

Create two JSP files: login.jsp and welcome.jsp in WebContent folder.

In this application we are going to develop two pages login.jsp and welcome.jsp. The login.jsp prompts the user to enter his/her name. Code of login.jsp is given below.

login.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<html>
<head>
<title>Login Page</title>
</head>
<body>
	<f:view>
		<h1>
			<h:outputText value="Login Page" />
		</h1>
		<h:form id="LoginForm">
			<h:outputText value="Enter Your Name:" />
			<h:inputText value="#{loginBean.userName}" />
			<h:commandButton action="welcome" value="OK" />
		</h:form>
	</f:view>
</body>
</html>

welcome.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<head>
<title>Welcome</title>
</head> 
<body>
<f:view>
<h3>
<h:outputText value="Welcome" />,
<h:outputText value="#{loginBean.userName}" /> to javawebtutor.com!
</h3>
</f:view>
</body> 
</html>

Step 4: Create Managed bean

Create a package com.jwt.jsf.bean in the source folder and create a Java file LoginBean.java. Copy following code into this file.

LoginBean.java

package com.jwt.jsf.bean;

public class LoginBean {
	private String userName;

	public String getUserName() {
		return userName;
	}

	public void setUserName(String userName) {
		this.userName = userName;
	}

}

Step 5: Update Configuration File(faces-config.xml)

Jsf looks for faces-config.xml in classpath and loads the configuration defined from here. Here we have defined managed bean (the backing bean), and navigation rule.
Open faces-config.xml from WebContent -> WEB-INF folder.Double click on the file. This will open the Faces Configuration Editor.

JSF Example

Select the ManagedBean tab in the editor. Select the request Managed Bean Element and select Add.

JSF Example

Choose the Using an existing Java class option, select Browse. Give the search element as LoginBean and select OK.

JSF Example

After that Next -> Next -> Finish

Now Bean is configured after that we need to configure navigation rule.Follow the steps mentioned below for configuration of navigation rule.

Launch the Faces Configuration Editor by double clicking on faces-config.xml

Select the Navigation Rule tab in the Configuration Editor. Under the Palette window select Page. This will select a PageFlow Page GUI object.

JSF Example

Drag the mouse over the Navigation Rule Window and click on the window. This will give a Select JSP File window. Select the login.jsp as shown in the figure and select OK.

JSF Example

Similarly add the welcome.jsp page on the Navigation Rule window. See the figure below:

JSF Example

Select Link from the Palette window and join the two pages as shown in the figure:

JSF Example

Select the link between the two pages and go to properties view and set the value for From Outcome field as validated. This is because of the tag <h:commandButton action="welcome" value="OK" />. Once all the inputs are valid the action taken is validated. See the figure.

JSF Example

Once done have a look the Source tab in the Faces Navigation Editor.Generated src code of faces-config.xml is given below.

faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>

<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">
	<managed-bean>
		<managed-bean-name>loginBean</managed-bean-name>
		<managed-bean-class>com.jwt.jsf.bean.LoginBean</managed-bean-class>
		<managed-bean-scope>request</managed-bean-scope>
	</managed-bean>
	<navigation-rule>
		<display-name>login</display-name>
		<from-view-id>/login.jsp</from-view-id>
		<navigation-case>
			<from-outcome>welcome</from-outcome>
			<to-view-id>/welcome.jsp</to-view-id>
		</navigation-case>
	</navigation-rule>

</faces-config>

Step 5: Create web.xml

Add following entry in web.xml file.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app id="WebApp_ID">
	<display-name>HelloWorldJSF</display-name>
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>
		javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>login.jsp</welcome-file>
		
	</welcome-file-list>
</web-app>

Step 6: Deploy and Test the application

Right click on the login.jsp file and select Run As -> Run On Server. This will deploy the application on the Apache Tomcat Server and a Login page will be launched.

JSF Example