Creating a JSF application in 10 minutes

This page describes the process of setting up a JSF project on Eclipse using Maven. We will create a sample project and verify that each of the wizards and JSF views provided by eclipse are in working order. This page also contains a sample application you may copy and paste right into your project. You may run this with the built in jetty plug-in or since this is a Eclipse WTP project you may also run it with Apache Tomcat or on the IBM Websphere Test Environment.


  • Maven 2
  • Java 5
  • Servlet Spec 2.5
  • Covers JSF 1.2

Generate the web application

First we start with a maven archetype

mvn archetype:generate -DarchetypeArtifactId=maven-archetype-webapp

For the group id enter: test

For the artifactId enter: jsfTestWeb

cd to the project▒??s folder
Next we create the src/main/java folder since this is not done for us using the archetype.

on unix you type: mkdir /src/main/java

modify the pom.xml file. It should look like this…

<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">
        <name>jsfTestWeb Maven Webapp</name>

mvn eclipse:clean eclipse:eclipse

Import the Existing project (generated project) into eclipse.

Modify the src/main/webapp/WEB-INF/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_2_5.xsd"
        id="WebApp_ID" version="2.5">
  <display-name>Archetype Created Web Application</display-name>

        <servlet-name>Faces Servlet</servlet-name>

        <servlet-name>Faces Servlet</servlet-name>
        <servlet-name>Faces Servlet</servlet-name>



Create a src/main/webapp/WEB-INF/faces-config.xml

<?xml version='1.0' encoding='UTF-8'?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
              xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"


Create / Modify

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<h2>JSF Test Application</h2>
<p><a href="<c:url value='helloWorld.jsf'/>">JSF Test Page</a></p>

Create a jsp src/main/webapp/helloWorld.jsp

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

        <title>Hello World JSF Example</title>
                <p>This is a simple hello world page using Faces.</p>
                <p>Enter your message here: <br/>
                <h:inputText valueChangeListener="#{messageModel.printMessage}" value="#{message}" size="35"/></p>
                <h:commandButton value="Submit" action="submit"/>

Create a managed Bean


Create the test directory below if it does not exist.

package test;

import javax.faces.event.ValueChangeEvent;

public class MessageModel {
        public void printMessage(ValueChangeEvent e) {
                System.out.println("old value was: " + e.getOldValue());
                System.out.println("new value is: " + e.getNewValue());

Run the JSF application

Save all files and run the application in jetty.

mvn jetty:run

The application should come up when you point your browser to http://localhost:8080

Type in some text and you should see some output on the console window.

Right click on the page and click view source. You will notice JSF generated code.

Faces Configuration Editor

At this time you can close the faces-config.xml and open it again. This time around it should open using the Faces Configuration Editor. Take some time to get acquainted with the features of this editor.

JSF JSP Editor

Enable the Palette View by going to Windows -> show View -> Search for palette.

Create a new JSP and you should be able to drag and drop JSF components from the palette onto the page.

At this time you have an application that is ready for development. If you choose to proceed you will find a sample application you can integrate into the project you created above.

That’s all for Now!

This site is a collaborative effort! The complete text and sourcecode for this is available on GitHub. Corrections and enhancements are welcome, please make the change and submit a pull request in the comment area below.

4 Responses to “Creating a JSF application in 10 minutes”

  1. 1 Russell Bateman
    February 1, 2011 at 6:04 pm

    –Attribute ‘message’ expects settable value, but expression is no settable.

    –The action value ‘submit’ does not match a navigation case outcome. (There’s nothing in faces-config.xml for this, nor is there any .jsp/.xhtml target. You might have said to ignore this.)

    http://localhost:8080/ leads to 404. You might give various reasons this could occur and what to do to solve them.

    Tried in Tomcat 6 and didn’t work there either.

    • February 1, 2011 at 8:37 pm

      Not sure what’s causing your issue. Are you using maven2 with the pom.xml file provided? As you can see above I am running jetty inside the maven2 system by executing mvn jetty:run. Just to make sure the page is correct, I re-implemented the steps mentioned on this page from the beginning and it worked fine for me tonight.

      • 3 guest
        April 20, 2013 at 3:29 pm

        I had an error thrown a few times due to copy and paste from this page on a windows machine to the xml files, so cleaning the xml from all white spaces and other invisible characters fixed my problem and was able to build it.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 77 other followers

November 2009
« Oct   Dec »

Blog Stats

  • 846,580 hits

%d bloggers like this: