Setting up JSF 2.1 Environment in Eclipse and Getting Started

Setting up JSF 2.1 Environment in Eclipse and Getting Started

JSF or Java Server Faces is a specification for building component oriented user interfaces for web and enterprise applications on the JEE platform. This post will help you setup a JSF 2.1 development environment in eclipse with an Apache Tomcat as the app server and then write a very simple managed bean to get started. Lets get started with setting up the development environment first.

Setting up Eclipse for JSF development

Go to File > New > Project and select Dynamic Web Project from the Project Wizard

Create a new Dynamic Web Project

Next, provide a project name, select JavaServer Faces v2.1 in the configurations drop down and click Next.

 

Continue to click Next until you get to the following screen.

On this screen, click the highlighted button to select a JSF implementation.

 In our case, we are using Apache’s myFaces so we will select that and press Next to download the jars related to the JSF implementation.

Once, the following steps are done, complete the wizard until the project is created.

Once the project is setup, go take a look at web.xml. It will look something like this. The highlighted parts of the XML show JSF faces servlet configuration.

Next, we will add the JSTL library to our classpath. Go to this page to download both JSTL API and Implementation. We will be using JSTL version 1.2.1. Go to Project > Properties > Java Build Path > Libraries and click on the Add Libraries button. On the popup that appears, select User Library and click Next.

 

 

On the screen after the one above, click the User Libraries… button which leads to the following screen.

 

Click the New button and enter the name of the user library.

 

Once that is done, click on the Add Jars to add the downloaded JSTL jars to your user library.

 

 

By this time you have successfully configured your environment for JSF development. Next, we will create our first Managed Bean and a JSP page that interacts with that bean.

 

Our First Managed Bean and the JSP

Managed beans are essentially backing objects that provide models (data and logic) for your views. A managed bean may have one of the following scopes.

  • Application(@ApplicationScoped): Application scope persists across all users’ interactions with a web application.
  • Session(@SessionScoped): Session scope persists across multiple HTTP requests in a web application.
  • View(@ViewScoped): View scope persists during a user’s interaction with a single page (view) of a web application.
  • Request(@RequestScoped): Request scope persists during a single HTTP request in a web application.
  • None(@NoneScoped): Indicates a scope is not defined for the application.
  • Custom(@CustomScoped): A user-defined, nonstandard scope. Its value must be configured as a java.util.Map. Custom scopes are used infrequently.

Let’s create a Session Scoped Managed Bean by creating a simple Java class that simply returns the current time formatted as a String.

 


package co.syntx.examples.jsf;

import java.text.SimpleDateFormat;
import java.util.Date;

public class CurrentTime {

	private String format ="yyyyMMdd HH:mm:ss";
	private String time; 

	public String getTime() {
		SimpleDateFormat sdf = new SimpleDateFormat(format);
		time = sdf.format(new Date());
		return time; 
	}

	public void setTime(String time) {
		this.time = time;
	}

}

 

You should have a faces-config.xml file as part of your project. Open the file and click on the managed bean tab as shown below. You can use this view to create a managed bean having either of the scopes we have discussed above.

 

 

Press the Add button and selected the class that we had created earlier to configure it as a managed bean in the faces-config.xml

 

 

Following is the managed bean entry  in the 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_2_1.xsd"
    version="2.1">
	<managed-bean>
		<managed-bean-name>currentTime</managed-bean-name>
		<managed-bean-class>co.syntx.examples.jsf.CurrentTime</managed-bean-class>
		<managed-bean-scope>session</managed-bean-scope>
	</managed-bean>

</faces-config>

 

As of JSF 2.x, you can do away with the faces-config.xml file altogether and use annotations to define managed beans and configure scopes as shown below.

 



...
@ManagedBean(name = "currentTime", eager = true)

public class CurrentTime {

	private String format ="yyyyMMdd HH:mm:ss";
	private String time;
...

Finally, create a JSP page in the WebContent folder. Let’s call it Time.jsp. All JSF tags need to be enclosed in an <f:view> tag. Our expression #{currentTime.time} will actually result in the getTime() method being called on our Managed Bean.


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Current Time Page</title>
</head>
<body>
	<f:view>
		<h:outputLabel value="#{currentTime.time}"></h:outputLabel>
	</f:view>
</body>
</html>

Right click on Time.jsp and select Run As > Run on Server

It will return the following result.

That’s it! You have successfully setup and run your first JSF application.

  • Kyrylo Semenko

    Thank you