Theodora Fragkouli

About Theodora Fragkouli

Theodora has graduated from Computer Engineering and Informatics Department in the University of Patras. She also holds a Master degree in Economics from the National and Technical University of Athens. During her studies she has been involved with a large number of projects ranging from programming and software engineering to telecommunications, hardware design and analysis.

JSF Tomcat Configuration Example

JavaServer Faces (JSF) is a web application framework that is intended to simplify development integration of web-based user interfaces. It is used for developing and building server side User Interface Components and using them in a web application. JSF technology is based on the Model-View-Controller (MVC) architecture and simplifies the construction of user interfaces (UI) for server-based applications by using reusable UI components in a page. The JSF specification defines a set of standard UI components and provides an API for developing such components. It also enables the reuse and extension of the existing standard UI components.

In this example we will configure JSF with Tomcat application server. We shall create a simple project using the JSF and we will deploy it in tomcat server.

Our preferred development environment is Eclipse. We are using Eclipse Juno (4.2) version, along with Maven Integration plugin version 3.1.0. You can download Eclipse from here and Maven Plugin for Eclipse from here. The installation of Maven plugin for Eclipse is out of the scope of this tutorial and will not be discussed. We are also using JDK 7_u_21. Tomcat 7 is the application server used.

Let’s begin,

1. Create a new Maven project

Go to File -> Project ->Maven -> Maven Project.

New-Maven-Project

In the “Select project name and location” page of the wizard, make sure that “Create a simple project (skip archetype selection)” option is unchecked, hit “Next” to continue with default values.

new project

Here the maven archetype for creating a web application must be added. Click on “Add Archetype” and add the archetype. Set the “Archetype Group Id” variable to "org.apache.maven.archetypes", the “Archetype artifact Id” variable to "maven-archetype-webapp" and the “Archetype Version” to "1.0". Click on “OK” to continue.

maven-archetype-webapp

In the “Enter an artifact id” page of the wizard, you can define the name and main package of your project. Set the “Group Id” variable to "com.javacodegeeks.snippets.enterprise" and the “Artifact Id” variable to "jsfexample". The aforementioned selections compose the main project package as "com.javacodegeeks.snippets.enterprise.jsfexample" and the project name as "jsfexample". Set the “Package” variable to "war", so that a war file will be created to be deployed to tomcat server. Hit “Finish” to exit the wizard and to create your project.

jsfexample-project

The Maven project structure is shown below:

jsfexamplelolders

    It consists of the following folders:

  • /src/main/java folder, that contains source files for the dynamic content of the application,
  • /src/test/java folder contains all source files for unit tests,
  • /src/main/resources folder contains configurations files,
  • /target folder contains the compiled and packaged deliverables,
  • /src/main/resources/webapp/WEB-INF folder contains the deployment descriptors for the Web application ,
  • the pom.xml is the project object model (POM) file. The single file that contains all project related configuration.

2. Add JSF dependencies

Add the dependencies in Maven’s pom.xml file, by editing it at the “Pom.xml” page of the POM editor. The dependencies needed for JSF are the ones shown below:

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.javacodegeeks.snippets.enterprise</groupId>
	<artifactId>jsfexample</artifactId>
	<packaging>war</packaging>
	<version>0.0.1-SNAPSHOT</version>
	<name>jsfexample Maven Webapp</name>
	<url>http://maven.apache.org</url>
	<build>
		<finalName>jsfexample</finalName>
	</build>
	<dependencies>
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>3.8.1</version>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.1.13</version>
		</dependency>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.1.13</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>3.0.1</version>
		</dependency>
	</dependencies>
</project>

3. Create a Managed Bean

The basic data elements when using a JSF application are the Managed Beans. Managed beans are simple Java objects (POJO’s) which can be used in an JSF application. They contain getter and setter methods, business logic or even a backing bean. They are accessed from a JSF page. They can be easily registered using annotations.

HelloWorldBean.java class is a simple java Bean. It has a String property and getter and setter method. The @ManagedBean annotation marks it to be a managed bean with the name helloWorldBean that is specified in name attribute. The bean is also annotated as @RequestScoped. This means that it lives as long as the HTTP request-response lives. It is created upon an HTTP request and gets destroyed when the HTTP response associated with the HTTP request is finished. In the init() method of the bean we set a String value to its property.

HelloWorldBean.java

package com.javacodegeeks.snippets.enterprise.jsf.servlet;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name="helloWorldBean")
@RequestScoped
public class HelloWorldBean {
	private String msg;

	public String getMsg() {
		return msg;
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}
	@PostConstruct
	private void init() {

		msg = "Hello World!! JFS example.. ";
	}

}

4. Create a view file

The index.xhtml file is placed under /webapp folder. It contains the View part of the JSF application. In order to access the values of the managed bean via value binding, JSF allows us to use EL expressions. We do not need to use the get() or set() method to get/set a variable’s value, but just the variable name. JSF EL expressions are of the type #{...}. Here, we are using such an expression to get the value of the managed bean’s property. It is set in a h:outputText tag, that renders the value as HTML text.

index.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:head>
	<title>JavaCodeGeeks</title>
</h:head>
<h:body>
	<h:outputText value="#{helloWorldBean.msg}" />
</h:body>
</html>

5. Configure web.xml

In a web application the web.xml file is the file that defines everything about the application that a server needs to know. Servlets and other components like filters or listeners, initialization parameters, container-managed security constraints, resources, welcome pages, etc are set here. In a JFS application we need to define in web.xml file the javax.faces.webapp.FacesServlet, that is the class responsible for handling JSF applications. FacesServlet is the central controller for the JSF application. It receives all requests for the JSF application and initializes the JSF components before the JSP is displayed. So, web.xml file has an entry that defines the FacesServlet. It is the servlet entry. It also has a servlet-mapping entry in order to map all requests whose URL ends with .xhtml to be handled by the servlet.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 

http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"

	id="WebApp_ID" version="3.0">
	<display-name>jsfexample</display-name>
	<servlet>
		<servlet-name>faces</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>faces</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>

</web-app>

6. Run the application

In order to run the application we need to build the project with Maven. The war file produced must be placed in webapps folder of tomcat. Then, we can hit on :

localhost:8080/jsfexample/index.xhtml

on a browser, and the result is the one shown below:

jsftomcat

 
This was an example of how to configure JSF in tomcat application server.
Download the Eclipse project of this tutorial : JSFTomcatExample.zip

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.

3 Responses to "JSF Tomcat Configuration Example"

  1. Thomas says:

    I think the servlet-api Dependency should be scope provided.
    I would also suggest to you use a current Version of JSF (2.2.4 or 2.1.26, if you want to stick with 2.1.x). 2.1.13 is more then a year old – and if you follow JSF Development there were serious fixes since then.

    The better dependency for JSF is:

    org.glassfish
    javax.faces
    2.2.x

    This includes JSF-Api and Impl.

  2. Leo says:

    I thought this would be a post telling me how to optimize tomcat parameters for JSF apps :-(

  3. Disper says:

    Hey,
    When I imported your project I had a maven error that told me that project uses 1.5 version of JDK.

    Adding following code to pom.xml solved my error:

    UTF-8
    1.7
    1.7

    Thanks for your tutorial :)

Leave a Reply


7 + = twelve



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close