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

Related Whitepaper:

Functional Programming in Java: Harnessing the Power of Java 8 Lambda Expressions

Get ready to program in a whole new way!

Functional Programming in Java will help you quickly get on top of the new, essential Java 8 language features and the functional style that will change and improve your code. This short, targeted book will help you make the paradigm shift from the old imperative way to a less error-prone, more elegant, and concise coding style that’s also a breeze to parallelize. You’ll explore the syntax and semantics of lambda expressions, method and constructor references, and functional interfaces. You’ll design and write applications better using the new standards in Java 8 and the JDK.

Get it Now!  

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


one × 7 =



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy
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.

Sign up for our Newsletter

20,709 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books