Developing Web Applications using JavaServer Faces: Part 1

6 min read

Although a lot of applications have been written using these APIs, most modern Java applications are written using some kind of web application framework. As of Java EE 5, the standard framework for building web applications is Java Server Faces (JSF).

Introduction to JavaServer Faces

Before JSF was developed, Java web applications were typically developed using non-standard web application frameworks such as Apache Struts, Tapestry, Spring Web MVC, or many others. These frameworks are built on top of the Servlet and JSP standards, and automate a lot of functionality that needs to be manually coded when using these APIs directly.

Having a wide variety of web application frameworks available (at the time of writing, Wikipedia lists 35 Java web application frameworks, and this list is far from extensive!), often resulted in “analysis paralysis”, that is, developers often spend an inordinate amount of time evaluating frameworks for their applications.

The introduction of JSF to the Java EE 5 specification resulted in having a standard web application framework available in any Java EE 5 compliant application server.

We don’t mean to imply that other web application frameworks are obsolete or that they shouldn’t be used at all, however, a lot of organizations consider JSF the “safe” choice since it is part of the standard and should be well supported for the foreseeable future. Additionally, NetBeans offers excellent JSF support, making JSF a very attractive choice.

Strictly speaking, JSF is not a web application framework as such, but a component framework. In theory, JSF can be used to write applications that are not web-based, however, in practice JSF is almost always used for this purpose.

In addition to being the standard Java EE 5 component framework, one benefit of JSF is that it was designed with graphical tools in mind, making it easy for tools and IDEs such as NetBeans to take advantage of the JSF component model with drag-and-drop support for components. NetBeans provides a Visual Web JSF Designer that allow us to visually create JSF applications.

Developing Our first JSF Application

From an application developer’s point of view, a JSF application consists of a series of JSP pages containing custom JSF tags, one or more JSF managed beans, and a configuration file named faces-config.xml. The faces-config.xml file declares the managed beans in the application, as well as the navigation rules to follow when navigating from one JSF page to another.

Creating a New JSF Project

To create a new JSF project, we need to go to File | New Project, select the Java Web project category, and Web Application as the project type.

After clicking Next, we need to enter a Project Name, and optionally change other information for our project, although NetBeans provides sensible defaults.

Java EE 5 Development with NetBeans 6

On the next page in the wizard, we can select the Server, Java EE Version, and Context Path of our application. In our example, we will simply pick the default values.

Java EE 5 Development with NetBeans 6

On the next page of the new project wizard, we can select what frameworks our web application will use.

Java EE 5 Development with NetBeans 6

Unsurprisingly, for JSF applications we need to select the JavaServer Faces framework.

The Visual Web JavaServer Faces framework allows us to quickly build web pages by dragging-and-dropping components from the NetBeans palette into our pages. Although it certainly allows us to develop applications a lot quicker than manually coding, it hides a lot of the “ins” and “outs” of JSF. Having a background in standard JSF development will help us understand what the NetBeans Visual Web functionality does behind the scenes.

When clicking Finish, the wizard generates a skeleton JSF project for us, consisting of a single JSP file called welcomeJSF.jsp, and a few configuration files: web.xml, faces-config.xml and, if we are using the default bundled GlassFish server, the GlassFish specific sun-web.xml file is generated as well.

Java EE 5 Development with NetBeans 6

web.xml is the standard configuration file needed for all Java web applications. faces-config.xml is a JSF-specific configuration file used to declare JSF-managed beans and navigation rules. sun-web.xml is a GlassFish-specific configuration file that allows us to override the application’s default context root, add security role mappings, and perform several other configuration tasks.

The generated JSP looks like this:

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri=""%>
<%@taglib prefix="h" uri=""%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
This file is an entry point for JavaServer Faces application.
<meta http-equiv="Content-Type" content="text/html;
<title>JSP Page</title>
<h:outputText value="JavaServer Faces"/>

As we can see, a JSF enabled JSP file is a standard JSP file using a couple of JSF-specific tag libraries. The first tag library, declared in our JSP by the following line:

<%@taglib prefix="f" uri=""%>

is the core JSF tag library, this library includes a number of tags that are independent of the rendering mechanism of the JSF application (recall that JSF can be used for applications other than web applications). By convention, the prefix f (for faces) is used for this tag library.

The second tag library in the generated JSP, declared by the following line:

<%@taglib prefix="h" uri=""%>

is the JSF HTML tag library. This tag library includes a number of tags that are used to implement HTML specific functionality, such as creating HTML forms and input fields. By convention, the prefix h (for HTML) is used for this tag library.

The first JSF tag we see in the generated JSP file is the <f:view> tag. When writing a Java web application using JSF, all JSF custom tags must be enclosed inside an <f:view> tag. In addition to JSF-specific tags, this tag can contain standard HTML tags, as well as tags from other tag libraries, such as the JSTL tags.

The next JSF-specific tag we see in the above JSP is <h:outputText>. This tag simply displays the value of its value attribute in the rendered page.

The application generated by the new project wizard is a simple, but complete, JSF web application. We can see it in action by right-clicking on our project in the project window and selecting Run. At this point the application server is started (if it wasn’t already running), the application is deployed and the default system browser opens, displaying our application’s welcome page.

Java EE 5 Development with NetBeans 6


Please enter your comment!
Please enter your name here